Copy array by value

Question

When copying an array in JavaScript to another array   var arr1     a   b   c    var arr2   arr1  arr2 push  d       Now  arr1     a   b   c   d     I realized that arr2 refers to the same array as arr1  rather than a new  independent array  How can I copy the array to get two independent arrays

User · Answer

Quick Examples    If elements in the array are primitive types  string  number  etc      x000D   x000D  var arr1     a   b   c    x000D     arr1 and arr2 are independent and primitive elements are stored in  x000D     different places in the memory x000D  var arr2   arr1 slice     x000D  arr2 push  d    x000D  console log arr1         a    b    c    x000D  console log arr2         a    b    c    d    x000D   x000D   x000D     If elements in the array are object literals  another array             x000D   x000D  var arr1      x   a   y   b     1  2    3  4    x000D     arr1 and arr2 are independent and reference s addresses are stored in different x000D     places in the memory  But those reference s addresses points to some common place x000D     in the memory  x000D  var arr2   arr1 slice     x000D  arr2 pop            OK - don t affect arr1 bcos only the address in the arr2 is x000D                      deleted not the data pointed by that address x000D  arr2 0  x    z      not OK - affect arr1 bcos changes made in the common area  x000D                      pointed by the addresses in both arr1 and arr2 x000D  arr2 1  0    9      not OK - same above reason x000D   x000D  console log arr1          x   z   y   b       9  2      3  4     x000D  console log arr2          x   z   y   b       9  2     x000D   x000D   x000D     Solution for 2  Deep Copy by element by element    x000D   x000D  var arr1      x   a   y   b     1  2    3  4    x000D  arr2   JSON parse JSON stringify arr1    x000D  arr2 pop         OK - don t affect arr1 x000D  arr2 0  x    z       OK - don t affect arr1 x000D  arr2 1  0    9       OK - don t affect arr1 x000D   x000D  console log arr1          x   a   y   b       1  2      3  4     x000D  console log arr2          x   z   y   b       9  2     x000D   x000D   x000D

User · Answer

Just writting   arr2   arr1 concat      You are generating new a new array with a copy of the first  Be aware that is a functional way to push an element into the array   If your code is based on ES6 you can use spread operator as well   arr2       arr1

User · Answer

I personally think Array from is a more readable solution  By the way  just beware of its browser support   x000D   x000D     clone let x    1  2  3   let y   Array from x   console log  y        deep clone let clone   arr   gt  Array from arr  item   gt  Array isArray item    clone item    item   x    1             y   clone x   console log  y    x000D   x000D   x000D

User · Answer

let a    1 2 3     Now you can do any one of the following to make a copy of an array   let b   Array from a      OR  let b       a     OR  let b   new Array    a      OR  let b   a slice       OR  let b   a map e   gt  e     Now  if i change a   a push 5      Then  a is  1 2 3 5  but b is still  1 2 3  as it has different reference   But i think  in all the methods above Array from is better and made mainly to copy an array

User · Answer

You can also use ES6 spread operator to copy Array  var arr  2 3 4 5   var copyArr     arr

User · Answer

Here s a variant   var arr1   a    b    c    var arr2 eval arr1 toSource     arr2 push  d    console log  arr1    arr1   narr2    arr2          arr1  a b c     arr2  a b c d

User · Answer

Use this   x000D   x000D  let oldArray    1  2  3  4  5    let newArray   oldArray slice     console log  newArray    x000D   x000D   x000D   Basically  the slice   operation clones the array and returns a reference to a new array  Also note that  For references  strings and numbers  and not the actual object   slice   copies object references into the new array  Both the original and new array refer to the same object  If a referenced object changes  the changes are visible to both the new and original arrays  Primitives such as strings and numbers are immutable  so changes to the string or number are impossible

User · Answer

Here is how you can do it for array of arrays of primitives of variable depth      If a is array         then call cpArr a  for each e        else return a  const cpArr   a   gt  Array isArray a   amp  amp  a map e   gt  cpArr e      a   let src     1 2 3    4    five    six   7   true   8  9  false   let dst   cpArr src     https   jsbin com xemazog edit js console

User · Answer

You can use array spreads     to copy arrays   const itemsCopy       items    Also if want to create a new array with the existing one being part of it   var parts     shoulders    knees    var lyrics     head      parts   and    toes      Array spreads are now supported in all major browsers but if you need older support use typescript or babel and compile to ES5   More info on spreads

User · Answer

Adding to the solution of array slice    be aware that if you have multidimensional array sub-arrays will be copied by references  What you can do is to loop and slice   each sub-array individually    var arr     1 1 1   2 2 2   3 3 3    var arr2   arr slice     arr2 0  1    55  console log arr2 0  1    console log arr 0  1     function arrCpy arrSrc  arrDis    for elm in arrSrc     arrDis push arrSrc elm  slice          var arr3     arrCpy arr arr3    arr3 1  1    77   console log arr3 1  1    console log arr 1  1      same things goes to array of objects  they will be copied by reference  you have to copy them manually

