Copy an Array with the Spread Operator...arr

Copy an Array with the Spread Operator...arr
0

#1

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


#2

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

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

#4

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


#5

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

#6

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

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.


#8

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


#9

4 posts were split to a new topic: Copy machine code not working


#10

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


#11

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


#12

The difference is […arr] is a new array containing a copy of arr which is the entire point. If you write newArr.push(arr) then you are just inserting the reference to the original arr into newArr multiple times. It may appear they are the same, but they are very different. I have created the following repl.it which demonstrates the real difference of the two methods. Run the code and see what is displayed in the console.


#13

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


#14

Yes, that was a typo. Good catch! I have fixed it now.


#15

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