w3resource

JavaScript: Clone an array

JavaScript Array: Exercise-2 with Solution

Write a JavaScript function to clone an array.

Test Data:
console.log(array_Clone([1, 2, 4, 0]));
console.log(array_Clone([1, 2, [4, 0]]));
[1, 2, 4, 0]
[1, 2, [4, 0]]

Pictorial Presentation:

JavaScript: Clone an array

Sample Solution-1:

JavaScript Code:

var array_Clone = function(arra1) {
 return arra1.slice(0);
    };
console.log(array_Clone([1, 2, 4, 0]));
console.log(array_Clone([1, 2, [4, 0]]));

Sample Output:

[1,2,4,0]
[1,2,[4,0]]

Flowchart:

Flowchart: JavaScript: Display the colors entered in an array by a specific format

ES6 Version:

var array_Clone = arra1 => arra1.slice(0);
console.log(array_Clone([1, 2, 4, 0]));
console.log(array_Clone([1, 2, [4, 0]])); 

Sample Solution-2:

JavaScript provides quite a few ways to clone an array, most of which are pretty similar in terms of performance and results. Here's a quick rundown of some of the available options.

The spread operator:

ES6 introduced the spread operator (...), which provides probably the easiest and most common way to create a shallow clone of an array.

JavaScript Code:

let x = [1, 2, 3, 4];
console.log("Original array:")
console.log(x)
let y = [...x];
console.log("Clone of the said array:")
console.log(y)

Sample Output:

Original array:
[1,2,3,4]
Clone of the said array:
[1,2,3,4]

Sample Solution-3:

Array.from()

Array.from() has a very powerful API that can be used for many different things, including creating a copy of an array.

JavaScript Code:

let x = [1, 2, 3, 4];
console.log("Original array:")
console.log(x)
let y = Array.from(x);
console.log("Clone of the said array:")
console.log(y)

Sample Output:

Original array:
[1,2,3,4]
Clone of the said array:
[1,2,3,4]

Sample Solution-4:

Array.prototype.slice()

Similarly to the spread operator, Array.prototype.slice() can be used to create a shallow copy of an array.

JavaScript Code:

let x = [1, 2, 3, 4];
console.log("Original array:")
console.log(x)
let y = x.slice();
console.log("Clone of the said array:")
console.log(y)

Sample Output:

Original array:
[1,2,3,4]
Clone of the said array:
[1,2,3,4]

Sample Solution-5:

Array.prototype.map()

Looking into one of the more unorthodox options, Array.prototype.map() can be used to map each element of an array to itself to create a new array.

JavaScript Code:

let x = [1, 2, 3, 4];
console.log("Original array:")
console.log(x)
let y = x.map(i => i);
console.log("Clone of the said array:")
console.log(y)

Sample Output:

Original array:
[1,2,3,4]
Clone of the said array:
[1,2,3,4]

Sample Solution-6:

Array.prototype.filter()

Similarly, Array.prototype.filter() can be used to return true for each and every element, resulting in a new array with all of the original array's elements.

JavaScript Code:

let x = [1, 2, 3, 4];
console.log("Original array:")
console.log(x)
let y = x.filter(() => true);
console.log("Clone of the said array:")
console.log(y)

Sample Output:

Original array:
[1,2,3,4]
Clone of the said array:
[1,2,3,4]

Live Demo :

See the Pen JavaScript - Clone an array- array-ex-1 by w3resource (@w3resource) on CodePen.


Improve this sample solution and post your code through Disqus

Previous: Write a JavaScript function to check whether an 'input' is an array or not.
Next: Write a JavaScript function to get the first element of an array. Passing a parameter 'n' will return the first 'n' elements of the array.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Share this Tutorial / Exercise on : Facebook and Twitter

JavaScript: Tips of the Day

Log the values that are commented out after the console.log statement

function* startGame() {
  const answer = yield 'Do you love JavaScript?';
  if (answer !== 'Yes') {
    return "Oh wow... Guess we're gone here";
  }
  return 'JavaScript loves you back ?';
}

const game = startGame();
console.log(/* 1 */); // Do you love JavaScript?
console.log(/* 2 */); // JavaScript loves you back ?

A generator function "pauses" its execution when it sees the yield keyword. First, we have to let the function yield the string "Do you love JavaScript?", which can be done by calling game.next().value.
Every line is executed, until it finds the first yield keyword. There is a yield keyword on the first line within the function: the execution stops with the first yield! This means that the variable answer is not defined yet!
When we call game.next("Yes").value, the previous yield is replaced with the value of the parameters passed to the next() function, "Yes" in this case. The value of the variable answer is now equal to "Yes". The condition of the if-statement returns false, and JavaScript loves you back ? gets logged.

Ref: https://bit.ly/3jFRBje