Javascript: 5 ways to create a new array from an old array

Last updated on February 13, 2022 A Goodman Loading... Post a comment

There are multiple ways to create a true new array from an old array in modern Javascript (ES6 or beyond).

Using the spread syntax (shallow copy)

This method works perfectly when you try to clone a one-level (or one-dimensional) array. Thankfully, one-level arrays are much more popular than multi-level arrays.

Example of how the spread syntax works with a one-level array:

const arrOld = [1, 2, 3, 4, 5]
const arrNew = [...arrOld]
console.log(arrNew)

Output:

[ 1, 2, 3, 4, 5 ]

This example proves that the method doesn’t work with multi-level arrays (such as an array of objects or an array of arrays):

const arrOld = [
  { name: "Tom", age: 28 },
  { name: "John", age: 32 },
]
const arrNew = [...arrOld]

arrNew[0].name = 'John new'
console.log('New array: ', newArray)
console.log('Old array: ', arrOld)

The output will look like this:

new array:  [ { name: 'Tom new', age: 28 }, { name: 'John', age: 32 } ]
old array:  [ { name: 'Tom new', age: 28 }, { name: 'John', age: 32 } ]

When you change the new array, the original array changes too. The reason is while the first level is copied, the deeper levels are only referenced.

Using JSON: The perfect method for any scenarios (deep copy)

This method isn’t concise but it works perfectly with both one-level and multi-level arrays.

Example:

const arrOld = [
  { name: "Tom", age: 28 },
  { name: "John", age: 32 },
]
const arrNew = [...arrOld]

arrNew[0].name = 'John new'
console.log('New array: ', newArray)
console.log('Old array: ', arrOld)

Output:

new array:  [ { name: 'Tom new', age: 28 }, { name: 'John', age: 32 } ]
old array:  [ { name: 'Tom', age: 28 }, { name: 'John', age: 32 } ]

Using slice() (shallow copy)

This method is equivalent to the first method in this article.

The code:

const arrOld = [1, 2, 3, 4, 5]
const arrNew = arrOld.slice()
console.log('new array: ', arrNew)

Output:

new array:  [ 1, 2, 3, 4, 5 ]

Using from() (shallow copy)

This method is equivalent to the first and the third methods.

The code:

const arrOld = [1, 2, 3, 4, 5]
const arrNew = Array.from(arrOld)
console.log('new array: ', arrNew)

Output:

new array:  [ 1, 2, 3, 4, 5 ]

Using concat() (shallow copy)

This method is equivalent to the first, the third, and the fourth methods.

The code:

const arrOld = [1, 2, 3, 4, 5]
const arrNew = [].concat(arrOld)
console.log('new array: ', arrNew)

Output:

new array:  [ 1, 2, 3, 4, 5 ]

Conclusion

We’ve walked through some techniques to truly clone an array in modern Javascript. If you’d like to explore more new and interesting things about this gorgeous programming language, take a look at the following articles:

You can also check out our Javascript category page, TypeScript category page, Node.js category page, and React category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles