Let’s say I have an options
variable and I want to set some default value.
What’s is the benefit / drawback of these two alternatives?
Using object spread
options = {...optionsDefault, ...options};
Or using Object.assign
options = Object.assign({}, optionsDefault, options);
This is the commit that made me wonder.
The difference is that Object. assign changes the object in-place, while the spread operator ( ... ) creates a brand new object, and this will break object reference equality.
It looks like object spread is faster if you pass an empty object as the first parameter to Object. assign() , but otherwise they're interchangeable.
Summary. Object spread operator ( ... ) unpacks the own enumerable properties of an object. Object spread operator can be used to clone an object or merge objects into one. The cloning is always shallow.
Object. assign() provides shallow copying (Only properties and methods) and it will override the method and property declared. while Object. create() provides Deep copying provides prototype chain.
The difference is that spread define new properties, while Object.assign set them. For instance, if we have: then target is modified in place with the properties of obj1 and obj2 . If we want to create a new merged object with the properties from all 3 objects, we can write:
The spread operator is really just sugar for Object.assign with the first parameter set to empty object ( github.com/tc39/proposal-object-rest-spread/blob/master/…) NOTE: Spread is NOT just syntactic sugar around Object.assign. They operate much differently behind the scenes. Object.assign applies setters to a new object, Spread does not.
The proposal can be found here. For the most part object reset and spread work the same way, the key difference is that spread defines properties, whilst Object.assign () sets them. This means Object.assign () triggers setters.
For the most part object reset and spread work the same way, the key difference is that spread defines properties, whilst Object.assign() sets them. This means Object.assign() triggers setters.
This isn't necessarily exhaustive.
options = {...optionsDefault, ...options};
If authoring code for execution in environments without native support, you may be able to just compile this syntax (as opposed to using a polyfill). (With Babel, for example.)
Less verbose.
When this answer was originally written, this was a proposal, not standardized. When using proposals consider what you'd do if you write code with it now and it doesn't get standardized or changes as it moves toward standardization. This has since been standardized in ES2018.
Literal, not dynamic.
Object.assign()
options = Object.assign({}, optionsDefault, options);
Standardized.
Dynamic. Example:
var sources = [{a: "A"}, {b: "B"}, {c: "C"}]; options = Object.assign.apply(Object, [{}].concat(sources)); // or options = Object.assign({}, ...sources);
This is the commit that made me wonder.
That's not directly related to what you're asking. That code wasn't using Object.assign()
, it was using user code (object-assign
) that does the same thing. They appear to be compiling that code with Babel (and bundling it with Webpack), which is what I was talking about: the syntax you can just compile. They apparently preferred that to having to include object-assign
as a dependency that would go into their build.
For reference object rest/spread is finalised in ECMAScript 2018 as a stage 4. The proposal can be found here.
For the most part object reset and spread work the same way, the key difference is that spread defines properties, whilst Object.assign() sets them. This means Object.assign() triggers setters.
It's worth remembering that other than this, object rest/spread 1:1 maps to Object.assign() and acts differently to array (iterable) spread. For example, when spreading an array null values are spread. However using object spread null values are silently spread to nothing.
Array (Iterable) Spread Example
const x = [1, 2, null , 3]; const y = [...x, 4, 5]; const z = null; console.log(y); // [1, 2, null, 3, 4, 5]; console.log([...z]); // TypeError
Object Spread Example
const x = null; const y = {a: 1, b: 2}; const z = {...x, ...y}; console.log(z); //{a: 1, b: 2}
This is consistent with how Object.assign() would work, both silently exclude the null value with no error.
const x = null; const y = {a: 1, b: 2}; const z = Object.assign({}, x, y); console.log(z); //{a: 1, b: 2}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With