User · Answer

If you are in an environment of ECMAScript 6  using the Spread Operator you could do it this way    x000D   x000D  var arr1     a   b   c    x000D  var arr2       arr1     copy arr1 x000D  arr2 push  d    x000D   x000D  console log arr1  x000D  console log arr2  x000D   lt script src  http   www wzvang com snippet ignore this file js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

If your array contains elements of the primitive data type such as int  char  or string etc then you can user one of those methods which returns a copy of the original array such as  slice   or  map   or spread operator thanks to ES6    new array   old array slice     or  new array   old array map  elem    gt  elem    or  const new array   new Array    old array     BUT if your array contains complex elements such as objects or arrays  or more nested objects  then  you will have to make sure that you are making a copy of all the elements from the top level to the last level else reference of the inner objects will be used and that means changing values in object elements in new array will still affect the old array  You can call this method of copying at each level as making a DEEP COPY of the old array   For deep copying  you can use the above-mentioned methods for primitive data types at each level depending upon the type of data or you can use this costly method mentioned below  for making a deep copy without doing much work   var new array   JSON parse JSON stringify old array      There are a lot of other methods out there which you can use depending on your requirements  I have mentioned only some of those for giving a general idea of what happens when we try to copy an array into the other by value

User · Answer

If you want to make a new copy of an object or array  you must explicitly copy the properties of the object or the elements of the array  for example   var arr1     a   b   c    var arr2        for  var i 0  i  lt  arr1 length  i         arr2 i    arr1 i       You can search for more information on Google about immutable primitive values and mutable object references

User · Answer

In Javascript  deep-copy techniques depend on the elements in an array  Let s start there     Three types of elements  Elements can be  literal values  literal structures  or prototypes      Literal values  type1  const booleanLiteral   true  const numberLiteral   1  const stringLiteral    true       Literal structures  type2  const arrayLiteral       const objectLiteral           Prototypes  type3  const booleanPrototype   new Bool true   const numberPrototype   new Number 1   const stringPrototype   new String  true    const arrayPrototype   new Array    const objectPrototype   new Object       or  new function          From these elements we can create three types of arrays      1  Array of literal-values  boolean  number  string   const type1    true  1   true        2  Array of literal-structures  array  object  const type2                 3  Array of prototype-objects  function  const type3    function        function           Deep copy techniques depend on the three array types  Based on the types of elements in the array  we can use various techniques to deep copy      Array of literal-values  type1  The     myArray   myArray splice 0   myArray slice    and myArray concat   techniques can be used to deep copy arrays with literal values  boolean  number  and string  only  where the Spread operator     myArray  has the best performance  https   measurethat net Benchmarks Show 4281 0 spread-array-performance-vs-slice-splice-concat   Array of literal-values  type1  and literal-structures  type2  The JSON parse JSON stringify myArray   technique can be used to deep copy literal values  boolean  number  string  and literal structures  array  object   but not prototype objects  All arrays  type1  type2  type3  The jQuery   extend myArray  technique can be used to deep-copy all array-types  Libraries like Underscore and Lo-dash offer similar deep-copy functions to jQuery   extend    yet have lower performance  More surprisingly    extend   has higher performance than the JSON parse JSON stringify myArray   technique http   jsperf com js-deep-copy 15  And for those developers that shy away from third-party libraries  like jQuery   you can use the following custom function  which has higher performance than   extend  and deep-copies all arrays    function copy aObject      if   aObject        return aObject         let v    let bObject   Array isArray aObject               for  const k in aObject        v   aObject k       bObject k     typeof v      object     copy v    v         return bObject     So to answer the question     Question   var arr1     a   b   c    var arr2   arr1       I realized that arr2 refers to the same array as arr1  rather than a   new  independent array  How can I copy the array to get two   independent arrays    Answer    Because arr1 is an array of literal values  boolean  number  or string   you can use any deep copy technique discussed above  where the spread operator     has the highest performance      Highest performance for deep copying literal values arr2       arr1       Any of these techniques will deep copy literal values as well       but with lower performance  arr2   arr1 slice    arr2   arr1 splice 0   arr2   arr1 concat    arr2   JSON parse JSON stringify arr1    arr2     extend true      arr1      jQuery js needed arr2     extend arr1      Underscore js needed arr2     cloneDeep arr1      Lo-dash js needed arr2   copy arr1      Custom-function needed - as provided above

User · Answer

I would personally prefer this way   JSON parse JSON stringify  originalObject

User · Answer

