Object spread vs. Object.assign

by

This isn’t necessarily exhaustive.

Spread syntax

options = {...optionsDefault, ...options};

Advantages:

  • 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.

Disadvantages:

  • 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);

Advantages:

  • Standardized.

  • Dynamic. Example:

    var sources = [{a: "A"}, {b: "B"}, {c: "C"}];
options = Object.assign.apply(Object, [{}].concat(sources));
// or
options = Object.assign({}, ...sources);

Disadvantages:

  • More verbose.
  • If authoring code for execution in environments without native support you need to polyfill.

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.

More Related Contents:

  1. What does “this” refer to in arrow functions in ES6?
  2. `export const` vs. `export default` in ES6
  3. Javascript – arrow functions this in event handler?
  4. ES6: call class constructor without new keyword
  5. Arrow Functions and This [duplicate]
  6. Can you bind ‘this’ in an arrow function?
  7. ES2015 import doesn’t work (even at top-level) in Firefox
  8. Getting Unexpected Token Export
  9. How can I access constants in the lib/constants.js file in Meteor?
  10. How to create an instance of a subclass from the super class?
  11. How can I construct a Template String from a regular string? [duplicate]
  12. Javascript: What is the difference between Function and Class
  13. Why es6 react component works only with “export default”?
  14. How to publish a module written in ES6 to NPM?
  15. Best way to polyfill ES6 features in React app that uses create-react-app
  16. What is the defined execution order of ES6 imports?
  17. JSON stringify ES6 class property with getter/setter
  18. Why does the Promise constructor require a function that calls ‘resolve’ when complete, but ‘then’ does not – it returns a value instead?
  19. How to create new instance of an extended class of custom elements
  20. Get the description of a ES6 Symbol
  21. How to loop over object properties with ngFor in Angular
  22. How to create an array of objects from multiple arrays
  23. How should I import the Spatial Illusions milsymbol library into my webpage?
  24. Where argument of first next() call goes? [duplicate]
  25. Why does .then() chained to Promise.resolve() allow const declaration to be reassigned?
  26. Javascript – Template Strings Don’t Pretty Print Objects
  27. How can the current number of i be accessed in a for of loop?
  28. How to bind methods when destructuring an object in JavaScript?
  29. Return object with default values from an array in JavaScript
  30. Deep nested array of objects not rendering

Leave a Comment