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 just can’t simply use equal to an operator to copy the array from one variable to another. This will lead to the copying of the references of the array and not the values of the array i.e its elements. Hence, if the array is copied using equal to operator then any change in the occupied array will reflect on the original array and vice versa as both the arrays refer to the same references of values.
Hence, in javascript we are provided with the method called slice() that can prove beneficial when copying an array. Another such method used for copying the array is Array.from(). With the introduction of an ECMAScript 6 spread operator is provided that makes the task of copying the array simple.
Methods of JavaScript Copy Array
In this article, we will study all the three methods of copying an array and also see the working of the equal to and other methods in a comparative manner that will get you a clear perspective of using these methods to copy an array and look at some of the examples and syntax.
1. Slice Method
This method is usually used to copy a certain part of the array that is specified with the parameters by mentioning its starting and ending index into a completely new array. The start point and endpoint are optional and whenever not mentioned, we can use the slice method to copy the whole 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 new array that is returned as the return value of the slice method
- 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
It returns a new array that contains the extracted elements of the original array depending on the values of start and endpoint supplied in the parameters otherwise all the contents of the original array are copied to the new array.
Example:
Consider an example where we will copy the original array two times using 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>
4.5 (5,732 ratings)
View Course
Output:
We can observe that array copied through equals operator is equal to the original array because both of them reference the same contents of the array and have 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]])
mapFunction and thisArgument are optional in usage while arrayLikeObject is required which can be any object having indexes and length property. Array.from() returns a new array that consists of elements of arrayLikeObject passed along with some modifications is 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 one more method called spread operator method that can be used to copy an array to a new array as shown in the below example. This is the new way introduced in ECMAScript 6 and supported by some of the latest versions of browsers. Make sure whether your browser and its version support its usage. It is denoted by …
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 array by 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 copy of references of the original array is created.
Recommended Articles
This is a guide to JavaScript Copy Array. Here we also discuss the introduction and method of javascript copy array along with examples and its code implementation. You may also have a look at the following articles to learn more –
