JavaScript: The Recent Parts

Comma Separation

Kyle Simpson

Kyle Simpson

You Don't Know JS
JavaScript: The Recent Parts

Check out a free preview of the full JavaScript: The Recent Parts course

The "Comma Separation" Lesson is part of the full, JavaScript: The Recent Parts course featured in this preview video. Here's what you'd learn in this lesson:

Kyle demonstrates how to use commas to omit a value that is returned when destructuring.


Transcript from the "Comma Separation" Lesson

>> Kyle Simpson: Let's go back to the scenario that we had before, which was our variables.
>> Kyle Simpson: What if I did not care about the number two?
>> Kyle Simpson: I would just simply not do that assignment, right? I'm commenting in here, so you can see that it's still there, but that is effectively just not doing an assignment.

I'm basically saying, I only care about position zero and two, and I don't care about position one at all. In a destructuring syntax, we can essentially have empty positions, which have the effect of not doing any assignment at all. So an empty position is just simply nothing in between the commas.

Which here I'm gonna put its own line, so that you aren't tempted to miss the fact that there's two commas there. I've seen people do stuff like that before, and good luck having people read and count how many spaces there are in between the commas, okay? So if you're gonna leave an empty space in a destructuring pattern, give it its own line, so at least that it's obvious that something is happening there.

Of course, you can do, this is called array elision, by the way, and you can do this array elision at any place. You could do it at the beginning, you could do it in the middle, it doesn't really make any sense to do it at the end. But it might make sense to do it right before you do a gather, if you know that there are some things that you don't wanna include in the gathering,

>> Kyle Simpson: If you wanted to throw away a few basically.
>> Speaker 2: Could you do ranges inside, or probably not? You can slice the data, probably, before passing it.
>> Kyle Simpson: Yeah.
>> Speaker 2: Right.
>> Kyle Simpson: All right, I'm gonna open up a new tab just to show you one other little diversion.

>> Kyle Simpson: If I had x=10 and y=20, and I wanted to swap those two. I wanted x to be 20 and y to be 10. The most common way that we would swap them would be to say something like, var tmp = x, and then, or actually, let's be more ES6 about it, let's use a block and use a block-scoped declarative.

We'll say let tmp = x, and then, [SOUND] goodness., and then x = y, and y = tmp. And so now x would be 20, and y would be 10. Any of you ever done swapping event variables like that before, using a temporary variable? Well, there's a trick that we can use with destructuring to make the swapping in this particular case not need a temporary variable.

So if I had a var x = 10 and a var y = 20, an effective way of swapping the two is to use a destructuring pattern that says, I want y and x to equal the array x,y. So this is saying, I want y to take on whatever value is in this position, and I want x to take on whatever value is in this position.

And that is the effect of having swapped x and y.
>> Kyle Simpson: And of course, it's not limited to 2, you could have 3 or 5 or 10 or 20, however many of those you needed.
>> Kyle Simpson: [COUGH] But I can say at least maybe half a dozen or a dozen times or so, I've needed to swap things.

And this is a nice convenient way of doing that very concisely, and I think also declaratively. I'm essentially listing out that the values in that order should be transposed to that order, declared.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now