Arrays are fundamental and widely utilized structures for presenting, manipulating, and managing data. In JavaScript, we can utilize various functions, methods, and operators to retrieve the same array along with its values. This article will explore several techniques for duplicating the original array in JavaScript.
How to Create a Duplicate Array?
We can manipulate the array and its value to execute tasks like sorting, filtering, or mapping, but we want to keep the original array the same.
- The duplicate arrays can send the method of the original array, and some methods can choose the index of the original array.
- Please keep the original array safe for reference when cloning or duplicating it and operate it for additional processing or modification.
- If the array elements work as objects, then avoid the modification of the index and its data.
Methods to Create a Duplicate Array
The following ways are used to create duplicate arrays with their values using JavaScript functions.
- Use sliceK
- Use concat methodK
- Use Spread operatorK
- Use JSON.parse and JSON.stringifyK
- Use for loopK
- Use while loopK
- Use from operatorK
- Use of operatorK
- Use assign methodK
- Use the Array.map MethodK
- Use the Array.from method with a map functionK
- Use the filter methodK
- Use reduce methodK
Use slice
The slice function generates a copy of the initial array along with its contents. This approach is the most straightforward and efficient way to produce a duplicate or clone of the original array. When we specify both the starting and ending index, JavaScript will create a duplicate that spans from the start index up to but not including the end index of the array. Conversely, if we invoke the slice method without any arguments, JavaScript will replicate the complete original array.
Syntax
The syntax below illustrates how to create a cloned array utilizing the JavaScript slice method.
Original_Array.slice();
OR
Original_Array.slice(start, end);
Examples:
The example below demonstrates how to create a duplicate array utilizing the JavaScript slice method.
Example 1:
The example below demonstrates how to create a clone of an array along with all its elements utilizing the JavaScript slice method.
<!DOCTYPE html>
<html>
<head>
<title> How to duplicate array using javascript </title>
</head>
<body style = "background-color: beige;">
<h2> How to duplicate array using javascript </h2>
<h4> Using a Using slice() Method to duplicate array using javascript loop </h4>
<b> Please see the console tab to get output </b>
<script>
let original_Array = [10, 20, 30, 40, 50];
let duplicate_Array = original_Array.slice();
console.log("Using a Using slice() Method to duplicate array using javascript loop.")
console.log("Duplicate array is:")
console.log(duplicate_Array);
</script>
</body>
</html>
Output
The result displays the repeated arrays derived from the initial array.
Example 2:
The example provided below demonstrates how to create a clone of an array along with the necessary values by utilizing the JavaScript slice method.
<!DOCTYPE html>
<html>
<head>
<title> How to duplicate array using javascript </title>
</head>
<body style = "background-color: beige;">
<h2> How to duplicate array using javascript </h2>
<h4> Using a Using slice() Method to duplicate array using javascript loop </h4>
<b> Please see the console tab to get output </b>
<script>
let original_Array = [10, 20, 30, 40, 50, 60, 70];
console.log("Using a Using slice() Method to duplicate array using a javascript loop.");
console.log("Original array is:");
console.log(original_Array);
let duplicate_Array = original_Array.slice(2, 6);
console.log("Duplicate array is:");
console.log(duplicate_Array);
</script>
</body>
</html>
Output
The result displays the repeated arrays derived from the initial array.
Use concat method
The concat function serves the purpose of generating a clone or duplicate of arrays through JavaScript. To achieve a precise replication of an array, one should utilize the concat method along with the variable corresponding to the original array. This approach employs a new array to produce a replicated array by concatenating two or more arrays together. It is important to note that the original array remains untouched and is not subject to any modifications. Additionally, this method tends to be less efficient than the slice method, primarily because it operates with an empty array when invoking concat.
Syntax
The syntax below demonstrates how to create a clone of an array by utilizing the JavaScript concat method.
[].concat(original_Array);
Example
The subsequent example demonstrates how to create a duplicate array utilizing the JavaScript concat function.
<!DOCTYPE html>
<html>
<head>
<title> How to duplicate array using javascript </title>
</head>
<body style = "background-color: beige;">
<h2> How to duplicate array using javascript </h2>
<h4> Using a Using concat() Method to duplicate array using javascript loop </h4>
<b> Please see the console tab to get output </b>
<script>
let original_Array = [10, 20, 30, 40, 50, 60, 70];
console.log("Using a Using concat() Method to duplicate array using a javascript loop.");
console.log("Original array is:");
console.log(original_Array);
let duplicate_Array = [].concat(original_Array);
console.log("Duplicate array is:");
console.log(duplicate_Array);
</script>
</body>
</html>
Output
The result displays the replicated arrays derived from the original array.
Use Spread Operator
In JavaScript, the spread operator is utilized to generate a new array that contains the same elements as an existing one. This operator facilitates the creation of a clone or copy of the original array. It is important to note that the original array remains unaltered with respect to its data and indexing.
Syntax
The syntax below demonstrates how to create a clone of an array utilizing the spread operator in JavaScript.
Let variable_name = [...ArrayValues];
Example
The subsequent example illustrates how to duplicate an array utilizing the JavaScript Spread operator.
<!DOCTYPE html>
<html>
<head>
<title> How to duplicate array using javascript </title>
</head>
<body style = "background-color: beige;">
<h2> How to duplicate array using javascript </h2>
<h4> Using a Using spred() operator to duplicate array using javascript loop </h4>
<b> Please see the console tab to get output </b>
<script>
let original_Array = [100, 200, 300, 400, 500, 600, 700];
console.log("Using a Using spred() operator to duplicate array using a javascript loop.");
console.log("Original array is:");
console.log(original_Array);
let duplicate_Array = [...original_Array];
console.log("Duplicate array is:");
console.log(duplicate_Array);
</script>
</body>
</html>
Output
The output displays the replicated arrays derived from the initial array.
Use JSON.parse and JSON.stringify
An additional approach for duplicating an array in JavaScript involves utilizing the JSON.parse and JSON.stringify functions. By employing this technique, a fresh array is generated by converting the original array into a JSON string and then parsing that string back into an array.
Syntax
The syntax provided below illustrates how to create a clone of an array by utilizing the JSON.parse and JSON.stringify methods in JavaScript.
JSON.parse( string, function )
JSON.stringify(data, value_replacer, space);
Example
The example provided below demonstrates how to create a duplicate of an array utilizing the JSON.parse and JSON.stringify methods in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title> How to duplicate array using javascript </title>
</head>
<body style = "background-color: beige;">
<h2> How to duplicate array using javascript </h2>
<h4> Using a Using JSON.parse() and JSON.stringify() Methods to duplicate array using javascript loop </h4>
<b> Please see the console tab to get output </b>
<script>
let original_Array = [100, 200, 30, 400, 50, 600, 70];
console.log("Using a JSON.parse() and JSON.stringify() Methods to duplicate array using javascript loop.");
console.log("Original array is:");
console.log(original_Array);
let duplicate_Array = JSON.parse(JSON.stringify(original_Array));
console.log("Duplicate array is:");
console.log(duplicate_Array);
</script>
</body>
</html>
Output
The result displays the replicated arrays derived from the initial array.
Use for loop
A JavaScript for loop serves the purpose of traversing through each element present in the array. When the number of iterations required to replicate the array is known, employing a JavaScript for loop is an effective approach. This allows us to adjust both the value of the array elements and their corresponding index positions using the for loop construct.
Syntax
The syntax presented below illustrates how to duplicate an array in JavaScript utilizing a for loop.
for (statement_1; statement_2; statement_3){
write duplicate array condition here...
}
Examples
The subsequent illustration demonstrates the process of duplicating an array utilizing a for loop in JavaScript.
Example 1:
The subsequent example demonstrates how to replicate an array containing all elements by utilizing the JavaScript "for" loop.
<!DOCTYPE html>
<html>
<head>
<title> How to duplicate array using javascript </title>
</head>
<body style = "background-color: beige;">
<h2> How to duplicate array using javascript </h2>
<h4> Using a Using for loop to duplicate array using javascript loop </h4>
<b> Please see the console tab to get output </b>
<script>
let original_Array = [10, 25, 30, 45, 50, 65, 70];
console.log("Using a for loop to duplicate array using javascript loop.");
console.log("Original array is:");
console.log(original_Array);
function duplicate_Array(arr_v) {
let duplicate = [];
for (let i = 0; i < arr_v.length; i++) {
duplicate[i] = arr_v[i];
}
return duplicate;
}
let clone_Array = duplicate_Array(original_Array);
console.log("Duplicate array is:");
console.log(clone_Array);
</script>
</body>
</html>
Output
The result displays the arrays that are duplicates of the initial array.
Example 2:
The example below demonstrates how to create a clone of an array that includes the necessary values by utilizing the "for" loop in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title> How to duplicate array using javascript </title>
</head>
<body style = "background-color: beige;">
<h2> How to duplicate array using javascript </h2>
<h4> Using a Using for loop to duplicate array using javascript loop </h4>
<b> Please see the console tab to get output </b>
<script>
let original_Array = [10, 25, 30, 45, 50, 65, 70];
console.log("Using a for loop to duplicate array using javascript loop.");
console.log("Original array is:");
console.log(original_Array);
function duplicate_Array(arr_v) {
let duplicate = [];
for (let i = 3; i < arr_v.length; i++) {
duplicate[i] = arr_v[i];
}
return duplicate;
}
let clone_Array = duplicate_Array(original_Array);
console.log("Duplicate array is:");
console.log(clone_Array);
</script>
</body>
</html>
Output
The result displays the replicated arrays derived from the original array.
Use from Operator
A straightforward approach to duplicate an array in JavaScript is by utilizing the from function. This method, which includes an optional mapping function, converts an existing array into a fresh array while allowing modifications to the values within the newly created array. To implement the from method, we can reference the original array and precede it with the Array keyword before the operator.
Syntax
The syntax provided below demonstrates how to create a clone of an array in JavaScript using a loop.
Array.from(original_Array);
Example
The example below demonstrates how to duplicate an array by utilizing the JavaScript "from" method.
<!DOCTYPE html>
<html>
<head>
<title> How to duplicate array using javascript </title>
</head>
<body style = "background-color: beige;">
<h2> How to duplicate array using javascript </h2>
<h4> Using a Using from() Method to duplicate array using javascript loop </h4>
<b> Please see the console tab to get output </b>
<script>
let original_Array = [10, 20, 30, 40, 50];
console.log("Original array is:")
console.log(original_Array);
let duplicate_Array = Array.from(original_Array);
console.log("Using a Using from() Method to duplicate array using javascript loop.")
console.log("Duplicate array is:")
console.log(duplicate_Array);
</script>
</body>
</html>
Output
The result displays the repeated arrays derived from the initial array.
Use of Operator
The "of" operator is utilized alongside the array identifier to generate a copy of the array. This operator facilitates the creation of a clone of the original array while preserving the data intact. It serves as one of the straightforward techniques for producing a duplicate version of the initial array.
Syntax
The syntax provided below demonstrates how to create a clone of an array in JavaScript utilizing a loop.
Array.of(...original_Array);
Example
The subsequent example illustrates how to duplicate an array utilizing the "of" operator in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title> How to duplicate array using javascript </title>
</head>
<body style = "background-color: beige;">
<h2> How to duplicate array using javascript </h2>
<h4> Using a Using of() Method to duplicate array using javascript loop </h4>
<b> Please see the console tab to get output </b>
<script>
let original_Array = [10, 20, 30, 40, 50];
console.log("Using a Using of() Method to duplicate array using javascript loop.")
console.log("Original array is:")
console.log(original_Array);
let duplicate_Array = Array.of(original_Array);
console.log("Duplicate array is:");
console.log(duplicate_Array);
</script>
</body>
</html>
Output
The result displays the repeated arrays derived from the initial array.
Use while loop
The while loop is employed in conjunction with an iteration-based loop to generate a copy of an array.
Syntax
The syntax provided below demonstrates how to clone an array in JavaScript utilizing a while loop.
while(statement_1; statement_2){
write duplicate array condition here...
}
Examples
The subsequent illustration demonstrates how to create a duplicate array utilizing a while loop in JavaScript.
Example 1:
The subsequent illustration demonstrates the replication of an array containing all its elements utilizing a while loop in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title> How to duplicate array using javascript </title>
</head>
<body style = "background-color: beige;">
<h2> How to duplicate array using javascript </h2>
<h4> Using a Using while() Method to duplicate array using javascript loop </h4>
<b> Please see the console tab to get output </b>
<script>
let original_Array = [10, 20, 30, 40, 50];
console.log("Using a Using while() Method to duplicate array using javascript loop.")
console.log("Original array is:")
console.log(original_Array);
duplicate_Clone = []
// iterating over the original array and copying each value in the duplicate_Clone array
iterator = -1;
while (++iterator < original_Array.length) {
duplicate_Clone[iterator] = original_Array[iterator];
}
console.log("Duplicate array is:");
console.log(duplicate_Clone);
</script>
</body>
</html>
Output
The result displays the replicated arrays derived from the initial array.
Example 2:
The subsequent example demonstrates how to create a duplicate array containing the necessary values by utilizing a while loop in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title> How to duplicate array using javascript </title>
</head>
<body style = "background-color: beige;">
<h2> How to duplicate array using javascript </h2>
<h4> Using a Using while() Method to duplicate array using javascript loop </h4>
<b> Please see the console tab to get output </b>
<script>
let original_Array = [10, 20, 30, 40, 50];
console.log("Using a Using while() Method to duplicate array using javascript loop.")
console.log("Original array is:")
console.log(original_Array);
duplicate_Clone = []
// iterating over the original array and copying each value in the duplicate_Clone array
iterator = 2;
while (++iterator < original_Array.length) {
duplicate_Clone[iterator] = original_Array[iterator];
}
console.log("Duplicate array is:");
console.log(duplicate_Clone);
</script>
</body>
</html>
Output
The result displays the replicated arrays derived from the initial array.
Use object.assign method
The assign method creates a replica of the specified array. It accepts two parameters: an empty array and the array that needs to be duplicated. Rather than altering the original array, this method generates a precise copy of it.
Syntax
The syntax below demonstrates how to create a duplicate of an array by utilizing the assign method in JavaScript.
let duplicate_Array = Object.assign([],original_Array);
Example
The subsequent illustration demonstrates how to clone an array by utilizing the "of" operator in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title> How to duplicate array using javascript </title>
</head>
<body style = "background-color: beige;">
<h2> How to duplicate array using javascript </h2>
<h4> Using a Using object.assign Method to duplicate array using javascript loop </h4>
<b> Please see the console tab to get output </b>
<script>
let original_Array = [10, 20, 30, 40, 50];
console.log("Using a Using object.assign method to duplicate array using javascript loop.")
console.log("Original array is:")
console.log(original_Array);
let duplicate_Array = Object.assign([],original_Array);
console.log("Duplicate array is:");
console.log(duplicate_Array);
</script>
</body>
</html>
Output
The result displays the repeated arrays derived from the initial array.
Using the Array.map Method
A straightforward approach to create a duplicate of an array in JavaScript is by utilizing the Array.map function. This specific method operates on the original array and transforms it into a new array. However, it does not alter the values contained in the new array. To achieve this, we can apply the map method in conjunction with a reference to the source array and the "x" parameter to represent the value being mapped.
Syntax
The syntax below demonstrates how to create a clone of an array utilizing the map method available in JavaScript.
let duplicate_Array = original_Array.map(x => x);
Example
The example provided below demonstrates how to create a clone of an array utilizing the map method in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title> How to duplicate array using javascript </title>
</head>
<body style = "background-color: beige;">
<h2> How to duplicate array using javascript </h2>
<h4> Using a Using array map Method to duplicate array using javascript loop </h4>
<b> Please see the console tab to get output </b>
<script>
let original_Array = [10, 20, 30, 40, 50];
console.log("Original array is:")
console.log(original_Array);
let duplicate_Array = original_Array.map(x => x);
console.log("Using a Using array map method to duplicate array using javascript loop.")
console.log("Duplicate array is:")
console.log(duplicate_Array);
</script>
</body>
</html>
Output:
The result displays the repeated arrays derived from the initial array.
Using the Array.from method with a map function
The from method is utilized alongside the map function to replicate an array in JavaScript through the Array.from function. This technique transforms an existing array into a fresh array by applying a mapping function to each element, resulting in a newly duplicated array. The Array.from method can be employed by referencing the original array and passing the mapping function as an argument.
Syntax
The syntax below illustrates how to clone an array utilizing a loop in JavaScript.
Array.from(original_Array, x => x);
Example
The illustration below demonstrates how to duplicate an array utilizing the JavaScript "Array.from" method.
<!DOCTYPE html>
<html>
<head>
<title> How to duplicate array using javascript </title>
</head>
<body style = "background-color: beige;">
<h2> How to duplicate array using javascript </h2>
<h4> Using a Using Array.from() Method to duplicate array using javascript loop </h4>
<b> Please see the console tab to get output </b>
<script>
let original_Array = [100, 20, 300, 40, 500];
console.log("Original array is:")
console.log(original_Array);
let duplicate_Array = Array.from(original_Array, x => x);
console.log("Using a Using Array.from() Method to duplicate array using javascript loop.")
console.log("Duplicate array is:")
console.log(duplicate_Array);
</script>
</body>
</html>
Output
The result displays the replicated arrays derived from the initial array.
Using the filter method
The filter function serves to replicate the initial array by utilizing a straightforward empty argument. It employs an empty array along with the "true" keyword arguments within the filter method. This approach ensures that the original array remains unaltered, resulting in a precise duplicate of it.
Syntax
The syntax demonstrated below illustrates how to create a clone of an array utilizing a filter loop in JavaScript.
let duplicate_Array = original_Array.filter(() => true);
Example
The subsequent illustration demonstrates how to duplicate an array by utilizing the "filter" method in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title> How to duplicate array using javascript </title>
</head>
<body style = "background-color: beige;">
<h2> How to duplicate array using javascript </h2>
<h4> Using a Using filter() Method to duplicate array using javascript loop </h4>
<b> Please see the console tab to get output </b>
<script>
console.log("Using a Using filter() Method to duplicate array using javascript loop.")
let original_Array = [150, 250, 350, 450, 550];
console.log("Original array is:")
console.log(original_Array);
let duplicate_Array = original_Array.filter(() => true);
console.log("Duplicate array is:")
console.log(duplicate_Array);
</script>
</body>
</html>
Output
The result displays the replicated arrays derived from the initial array.
Using the filter method
The reduce method serves the purpose of creating a copy or duplicating the original array when utilized with a straightforward argument within a JavaScript function.
Syntax
The syntax below demonstrates how to create a clone of an array utilizing the filter method in JavaScript.
let duplicate_Array = original_Array. reduce((duplicateArray, e) => {
duplicateArray.push(e)
return duplicateArray
}, []);
Example
The subsequent illustration demonstrates the cloning of an array utilizing the "reduce" method in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title> How to duplicate array using javascript </title>
</head>
<body style = "background-color: beige;">
<h2> How to duplicate array using javascript </h2>
<h4> Using a Using reduce() Method to duplicate array using javascript loop </h4>
<b> Please see the console tab to get output </b>
<script>
console.log("Using a Using reduce() Method to duplicate array using javascript loop.")
let original_Array = [50, 65, 75, 85, 95];
console.log("Original array is:")
console.log(original_Array);
let duplicate_Array = original_Array.reduce((duplicateArray, e) => {
duplicateArray.push(e)
return duplicateArray
}, []);
console.log("Duplicate array is:")
console.log(duplicate_Array);
</script>
</body>
</html>
Output
The result displays the replicated arrays derived from the initial array.
Conclusion
Creating a duplicate of an array enables developers to work with the same data set while performing operations independently on each instance.