Another es2016 estrange code that runs

Question

In the next code:

     return connectDropTarget(
         <div style={{ ...style, backgroundColor }}>
             {`Works with ${allowedDropEffect} drop effect`}
         <br />
         <br />
             {isActive ? 'Release to drop' : 'Drag a box here'}
         </div>,
    )

what is the use of ...style for? I can't see any variable declared as style.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax — epascarello, Mar 07 '18 at 22:49
if there is no `style` object declared this will throw an error — Sagiv b.g, Mar 07 '18 at 22:50
but at the end it seems we get to mixture everything... is React es2015? my webpack tell me yes: presets: ['es2015', 'stage-0', 'react'] } — Jose Cabrera Zuniga, Mar 07 '18 at 23:59
@Bergi It's been a part of es6 for a while now though https://github.com/tc39/proposal-object-rest-spread. Is this something different? — Chase DeAnda, Mar 08 '18 at 15:30
@ChaseDeAnda That's the proposal that got accepted for ES2018. ES6 was released in 2015. It did not contain rest/spread properties for objects. — Bergi, Mar 08 '18 at 15:37
@Bergi Okay that is too confusing. Is there a single place where I can view all of the changes between versions? — Chase DeAnda, Mar 08 '18 at 15:40
@ChaseDeAnda The [spec intro](https://tc39.github.io/ecma262/#sec-intro) has a short overview, for a definite table see the [finished proposals](https://github.com/tc39/proposals/blob/master/finished-proposals.md) in the [TC39 proposals](https://github.com/tc39/proposals) repo. Minor/editorial changes are [managed in the spec repo](https://github.com/tc39/ecma262/issues), though. — Bergi, Mar 08 '18 at 15:52

Chase DeAnda · Accepted Answer · 2018-03-08T15:17:51.103

It's spread syntax that is being used to copy the contents of an existing style object and then adding/overwriting a backgroundColor property.

const styles = {
    position: 'relative',
    top: 0,
    left: 0
};

const backgroundColor = {
    background: '#FFF'
};

const newStyles = {...styles, backgroundColor };

console.log(newStyles);
// newStyles
// {
//  position: 'relative',
//  top: 0,
//  left: 0,
//  background: '#FFF'
// }

It can also be used to overwrite existing properties, but keep the others untouched:

const styles = {
    position: 'relative',
    top: 0,
    left: 0,
    background: '#222'
};

const backgroundColor = {
    background: '#FFF'
};

const newStyles = {...styles, backgroundColor };

console.log(newStyles);
// newStyles
// {
//  position: 'relative',
//  top: 0,
//  left: 0,
//  background: '#FFF'
// }

So it's basically an es6 shorthand for Object.assign.

[Spread is not an operator](https://stackoverflow.com/q/44934828/1048572). — Bergi, Mar 07 '18 at 23:08

score 1 · Answer 2 · answered Mar 07 '18 at 22:48

1

It means that the props of style will be passed as they exists

The style and background might already exists in your page :

const style = {fontSize: "9px", backgroundColor: "red"};

answered Mar 07 '18 at 22:48

Ben

5,030
6
53
94

Another es2016 estrange code that runs

2 Answers2