Make copy of multidimensional array object   function deepCopy obj       if  Object prototype toString call obj        object Array            var out       i   0  len   obj length        for     i  lt  len  i                out i    arguments callee obj i                  return out          if  typeof obj      object           var out       i        for   i in obj              out i    arguments callee obj i                  return out          return obj      Thanks to James Padolsey for this function   Source  Here

User · Answer

You could use ES6 with spread Opeartor  its simpler   arr2       arr1     There are limitations  check  docs Spread syntax   mozilla

User · Answer

There s the newly introduced Array from  but unfortunately  as of the time of this writing it s only supported on recent Firefox versions  32 and higher   It can be simply used as follows   var arr1    1  2  3   console log Array from arr1       Logs   1  2  3    Reference  Here  Or Array prototype map may be used with an identity function   function identity param        return param     var arr1    1  2  3       clone   arr1 map identity     Reference  Here

User · Answer

For ES6 array containing objects  cloneArray arr        return arr map x   gt        x

User · Answer

From ES2015   var arr2       arr1

User · Answer

Some of mentioned methods work well when working with simple data types like number or string  but when the array contains other objects these methods fail  When we try to pass any object from one array to another it is passed as a reference  not the object   Add the following code in your JavaScript file   Object prototype clone   function         var newObj    this instanceof Array                 for  i in this            if  i     clone                continue          if  this i   amp  amp  typeof this i      object                 newObj i    this i  clone                       else              newObj i    this i        return newObj       And simply use  var arr1     val 1   val 2   val 3    var arr2   arr1 clone     It will work

User · Answer

Important   Most of answers here works for particular cases   If you don t care about deep nested objects and props use  ES6    let clonedArray       array   but if you want to do deep clone use this instead   let cloneArray   JSON parse JSON stringify array      For lodash users   let clonedArray     clone array  documentation  and  let clonedArray     cloneDeep array  documentation

User · Answer

Primitive values are always pass by its value  copied   Compound values however are passed by reference   So how do we copy this arr    let arr    1 2 3 4 5      Copy an Array in ES6   let arrCopy       arr       Copy n Array in ES5   let arrCopy   arr slice     let arrCopy      concat arr      Why  let arrCopy   arr  is not passing by value   Passing one varible to another on Compound values such as Object Array behave difrently  Using asign operator on copand values we pass reference to an object  This is why the value of both arrays are changing when removing adding arr elements   Exceptions    arrCopy 1     adding new value this way will unreference     When you assign a new value to the variable  you are changing the reference itself and it doesn   t affect the original Object Array    read more

User · Answer

Here are few more way to copy    x000D   x000D  const array    1 2 3 4   x000D   x000D  const arrayCopy1   Object values array   x000D  const arrayCopy2   Object assign     array   x000D  const arrayCopy3   array map i   gt  i   x000D  const arrayCopy4   Array of    array    x000D   x000D   x000D

User · Answer

An alternative to slice is concat  which can be used in 2 ways  The first of these is perhaps more readable as the intended behaviour is very clear   var array2      concat array1     The second method is   var array2   array1 concat      Cohen  in the comments  pointed out that this latter method has better performance   The way this works is that the concat method creates a new array consisting of the elements in the object on which it is called followed by the elements of any arrays passed to it as arguments  So when no arguments are passed  it simply copies the array   Lee Penkman  also in the comments  points out that if there s a chance array1 is undefined  you can return an empty array as follows   var array2      concat array1           Or  for the second method   var array2    array1        concat      Note that you can also do this with slice  var array2    array1        slice

User · Answer

