ES6: The Right Parts ES6: The Right Parts

Destructuring and Function Parameters

Check out a free preview of the full ES6: The Right Parts course:
The "Destructuring and Function Parameters" Lesson is part of the full, ES6: The Right Parts course featured in this preview video. Here's what you'd learn in this lesson:

Both array and object destructuring can occur in a function’s parameter list. Kyle works through a few examples where destructuring in a parameter list can be useful. He also explains how it works with default parameters.

Get Unlimited Access Now

Transcript from the "Destructuring and Function Parameters" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Kyle Simpson: Everything I just talked to you about with the array destructuring and object destructuring. In the declarative sense, and in the straight up assignment sense, every bit of that is exactly and identically applicable to function parameters. We can do array and object destructuring inside of our function parameter list.

[00:00:26] So, for example, I could say that I'm expecting to receive an array in the first argument position, the first parameter position of foo. But I want to go ahead and break that thing down. So, I'm going to do in array destructuring to say that the first item should be a the second one should be b and the third one should be C.

[00:00:45] So if I print it out console.log(a,b,c). If I pass in foo( 1,2,3), what's going to happen?
>> Kyle Simpson: Think about your processing.
>> Speaker 2: It's not an array, so it won't destructure?
>> Kyle Simpson: You have a number value, the number one, that you then try to access a property on it.

[00:01:23] So you try to say 1 bracket 0, essentially. Have you ever tried that before? Do you know if that works or if that's an error?
>> Speaker 2: Tried it, but I'm guessing you'd get undefined.
>> Kyle Simpson: Yeah, it works, but we get undefined. We're not going to get the 1, 2, 3 that we're expecting.

[00:01:42] And we're not even gonna get an error here, because we happen to give it a value that it is legal to do a bracket syntax against. Null and undefined, it's not legal to do that, but the number value it is. Because there's a thing in JavaScript called boxing which is taking objects and boxing them into their object counterparts.

[00:02:01] So there's a number object that's boxed here, and then we try to access the 0 property on a number object that's not present. Okay, so that's why it's legal and that's why I'm pointing it out is because you're gonna run into this error. And you're like where's my one two and three?

[00:02:16] It's because you're destructuring the single value. In this case you want to pass in an array. Now if we pass in the array, the array gets destructured into a, b, and c. And of course this one should have a default value on it. Cuz if you don't pass in the array, you want it to first pick up the empty array before trying to do the destructuring pattern.

[00:02:41] Same reasoning as before.
>> Kyle Simpson: And that only accounts for one argument, we can do multiples. We could have an array destructuring in the first parameter position, an object destructuring in the second and a dot dot dot args in the third. We can do whatever we want, go crazy.

[00:02:57]
>> Speaker 3: This applies the same for objects?
>> Kyle Simpson: Yeah, we can do object destructuring as well. So I could say {a, b, c,}, and what that would be expecting is to be receiving an object like this.
>> Kyle Simpson: Now here's why this is cool, because this kind of usage starts to approximate a feature that does not exist in JavaScript, does exist in other languages.

[00:03:25] Would be really cool if we had it, but now we have a way to sort of mimic it, which is called named arguments. It's different from named parameters. Named arguments are where at the call site of a function, you get to say this value goes to this specifically named parameter.

[00:03:43] So isn't that kind of like what we're doing here? We're kinda saying the value 2 needs to go to the b parameter, and the value 3 needs to go to the c parameter. They're not really parameters, they're properties on an object that gets destructured to look like a parameter.

[00:03:58] But in using object destructuring in our signature, and by allowing the call site to use an object to do that mapping, we now are mimicking or approximating this idea of named arguments. How many of you have ever had to work with a function that had like 3, 4, 5, 10 arguments in it?

[00:04:19] And how many of you had to keep going up to the documentation or reading to remember, because you could never remember. This basically accounts for 100% of the time that I ever wrote PHP code. I could never remember the signature of the function. I always had to go to PHP.net and look it up.

[00:04:34] No matter how many times I wrote it, 1000 times I'm still looking at the same function. Because I can't remember, is string first, or is index first or whatever. Didn't make matters any better that they had multiple functions that did the same thing. And arguments are in different orders, parameters in different orders.

[00:04:50] But point is, it's kind of a code smell when you start to have any more than maybe 2 or 3, at the most, arguments for a function. If you have 4, 5, 10, 20 arguments to a function, nobody is ever going to remember them. And even if they could remember them, nobody is gonna wanna write null, null, null, null, null to skip all the ones that they don't care about.

[00:05:11] Or in our case we'd have to write undefined, undefined, undefined, undefined to skip over the ones that we don't care about. That's terrible, so my suggestion to you, is one practical usage for this object destructuring is start switching any function that you have that takes 3 or more arguments.

[00:05:30] Switch it to an object destructuring so that people can name their arguments instead. Which means, that I can skip the b1 entirely if I don't wanna pass it in, meaning that it could have a default value. And it will pick that default value up. So I can skip over b entirely, and I can list these in different orders.

[00:05:48] I don't have to remember what order they need to be listed in. I can list them in whatever order I want to.
>> Kyle Simpson: So you give much more freedom to the call site. That's one real practical usage for object destructuring is to embody this, what we call named arguments, pattern.

[00:06:14] See I already forgot it, I told you I always forget this. We need the empty object there. In case somebody doesn't pass in the object, we want it to gracefully fall back.