Updated May 18, 2023
Introduction of JavaScript Copy Array
Whenever we try to copy the array, we need to consider the mutable property of the array in Javascript. We can’t simply use equal to an operator to copy the array from one variable to another. This will lead to copying the array’s references and not the array’s values, i.e., its elements. Because both arrays refer to the exact same references of values, using the equal to operator ensures that any changes made to the copied array will also be reflected in the original array and vice versa.
The slice() method, which is available in JavaScript, is useful when copying an array. Another method used for simulating the array is Array. from(). The introduction of an ECMAScript 6 spread operator is provided, making copying the array simple.
Methods of JavaScript Copy Array
In this article, we will study all three methods of copying an array and also see the working of the equal to and other methods in a comparative manner that will give you a clear perspective of using these methods to copy an array and look at some examples and syntax.
1. Slice Method
This function is frequently used to start a new collection from scratch by giving the starting and ending indexes of the duplicated portion of the array. When not specified, the start point and endpoint are optional, and we can use the slice function to replicate the entire array into a new array.
Syntax:
Below is the syntax of the slice() method.
let newArray = array.slice([startPoint[, endPoint]])- array: The original array that you wish to copy to the other array.
- newArray: This is the fresh array the slice method’s return value represents.
- Starpoint: This is the optional parameter and helps us to specify the beginning index from where the contents of the array are to be copied. The default value is 0 for this parameter.
- EndPoint: This is the optional parameter and helps us to specify the ending index up to which the contents of the array are to be copied. The default value is the max length of the array for this parameter.
2. Return Value
Depending on the start and endpoint values provided in the parameters, it returns a new array that contains the extracted items of the original array; otherwise, the entire contents of the old array are copied to the new array.
Example:
Consider an example where we will copy the original array two times using the equal operator and slice() method, as shown below
<!DOCTYPE html>
<html>
<body>
<h1>Demonstration of Array copy using slice() method</h1>
<p>In this example, we will check to prepare two array copies using equal to operator and slice() method and then will compare both the arrays with original array and display the output</p>
<p id="sample1"></p>
<p id="sample2"></p>
<script>
varoriginalTechnologies = ["Java", "Angular", "Hibernate", "Maven", "Javascript", "HTML", "CSS"];
varequalOperatorCopy = originalTechnologies;
varsliceMethodCopy = originalTechnologies.slice();
document.getElementById("sample1").innerHTML= "Result of comparison of originalTechnologies and equalOperatorCopy is "+ (equalOperatorCopy==originalTechnologies);
document.getElementById("sample2").innerHTML = "Result of comparison of originalTechnologies and sliceMethodCopy is "+ (sliceMethodCopy==originalTechnologies);;
</script>
</body>
</html>Output:
We can observe that array copied through the equals operator is equal to the original array because both of them reference the same contents of the array and have the same references, while the array created by using the slice method is not equal to the original array because though the contents of values of elements in both of them are same, their references are different because both of them consume separate memory space, unlike equal operator copy array.
3. Array.from() Method
Syntax:
Array.from(arrayLikeObject [, mapFunction [, thisArgument]])The mapFunction and thisArgument parameters are optional when using the map() method, however the arrayLikeObject parameter is necessary. The arrayLikeObject can be any object that has indexes and a length property. Array.from() returns a new array that consists of elements of arrayLikeObject passed along with some modifications made by mapFunction.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>Demonstration of Array copy using from() method</h1>
<p>In this example, we will check to prepare two array copies using equal to operator and from() method and then will compare both the arrays with original array and display the output</p>
<p id="sample1"></p>
<p id="sample2"></p>
<script>
varoriginalTechnologies = ["Java", "Angular", "Hibernate", "Maven", "Javascript", "HTML", "CSS"];
varequalOperatorCopy = originalTechnologies;
varfromMethodCopy = Array.from(originalTechnologies);
document.getElementById("sample1").innerHTML = "Result of comparison of originalTechnologies and equalOperatorCopy is "+ (equalOperatorCopy==originalTechnologies);
document.getElementById("sample2").innerHTML = "Result of comparison of originalTechnologies and fromMethodCopy is "+ (fromMethodCopy==originalTechnologies);;
equalOperatorCopy[0]="MySQL";
document.write("<br><br><b>After Changing contents of equalOperatorCopy array</b><br><br>");
document.write("equalOperatorCopy contents :- "+equalOperatorCopy+"<br><br>originalTechnologies contents :- "+originalTechnologies);
fromMethodCopy[1]="PostgreSQL";
document.write("<br><br><b>After Changing contents of fromMethodCopy array</b>");
document.write("<br><br>fromMethodCopy contents :- "+fromMethodCopy+"<br><br>originalTechnologies contents :- "+originalTechnologies)
</script>
</body>
</html>Output:
4. Spread Operator
We can use the spread operator method to copy an array to a new array. Some of the most recent browser iterations support this technique, which was first presented in ECMAScript 6. Make sure whether your browser and its version support its usage.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>Demonstration of Array copy using spread operator method</h1>
<p>In this example, we will prepare two array copies using equal to the operator and spread operator method and then we will compare both the arrays with original array and display the output</p>
<p id="sample1"></p>
<p id="sample2"></p>
<script>
varoriginalTechnologies = ["Java", "Angular", "Hibernate", "Maven", "Javascript", "HTML", "CSS"];
varequalOperatorCopy = originalTechnologies;
varspreadMethodCopy = [...originalTechnologies];
document.getElementById("sample1").innerHTML = "Result of comparison of originalTechnologies and equalOperatorCopy is "+ (equalOperatorCopy==originalTechnologies);
document.getElementById("sample2").innerHTML = "Result of comparison of originalTechnologies and spreadMethodCopy is "+ (spreadMethodCopy==originalTechnologies);;
equalOperatorCopy[0]="MySQL";
document.write("<br><br><b>After Changing contents of equalOperatorCopy array</b><br><br>");
document.write("equalOperatorCopy contents :- "+equalOperatorCopy+"<br><br>originalTechnologies contents :- "+originalTechnologies);
spreadMethodCopy[1]="PostgreSQL";
document.write("<br><br><b>After Changing contents of spreadMethodCopy array</b>");
document.write("<br><br>spreadMethodCopy contents :- "+spreadMethodCopy+"<br><br>originalTechnologies contents :- "+originalTechnologies)
</script>
</body>
</html>Output:
Conclusion
In javascript, we can copy the array to a new one using either of these three methods – slice() method, Array.from(), and spread operator. The use of an equals operator does not create a new copy of the array. Instead, a duplicate of the array’s references is made.
Recommended Articles
We hope that this EDUCBA information on “JavaScript Copy Array” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