When we want to copy an array using the assignment operator       it doesn t create a copy it merely copies the pointer reference to the array  For example    x000D   x000D  const oldArr    1 2 3   x000D   x000D  const newArr   oldArr      now oldArr points to the same place in memory  x000D   x000D  console log oldArr     newArr       Points to the same place in memory thus is true x000D   x000D  const copy    1 2 3   x000D   x000D  console log copy     newArr       Doesn t point to the same place in memory and thus is false x000D   x000D   x000D    Often when we transform data we want to keep our initial datastructure  e g  Array  intact  We do this by making a exact copy of our array so this one can be transformed while the initial one stays intact   Ways of copying an array    x000D   x000D  const oldArr    1 2 3   x000D   x000D     Uses the spread operator to spread out old values into the new array literal x000D  const newArr1       oldArr   x000D   x000D     Slice with no arguments returns the newly copied Array x000D  const newArr2   oldArr slice    x000D   x000D     Map applies the callback to every element in the array and returns a new array x000D  const newArr3   oldArr map  el    gt  el   x000D   x000D     Concat is used to merge arrays and returns a new array  Concat with no args copies an array x000D  const newArr4   oldArr concat    x000D   x000D     Object assign can be used to transfer all the properties into a new array literal x000D  const newArr5   Object assign     oldArr   x000D   x000D     Creating via the Array constructor using the new keyword x000D  const newArr6   new Array    oldArr   x000D   x000D     For loop x000D  function clone base    x000D   const newArray       x000D      for let i  0  i  lt  base length  i      x000D       newArray i    base i   x000D     x000D   return newArray  x000D    x000D   x000D  const newArr7   clone oldArr   x000D   x000D  console log newArr1  newArr2  newArr3  newArr4  newArr5  newArr6  newArr7   x000D   x000D   x000D    Be careful when arrays or objects are nested    When arrays are nested the values are copied by reference  Here is an example of how this could lead to issues    x000D   x000D  let arr1    1 2  1 2 3   x000D   x000D  let arr2       arr1   x000D   x000D  arr2 2  0    5      we change arr2 x000D   x000D  console log arr1       arr1 is also changed because the array inside arr1 was copied by reference x000D   x000D   x000D    So don t use these methods when there are objects or arrays inside your array you want to copy  i e  Use these methods on arrays of primitives only    If you do want to deepclone a javascript array use JSON parse in conjunction with JSON stringify  like this    x000D   x000D  let arr1    1 2  1 2 3   x000D   x000D  let arr2   JSON parse JSON stringify arr1     x000D   x000D  arr2 2  0    5  x000D   x000D  console log arr1       now I m not modified because I m a deep clone x000D   x000D   x000D    Performance of copying   So which one do we choose for optimal performance  It turns out that the most verbose method  the for loop has the highest performance  Use the for loop for really CPU intensive copying  large many arrays     After that the  slice   method also has decent performance and is also less verbose and easier for the programmer to implement  I suggest to use  slice   for your everyday copying of arrays which aren t very CPU intensive  Also avoid using the JSON parse JSON stringify arr    lots of overhead  if no deep clone is required and performance is an issue   Source performance test

User · Answer

In my particular case I needed to ensure the array remained intact so this worked for me      Empty array arr1 length   0     Add items from source array to target array for  var i   0  i  lt  arr2 length  i          arr1 push arr2 i

User · Answer

No jQuery needed     Working Example  var arr2   arr1 slice     This copys the array from the starting position 0 through the end of the array   It is important to note that it will work as expected for primitive types  string  number  etc    and to also explain the expected behavior for reference types     If you have an array of Reference types  say of type Object   The array will be copied  but both of the arrays will contain references to the same Object s   So in this case it would seem like the array is copied by reference even though the array is actually copied

User · Answer

This is how I ve done it after trying many approaches   var newArray   JSON parse JSON stringify orgArray      This will create a new deep copy not related to the first one  not a shallow copy    Also this obviously will not clone events and functions  but the good thing you can do it in one line  and it can be used for any kind of object  arrays  strings  numbers  objects

User · Answer

None of these options worked for me as I was dealing with an array of deeply nested objects  For ES6 I found this solution helpful   const old array     name  Nick   stats  age 25 height 2    name  June   stats  age 20 height 2      const new array   old array map e   gt      if  e name      June          e        e         e stats       e stats  age  22          return e        Only the new array will be affected by this

User · Answer

As we know in Javascript arrays and objects are by reference  but what ways we can do copy the array without changing the original array later one    Here are few ways to do it   Imagine we have this array in your code   var arr    1  2  3  4  5     1  Looping through the array in a function and return a new array  like this    function newArr arr          var i 0  res             while i lt arr length          res push arr i            i                return res       2  Using slice method  slice is for slicing part of the array  it will slice some part of your array without touching the original  in the slice  if don t specify the start and end of the array  it will slice the whole array and basically make a full copy of the array  so we can easily say   var arr2   arr slice       make a copy of the original array   3  Also contact method  this is for merging two array  but we can just specify one of arrays and then this basically make a copy of the values in the new contacted array   var arr2   arr concat      4  Also stringify and parse method  it s not recommended  but can be an easy way to copy Array and Objects   var arr2   JSON parse JSON stringify arr      5  Array from method  this is not widely supported  before use check the support in different browsers   const arr2   Array from arr     6  ECMA6 way  also not fully supported  but babelJs can help you if you want to transpile   const arr2       arr

User · Answer

You can do that in following way   arr2   arr1 map x   gt  Object assign     x

User · Answer

Using jQuery deep copy could be made as following   var arr2     extend true      arr1

User · Answer

Dan  no need to use fancy tricks  All you need to do is make copy of arr1 by doing this    x000D   x000D  var arr2   new Array arr1   x000D   x000D   x000D    Now arr1 and arr2 are two different array variables stored in separate stacks  Check this out on jsfiddle

[javascript] Copy array by value

Examples related to javascript

Examples related to arrays