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

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

#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?


#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.


#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.


#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.


#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


#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: