Clone Array In JavaScript

Clone Array In JavaScript | For beginners, copying or cloning an array in JavaScript might be challenging. This page describes various JavaScript copying and cloning techniques and some interesting trivia.

You must be familiar with some essential ideas in JavaScript, such as changeable and immutable objects.

Clone Array In JavaScript Using the Spread Operator

In ES6, the spread operator is used to clone an array, but JavaScript’s slice() function is an older method that takes 0 as the first input. These techniques make a shallow clone of the original array by creating a new, separate array and copying all of the elements from oldArray to it.

const oldArray = ["cat1", "cat2", "cat3"];
const clonedArrayES6 = [...oldArray];
console.log(clonedArrayES6);

Output:-

[ ‘cat1’, ‘cat2’, ‘cat3’ ]

While using the spread operator to clone the array, if we change elements in the original array then the cloned array element will be affected. For example, in the below program, we have changed the 2nd index element of the original array but it doesn’t affect the cloned array.

const oldArray = ["cat1", "cat2", "cat3"];
const clonedArrayES6 = [...oldArray];
console.log(clonedArrayES6);

oldArray[2] = "cat9";
console.log(oldArray);
console.log(clonedArrayES6);

Output:-

[ ‘cat1’, ‘cat2’, ‘cat3’ ]
[ ‘cat1’, ‘cat2’, ‘cat9’ ]
[ ‘cat1’, ‘cat2’, ‘cat3’ ]

Clone Array In JavaScript Using for loop

Given how fashionable functional programming has become in our circles, this strategy is the least well-liked. It works whether it is pure or impure, declarative or imperative!

numbers = [1, 2, 3];
numbersCopy = [];

for (i = 0; i < numbers.length; i++) {
  numbersCopy[i] = numbers[i];
}
numbersCopy.push(4);
console.log(numbers, numbersCopy);

Output:-

[ 1, 2, 3 ] [ 1, 2, 3, 4 ]

Note that you cannot copy multidimensional arrays securely with this. Since you’re using the = operator, objects and arrays will be assigned by reference rather than by value.

Clone Array In JavaScript With Slice

This is a standard method for copying an array in JavaScript. The slice() is typically utilized to obtain a subarray from a starting index to an ending index (not included).

const originalArray = [1, 2, 3, 4, 5];
const clonedArray = originalArray.slice();
console.log(clonedArray);

Output:-

[ 1, 2, 3, 4, 5 ]

Clone Array In JavaScript Using Concat

Another well-liked technique for copying an array in JavaScript is this one.

const originalArray = [1, 2, 3, 4, 5];
const clonedArray = [].concat(originalArray);
console.log(clonedArray);

Output:-

[ 1, 2, 3, 4, 5 ]

Concat is a fantastic tool for joining two iterables together. By doing this, we concatenate the initial array into an empty array. It makes a brand-new version of the array.

Any project can benefit from using any of the methods mentioned above. The spread operator is my favorite because it operates effectively and has clear syntax. You can also choose to slice or concatenate as you see fit.

If you enjoyed this post, share it with your friends. Do you want to share more information about the topic discussed above or do you find anything incorrect? Let us know in the comments. Thank you!

Search