Object spread vs Object assign

Question

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

User · Answer

As others have mentioned  at this moment of writing  Object assign   requires a polyfill and object spread     requires some transpiling  and perhaps a polyfill too  in order to work   Consider this code      Babel wont touch this really  it will simply fail if Object assign   is not supported in browser  const objAss     message   Hello you      const newObjAss   Object assign objAss    dev  true     console log newObjAss       Babel will transpile with use to a helper function that first attempts to use Object assign   and then falls back  const objSpread     message   Hello you      const newObjSpread       objSpread  dev  true    console log newObjSpread     These both produce the same output   Here is the output from Babel  to ES5   var objAss     message   Hello you      var newObjAss   Object assign objAss    dev  true     console log newObjAss    var  extends   Object assign    function  target    for  var i   1  i  lt  arguments length  i      var source   arguments i   for  var key in source    if  Object prototype hasOwnProperty call source  key     target key    source key         return target      var objSpread     message   Hello you      var newObjSpread    extends     objSpread    dev  true     console log newObjSpread     This is my understanding so far  Object assign   is actually standardised  where as object spread     is not yet  The only problem is browser support for the former and in future  the latter too   Play with the code here  Hope this helps

User · Answer

This is now part of ES6  thus is standardized  and is also documented on MDN  https   developer mozilla org en-US docs Web JavaScript Reference Operators Spread operator  It s very convenient to use and makes a lot of sense alongside object destructuring   The one remaining advantage listed above is the dynamic capabilities of Object assign    however this is as easy as spreading the array inside of a literal object  In the compiled babel output it uses exactly what is demonstrated with Object assign    So the correct answer would be to use object spread since it is now standardized  widely used  see react  redux  etc   is easy to use  and has all the features of Object assign

User · Answer

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

User · Answer

I d like to add this simple example when you have to use Object assign   class SomeClass     constructor         this someValue    some value          someMethod         console log  some action            const objectAssign   Object assign new SomeClass         objectAssign someValue     ok objectAssign someMethod       ok  const spread       new SomeClass     spread someValue     ok spread someMethod       there is no methods of SomeClass    It can be not clear when you use JavaScript  But with TypeScript it is easier if you want to create instance of some class  const spread  SomeClass       new SomeClass       Error

User · Answer

We   ll create a function called identity that just returns whatever parameter we give it  identity    arg    gt  arg  And a simple array  arr    1  2  3   If you call identity with arr  we know what   ll happen

User · Answer

The spread operator spread the Array into the separate arguments of a function  let iterableObjB    1 2 3 4  function     iterableObjB     turned into function  1 2 3 4

User · Answer

Other answers are old  could not get a good answer  Below example is for object literals  helps how both can complement each other  and how it cannot complement each other  therefore difference    var obj1     a  1   b    b1  1  b2   b2value   b3   b3value           overwrite parts of b key var obj2           b               obj1 b          b1  2            var res2   Object assign     obj1  obj2      b2 b3 keys still exist document write  res2     JSON stringify  res2     lt br gt        Output     res2    a  1  b    b1  2  b2   b2value   b3   b3value        NOTE  b2 b3 still exists     overwrite whole of b key var obj3           b            b1  2            var res3   Object assign     obj1  obj3      b2 b3 keys are lost document write  res3     JSON stringify  res3     lt br gt        Output       res3    a  1  b    b1  2       NOTE  b2 b3 values are lost   Several more small examples here  also for array  amp  object  https   developer mozilla org en-US docs Web JavaScript Reference Operators Spread syntax

User · Answer

I think one big difference between the spread operator and Object assign that doesn t seem to be mentioned in the current answers is that the spread operator will not copy the the source object   s prototype to the target object  If you want to add properties to an object and you don t want to change what instance it is of  then you will have to use Object assign  Edit  I ve actually realised that my example is misleading  The spread operator desugars to Object assign with the first parameter set to an empty object  In my code example below  I put error as the first parameter of the Object assign call so the two are not equivalent  The first parameter of Object assign is actually modified and then returned which is why it retains its prototype  I have added another example below   x000D   x000D  const error   new Error    error instanceof Error    true  const errorExtendedUsingSpread          error             someValue  true        errorExtendedUsingSpread instanceof Error     false     What the spread operator desugars into const errorExtendedUsingImmutableObjectAssign   Object assign     error        someValue  true     errorExtendedUsingImmutableObjectAssign instanceof Error     false     The error object is modified and returned here so it keeps its prototypes const errorExtendedUsingAssign   Object assign error      someValue  true     errorExtendedUsingAssign instanceof Error     true x000D   x000D   x000D   See also  https   github com tc39 proposal-object-rest-spread blob master Spread md

User · Answer

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   In addition  the object must be iterable   Copy Use this if  you need the value of the object as it is at this moment  and you don t  want that value to reflect any changes made by other owners of the  object   Use it for creating a shallow copy of the object good practice to always set immutable properties to copy - because mutable versions can be passed into immutable properties  copy will ensure that you ll always be dealing with an immutable object  Assign Assign is somewhat the opposite to copy   Assign will generate a setter which assigns the value to the instance variable directly  rather than copying or retaining it  When calling the getter of an assign  property  it returns a reference to the actual data

User · Answer

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

User · Answer

The object spread operator       doesn t work in browsers  because it isn t part of any ES specification yet  just a proposal  The only option is to compile it with Babel  or something similar    As you can see  it s just syntactic sugar over Object assign       As far as I can see  these are the important differences    Object assign works in most browsers  without compiling      for objects isn t standardized     protects you from accidentally mutating the object     will polyfill Object assign in browsers without it     needs less code to express the same idea

User · Answer

I d like to summarize status of the  spread object merge  ES feature  in browsers  and in the ecosystem via tools   Spec   https   github com tc39 proposal-object-rest-spread This language feature is a stage 4 proposal  which means it s been merged into the ES language spec  but not yet widely implemented    Browsers  in Chrome  in SF  Firefox soon  ver 60  IIUC    Browser support for  spread properties  shipped in Chrome 60  including this scenario  Support for this scenario does NOT work in current Firefox  59   but DOES work in my Firefox Developer Edition   So I believe it will ship in Firefox 60  Safari  not tested  but Kangax says it works in Desktop Safari 11 1  but not SF 11 iOS Safari  not teseted  but Kangax says it works in iOS 11 3  but not in iOS 11 not in Edge yet   Tools  Node 8 7  TS 2 1   NodeJS has supported since 8 7  via Kangax    Confirmed on 9 8 when I tested locally  TypeScript has suported it since 2 1  current is 2 8   Links   Kangax  property spread  https   davidwalsh name merge-objects    Code Sample  doubles as compatibility test   var x     a  1  b  2    var y     c  3  d  4  a  5    var z       x     y   console log z        a  5  b  2  c  3  d  4     Again  At time of writing this sample works without transpilation in Chrome  60    Firefox Developer Edition  preview of Firefox 60   and Node  8 7     Why Answer   I m writing this 2 5 years after the original question   But I had the very same question  and this is where Google sent me   I am a slave to SO s mission to improve the long tail   Since this is an expansion of  array spread  syntax I found it very hard to google  and difficult to find in compatibility tables   The closest I could find is Kangax  property spread   but that test doesn t have two spreads in the same expression  not a merge    Also  the name in the proposals drafts browser status pages all use  property spread   but it looks to me like that was a  first principal  the community arrived at after the proposals to use spread syntax for  object merge    Which might explain why it is so hard to google   So I document my finding here so others can view  update  and compile links about this specific feature   I hope it catches on   Please help spread the news of it landing in the spec and in browsers   Lastly  I would have added this info as a comment  but I couldn t edit them without breaking the authors  original intent   Specifically  I can t edit  ChillyPenguin s comment without it losing his intent to correct  RichardSchulte   But years later Richard turned out to be right  in my opinion    So I write this answer instead  hoping it will gain traction on the old answers eventually  might take years  but that s what the long tail effect is all about  after all

[javascript] Object spread vs. Object.assign

Examples related to javascript

Examples related to ecmascript-6