Copy an Array with the Spread Operator...arr

Tell us what’s happening:

Your code so far


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

// change code here to test different cases:
console.log(copyMachine([true, false, true], 2));

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-data-structures/copy-an-array-with-the-spread-operator

1 Like

Hi,
You use spread effectively to recreate that array but you are only re-assigning it to newArray over and over again num times. In the end you will only have one copy no mater how many times your loop executes.

 newArr = [...arr];

For example

copyMachine([1, 2, 3], 5000);  // [1,2,3]

…still just one copy

What you want is

copyMachine([1, 2, 3],  3);  // [ [1,2,3] ,  [1,2,3] ,  [1,2,3] ] 

so using the assignment operator = over and over again is not going to do that.
Everytime your loop executes you want one more copy added to the end of newArr

There was a hint at an array method previously used
(hint: another method we have already covered might come in handy here!)

3 Likes

You’re almost there. The spread operator copies all the values into an empty object of the same type. Like if they were containers

  • array > array
  • object literal > object literal
    • object spread overwrites properties with the same name, starting left to right

You can think of it like spreading values out one by one into an empty container

const arr = [1,2,3]
const arrCopy = [...arr] // start with [] -> [1], [1,2], [1,2,3]
console.log(arrCopy) // [1,2,3]

const obj = { a: 1, b: 2 }
const objCopy = { ...obj } // start with {} -> { a: 1}, {a: 1, b: 2 }
console.log(objCopy) // { a: 1, b: 2 }

Since we’re copying values into another container, we can actually spread as many variables as we want, even starting with an empty container

const arr = [1,2,3]
const newArr = []
const arrCopy = [...newArr, ...arr] // start with  [] ->  [], [1], [1,2], [1,2,3]
console.log(arrCopy) // [1,2,3]

const obj = { a: 1, b: 2 }
const newObj = {}
const objCopy = { ...newObj, ...obj } //start with {} -> {}, {a: 1}, {a: 1, b: 2}
console.log(objCopy) // { a: 1, b: 2 }

const sameProp = { a: 4 }

// this overwrites with the right side winning
const overWritten = {...newObj, ...obj, ...sameProp }
console.log(overWritten) // { a: 4, b, 2 }

Knowing that, this line needs to change

newArr = [...arr];
8 Likes

This worked for me newArr.push([…arr]); but still don’t know how

7 Likes

My function looks like that and it is works:

  let newArr = [];
  while (num >= 1) {
    // change code below this line
    newArr = [[...arr], ...newArr];
    // change code above this line
    num--;
  }
  return newArr;
}
5 Likes

newArr.push([…arr]);

This code is pushing arr into newArr.
It’s like putting one piece of fruit into a basket.
Every time you run this line, a new piece of fruit is put into the basket.

7 Likes

I initially tried: newArr.push(…arr);
It returned one array with arr’s numbers spread num amount of times.
Your method, in contrast, created num amount of arrays with arr spreaded in each one.

Thanks, I was confused until I saw your solution: newArr.push([…arr]);
and worked it out.

This work perfectly for me. So , newArr will get the whole array and will repeat it will the number comes to zero. Awesome

1 Like

newArr is being overridden every time. You can simply do
newArr[num-1] = […arr];
This will ensure the whole arr will get copied num times to newArr

So the solution is shown above several times. What I’d like to know is what benefit newArr.push([...arr]); has over simply using newArr.push(arr);.

Thanks for you example Randell,

I couldn’t pass this exercise because I was using newArr.push(arr) so I made a workaround to pass it.

let pass = [...arg];
newArr.push(pass);

Now I see clearly the difference, why I should use ([…arg]) instead of (arr)

By the way, I think there is a mistake in your example in line 42 it should be copiesHolder2 instead of copiesHolder.

Cheers

newArr[newArr.length] = […arr];

Hello guys. I’ve manage to pass the test but I’m not sure if my solution is also correct. Here it is:

function copyMachine(arr, num) {
let newArr = [];
let testArr=[];
while (num >= 1) {
// change code below this line
testArr=[…arr];
newArr.push(testArr);
// change code above this line
num–;
}
return newArr;
console.log(newArr);
}

// change code here to test different cases:
console.log(copyMachine([true, false, true], 2));

Do u know why newArr[num] = […arr]; the result is “,true,false,true,true,false,true”, why we have the first comma?

Because in that way newArr[0] stay empty

why newArr[num - 1] = […arr]; it is not empty?

Follow what num does, and you will see in one case you get a 0 as lowest number in the brackets and in the other case you get a 1

1 Like

sorry can not get it , is not that example using same method ?!

I mean that code you shared in the comment