In JavaScript, arrays are objects and can be copied in two ways - shallow copy and deep copy.
A shallow copy creates a new array that points to the same memory locations as the original array. This means that any changes made to the new array will also affect the original array.
A shallow copy can be created using various techniques, including the spread operator, Array.from(), and Array.slice().
1. Using Spread Operator:
The spread operator is a new feature introduced in ES6 that allows us to spread the contents of an array or object. We can use the spread operator to create a shallow copy of an array.
const originalArray = [1, 2, 3, 4, 5];
const shallowCopy = [...originalArray];In this example, we created a new array named shallowCopy that contains the same elements as the originalArray. The spread operator ... spreads the contents of originalArray into the new array shallowCopy. Now, any changes made to the shallowCopy array will not affect the originalArray.
shallowCopy[0] = 10;
console.log(originalArray); // Output: [1, 2, 3, 4, 5]
console.log(shallowCopy); // Output: [10, 2, 3, 4, 5]In this example, we changed the first element of the shallowCopy array to 10. The originalArray remains unchanged.
2. Using Array.from() method:
The Array.from() method creates a new array from an existing array. We can use this method to create a shallow copy of an array.
const originalArray = [1, 2, 3, 4, 5];
const shallowCopy = Array.from(originalArray);In this example, we created a new array named shallowCopy that contains the same elements as the originalArray. The Array.from() method creates a new array from the originalArray. Now, any changes made to the shallowCopy array will not affect the originalArray.
shallowCopy[0] = 10;
console.log(originalArray); // Output: [1, 2, 3, 4, 5]
console.log(shallowCopy); // Output: [10, 2, 3, 4, 5]In this example, we changed the first element of the shallowCopy array to 10. The originalArray remains unchanged.
3. Using Array.slice() method:
The Array.slice() method returns a shallow copy of an array from a start index to an end index. We can use this method to create a shallow copy of an entire array.
const originalArray = [1, 2, 3, 4, 5];
const shallowCopy = originalArray.slice();In this example, we created a new array named shallowCopy that contains the same elements as the originalArray. The originalArray.slice() method returns a new array from the beginning to the end of the originalArray. Now, any changes made to the shallowCopy array will not affect the originalArray.
shallowCopy[0] = 10;
console.log(originalArray); // Output: [1, 2, 3, 4, 5]
console.log(shallowCopy); // Output: [10, 2, 3, 4, 5]In this example, we changed the first element of the shallowCopy array to 10. The originalArray remains unchanged.
4. Using Array.concat() method:
The Array.concat() method returns a new array that is a concatenation of two or more arrays. We can use this method to create a shallow copy of an array.
const originalArray = [1, 2, 3, 4, 5];
const shallowCopy = [].concat(originalArray);In this example, we created a new array named shallowCopy that contains the same elements as the originalArray. The [].concat(originalArray) creates a new array that is a concatenation of the empty array [] and the originalArray. Now, any changes made to the shallowCopy array will not affect the originalArray.
shallowCopy[0] = 10;
console.log(originalArray); // Output: [1, 2, 3, 4, 5]
console.log(shallowCopy); // Output: [10, 2, 3, 4, 5]In this example, we changed the first element of the shallowCopy array to 10. The originalArray remains unchanged.
5. Using Array.map() method:
The Array.map() method creates a new array with the results of calling a provided function on every element in the original array. We can use this method to create a shallow copy of an array.
const originalArray = [1, 2, 3, 4, 5];
const shallowCopy = originalArray.map((element) => element);In this example, we created a new array named shallowCopy that contains the same elements as the originalArray. The originalArray.map((element) => element) method calls the provided function on every element of the originalArray and returns a new array with the same elements. Now, any changes made to the shallowCopy array will not affect the originalArray.
shallowCopy[0] = 10;
console.log(originalArray); // Output: [1, 2, 3, 4, 5]
console.log(shallowCopy); // Output: [10, 2, 3, 4, 5]In this example, we changed the first element of the shallowCopy array to 10. The originalArray remains unchanged.
Thank you for reading, and let’s have conversation with each other
Thank you for reading my article. Let’s have conversation on Twitter and LinkedIn by connecting.
