(SPOILER)ES6: Use Destructuring Assignment with the Rest Operator to Reassign Array Elements

1

Hello friends,
I have one question.

Why should I use:

const source = [1,2,3,4,5,6,7,8,9,10];
function removeFirstTwo(list) {
  "use strict";
  // change code below this line
  const [a,b,...arr] = list; // change this
  // change code below this line
  return arr;
}
const arr = removeFirstTwo(source);
console.log(arr); // should be [3,4,5,6,7,8,9,10]
console.log(source); // should be [1,2,3,4,5,6,7,8,9,10];

instead of:

const source = [1,2,3,4,5,6,7,8,9,10];
function removeFirstTwo(list) {
  "use strict";
  // change code below this line
  const [,,...arr] = list; // change this
  // change code below this line
  return arr;
}
const arr = removeFirstTwo(source);
console.log(arr); // should be [3,4,5,6,7,8,9,10]
console.log(source); // should be [1,2,3,4,5,6,7,8,9,10];

If the result is the same. Are those a b variables are necessary?

4 Likes
2

More likely than not, you’d want the values in a or b. Plus, if I look at the first one, I instantly know what is happening. With the second, I have to stop and think for a second and count commas and periods to figure it out.

2 Likes
3

So it just like more readable and that’s all( I mean if I really won’t need those first two in the array)? I mean I couldn’t pass the test without those a and b and was thinking about it as smth important for code performance, not just how it looks like

4

I don’t know the exact specification, but if the second example works, then I guess it’s good. But I find the first one much easier to quickly comprehend. And if you don’t care about the first elements, then why not just use arr.slice(2)? It’s much clearer. There is a danger of using new ES6 operations because their “cool”. But if they make the code more difficult to understand, then they are doing a disservice. I think the rest operator is a great tool, but for what it was intended.

6 Likes
5

thank you for responses :slight_smile:

6

Aaagh, don’t leave holes in arrays, JS lets you do this but it’s super confusing, incredibly difficult to read, invites errors and is bad for performance.

2 Likes
7

yeah, i agree. I’ve tried arr.slice(2) but it won’t pass the challenge. Still, i think it is a better solution than ES6, in this case :slight_smile:

8

Yeah, the instructions specifically mention destructuring so that is required. But to me the slice is a better option.

9

Hi, You can try arr.slice(2, 10), it will works.

more information: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

1 Like
10

Hi @kevinSmith

I used const [a, b, …arr] = source instead of = list like this:

const source = [1,2,3,4,5,6,7,8,9,10];
function removeFirstTwo(list) {
  "use strict";
  // change code below this line
  const [a, b, ...arr] = source; // change this
  // change code above this line
  return arr;
}
const arr = removeFirstTwo(source);
console.log(arr); // should be [3,4,5,6,7,8,9,10]
console.log(source); // should be [1,2,3,4,5,6,7,8,9,10];

It passed the test just the same but is it better to use list like @YariPL did or is either fine?

11

What would happen with your code if I delete source? The function should still work, source is only there to check that your function works as expected. eg this should work, but it won’t:

function removeFirstTwo(list) {
  const [a, b, ...arr] = source;
  return arr;
}

const arr = [1,2,3,4];
console.log(removeFirstTwo(arr)); // should be [3,4]
console.log(arr); // should be [1,2,3,4]
12

I kind of understand but what I’m trying to ask is, when I say const [a, b, …arr] = either source/list;

Is the correct practice to use use the name of the array which in this case would be source or the name of the removeFirstTwo(list) function parameter which would be list in this case ?

Sorry for being a total noob here, I’m just struggling with the ES6 stuff :sob:

Thanks for replying !

13

No problem. I know what youre trying to say, but it’s nothing to do with ES6, just think about why this won’t work (this is the all of the code, there is nothing else):

function removeFirstTwo(list) {
  var arr = source.slice(2);
  return arr;
}

var arr = [1,2,3,4];
console.log(removeFirstTwo(arr)); // should be [3,4]
console.log(arr); // should be [1,2,3,4]
14

Yeah that makes perfect sense now, thanks for your help! :v:

1 Like
15

In the instruction is states that Array.slice() should not be used.

16

Whether I used slice is not relevant. I was asking the OP if they could understand why the piece of code I wrote could not work properly.

This would have also done the job, it just would have been confusing because it doesn’t match the challenge

function removeFirstTwo(list) {
  console.log(source);
  // Other code would go here 
}
17

It might be too late, but hopefully it will help someone.

(SPOILER ALERT!!!)
I solved it this way:

const source = [1,2,3,4,5,6,7,8,9,10];
function removeFirstTwo(list)
"use strict";
// change code below this line
const[,, ...arr] = list; // change this
// change code above this line
return arr;
}
const arr = removeFirstTwo(source);

My reasoning:
const[,, ...arr] = list;

The function has list as its parameter, that can pass any array technically, not only const source. So, when we are defying the const we have to get that in mind, thats why it always has to be equal to the parameter “list”.

const doesn’t have to be called arr when we can simply obtain it by using the destructuring method.
By using two comas its a way to get rid of the first two numbers of the array, and then “…arr” will create its own variable arr(that’s why you don’t really have to name the const arr), so when later on we return arr it will return whichever array we pass on as an argument minus the first two numbers (That we haven’t really assigned any variable to it)

I hope my reasoning and my english is correct. I also hope this won’t confuse anyone.

1 Like