1

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 ] ]

1

2 Answers 2

2

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

1
  • 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.
    – Hampus
    Sep 2, 2021 at 19:31
0

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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.