Copying an array of objects into another array in javascript

Question

How can I copy every element of an array  where the elements are objects   into another array  so that they are totally independent  I don t want changing an element in one array to affect the other

User · Answer

var clonedArray   array concat

User · Answer

I suggest using concat   if you are using nodeJS  In all other cases  I have found that slice 0  works fine

User · Answer

If you want to keep reference   Array prototype push apply destinationArray  sourceArray

User · Answer

The key things here are  The entries in the array are objects  and You don t want modifications to an object in one array to show up in the other array   That means we need to not just copy the objects to a new array  or a target array   but also create copies of the objects  If the destination array doesn t exist yet       use map to create a new array  and copy the objects as you go  const newArray   sourceArray map obj   gt       create and return copy of  obj             where the copy operation is whatever way you prefer to copy objects  which varies tremendously project to project based on use case  That topic is covered in depth in the answers to this question  But for instance  if you only want to copy the objects but not any objects their properties refer to  you could use spread notation  ES2015    const newArray   sourceArray map obj   gt       obj      That does a shallow copy of each object  and of the array   Again  for deep copies  see the answers to the question linked above  Here s an example using a naive form of deep copy that doesn t try to handle edge cases  see that linked question for edge cases   x000D   x000D  function naiveDeepCopy obj        const newObj           for  const key of Object getOwnPropertyNames obj             const value   obj key           if  value  amp  amp  typeof value      object                 newObj key        value             else               newObj key    value                      return newObj    const sourceArray                   name   joe           address                line1   1 Manor Road               line2   Somewhere               city   St Louis               state   Missouri               country   USA                                   name   mohammed           address                line1   1 Kings Road               city   London               country   UK                                   name   shu-yo             const newArray   sourceArray map naiveDeepCopy      Modify the first one and its sub-object newArray 0  name   newArray 0  name toLocaleUpperCase    newArray 0  address country    United States of America   console log  Original    sourceArray   console log  Copy    newArray   x000D   as-console-wrapper       max-height  100   important    x000D   x000D   x000D   If the destination array exists       and you want to append the contents of the source array to it  you can use push and a loop  for  const obj of sourceArray        destinationArray push copy obj       Sometimes people really want a  quot one liner  quot  even if there s no particular reason for it  If you refer that  you could create a new array and then use spread notation to expand it into a single push call  destinationArray push    sourceArray map obj   gt  copy obj

User · Answer

There are two important notes    Using array concat   does not work using Angular 1 4 4 and jQuery 3 2 1  this is my environment   The array slice 0  is an object  So if you do something like newArray1   oldArray slice 0   newArray2   oldArray slice 0   the two new arrays will reference to just 1 array and changing one will affect the other    Alternatively  using newArray1   JSON parse JSON stringify old array   will only copy the value  thus it creates a new array each time

User · Answer

Easy way to get this working is using   var cloneArray   JSON parse JSON stringify originalArray      I have issues with getting arr concat   or arr splice 0  to give a deep copy  Above snippet works perfectly

User · Answer

A great way for cloning an array is with an array literal and the spread syntax  This is made possible by ES2015  const objArray     name  first     name  second     name  third     name  fourth      const clonedArr       objArray    console log clonedArr      Object  Object  Object  Object   You can find this copy option in MDN s documentation  https   developer mozilla org en-US docs Web JavaScript Reference Operators Spread operator Copy an array It is also an Airbnb s best practice  https   github com airbnb javascript es6-array-spreads Note  The spread syntax in ES2015 goes one level deep while copying an array  Therefore  they are unsuitable for copying multidimensional arrays

[javascript] Copying an array of objects into another array in javascript

Examples related to javascript

Examples related to arrays

Examples related to deep-copy