This course has been updated! We now recommend you take the JavaScript: The Recent Parts course.
Transcript from the "Destructuring and Default Values" Lesson
[00:00:00]
>> [MUSIC]
[00:00:02]
>> Kyle Simpson: Now, it might be the case, where, for example, I don't get anything back for b, I might like to apply a default value. If I were doing that over here, what would I end up doing? I would end up saying something like tmp[1] not equal to undefined, tmp[1] or and then give it a default value like 42, right?
[00:00:30] So, now imagine all of that craziness added in with all that undefined checking stuff that we'd be doing, and you can probably quickly imagine how Crazy Harry that does, cuz you also probably written code like that before. I certainly have. Cuz I've needed to do this kind of stuff on more than one occasion, many occasions, okay?
[00:00:49] Here's how simple it is with de-structuring, we simply say, the default value for b should be 42. And that default assignment is going to behave exactly the same as the parameter defaults that we already went over. Have all the same that it's a lazy expression, you can do stuff in that just like you can elsewhere including the required call, all the same things we already learned and now applies here.
[00:01:13] Okay, so now we're declaring that b aught to be defaulted to 42. In the case, where b comes back as undefined, we get 42. If it comes back as an empty slot, we also get 42, okay?
>> Kyle Simpson: So, we can declare our default values. Now, [COUGH]
>> Kyle Simpson: The question that we wanna pose now is, what would happen if I did that?
[00:01:51] Or if I did return undefined or I had no return at all? What do you think would happen?
>> Speaker 2: Null be undefined.
>> Kyle Simpson: So, if a null value or an undefined value came back over here. Always think about it in terms of the processing null. If temp was null or undefined over here, and then we tried to say tmp
[0], what would happen?
[00:02:26]
>> Speaker 3: An script error.
>> Kyle Simpson: We get a JavaScript error. It's not a reference error, it's called a type error, because we'd be trying to access a property and zero property in position on the null, or undefined value and that's not allowed. So we'd get an illegal operation, right?
[00:02:41] So the same is going to be true here. If you have a pattern that's expecting an array and you don't get back an array, or at least something that can be accessed like an array, you're gonna get an error. So, one way to guard against that,
>> Kyle Simpson: Is to say foo or an empty array.
[00:03:02] Because if I got myself an empty array back, then it would be totally okay for me to do a pattern, an array de-structuring against an empty array, I just end up with a undefined, b 42 and c undefined. You follow me? Now, all the same caveats apply with this or here that if we are expecting to be able to get back, return back something like a false, or a null, or an undefined, this isn't the appropriate one, but in this particular case in de-structuring we've already said, we are expecting an array, which is always truthy.
[00:03:36] So, this pattern is pretty safe. We're not likely to run into any scenario, where the or is going to bite us and create a problem for us. It's pretty safe, because we're already saying, we expect an array. If you create a function that suppose to return false, you should expect for the pattern to fail.
[00:03:56] Cuz that's not a valid case. So, the or empty array here is a way of saying, hey, go ahead and just default to the empty array if that occurs, right? All right, now what about this? What happens if I have an array, the whole bunch of values in it?
[00:04:14] Maybe I want to account for the first three, I don't wanna gather the rest of them up into an array.
>> Kyle Simpson: ...args. Just exactly like we did in the parameter list, why is this a gather versus a spread?
>> Speaker 4: Because you're spreading it, groups.
>> Kyle Simpson: Because we're in an assignment context, aren't we?
[00:04:40] We're on the left hand side of an equals. So, I mean by assignment context, as opposed to a value context on the right hand side. We're in an assignment context, exactly like we are in a parameter list on the left hand side of an equals. So, a dot, dot, dot, used on the left hand side of an equals, anywhere on the left hand side of the equals, is going to be treated as a gather, as a rest, as opposed to a spread, okay?
[00:05:04] So here we're saying gather up all the rest of those values into an array called args. If we don't have any, args is simply an empty array, okay? Exactly the same as it would be in a parameter scenario.
>> Kyle Simpson: Now, I've used this with a var keyword, just because it's kind of easy and convenient, but it turns out the de-structuring is really just assignment.
[00:05:35] It's got actually almost nothing to do with declaration. It's kind of a shorthand that we kind of streamlined in the declaration, but if I already had an a, a b, a c and args, declared somewhere, I could do this assignment all by itself, it doesn't have to be paired with declaration, okay?
[00:05:53] So really the only constraint is that these things need to be things that would be a valid left hand side of an assignment, a valid, what we call, assignment target. So what about this? What if I had an o object.
>> Kyle Simpson: And I said, I wanna put all of these as properties in an object.
[00:06:21]
>> Kyle Simpson: Every one of those is valid assignment targets. So it's totally okay to array de-structure into a set of object properties if we want it. They just need to be valid things that could show up on the left hand side of an assignment.
>> Kyle Simpson: Questions so far?
>> Speaker 5: Are arrays the only things that did this pattern matching works?
[00:07:09]
>> Kyle Simpson: No, we also have object de-structuring, which we'll get to in just a moment.