What the point of spread operaror in JavaScript especially on this example?

Question

I am studying now at FreeCodeCamp, and here is a challenge:

"We have defined a function, copyMachine which takes arr (an array) and num (a number) as arguments. The function is supposed to return a new array made up of num copies of arr. We have done most of the work for you, but it doesn't work quite right yet. Modify the function using spread syntax so that it works correctly (hint: another method we have already covered might come in handy here!)."

And here is a solution:

function copyMachine(arr, num) { let newArr = []; while (num >= 1) { // Only change code below this line newArr.push([...arr]) // Only change code above this line num--; } return newArr; } console.log(copyMachine([true, false, true], 2));

What the point to add extra brackets and dots (...) if i could just add newArr.push(arr) instead and get the same result? The result is: [ [ true, false, true ], [ true, false, true ] ]

Does this answer your question? Difference between Array.push() and Spread syntax — Heretic Monkey
– Heretic Monkey, Commented Sep 2, 2021 at 15:57

Terminat · Accepted Answer · 2021-09-02 16:00:38Z

It's the matter of reference.

When using this syntax newArr.push(arr), you're pushing the original array from the argument, so whenever the arr changes its content, arrays inside newArr will also update since it is always the same one array.

When using spread syntax, you're actually pushing a copy of that arr. This mean it's a new array that is not tied to the array you pass to a function

Consider this

function copyMachine(arr, num) { let newArr = []; while (num >= 1) { // Only change code below this line newArr.push(arr) // Only change code above this line num--; } return newArr; } const oldArr = [true, false, true]; const newArr = copyMachine(oldArr, 2); oldArr.push(true); console.log(newArr); // contains an element added to the old array

Good description and example! Just to add some more details, it will also work the same if arr is copied another way instead of [...arr] such as using Array.from(arr), as long as a new independent array is created. If it's known that no modifications are ever done to the arrays, then sharing the non-copied arr everywhere would be equally fine.

Tanvir Mahin · Accepted Answer · 2021-09-02 16:01:19Z

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

In the provided code the spread operator is used to make a new array using the elements of the array named arr and then push it onto newArr.

This is similar to doing newArr.push(arr);

Collectives™ on Stack Overflow

What the point of spread operaror in JavaScript especially on this example?

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related