Check out a free preview of the full ES6: The Right Parts course:
The "Default Values" 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:

Prior to ES6, JavaScript developers needed to use conditional statements to create default values for a function’s parameters. In ES6, default parameter values can be specified in the function’s signature. Kyle demonstrates how to create default values and also explains the difference between null and undefined.

Get Unlimited Access Now

Transcript from the "Default Values" Lesson

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

[00:00:04]
>> Kyle Simpson: From here on, we're gonna try to do sort of before and after comparisons. So what I'm really do is just actually split my screen here. And we'll try to have kind of a before and after of each of these features that we discuss. So we'll start by talking about this kind of scenario which is a function that receives a parameter that we wanna give essentially some kind of default value too and you've probably seen something kind of like this.

[00:00:39] And we've seen that before using the OR operator this is kind of referred to as the default value idiom or the default parameter idiom. Usually, you see that at the top of the function so you see one of those lines for each one of the parameters that you wanna give some default value too.

[00:00:58] For example, pass in something like foo without anything we know X is gonna end up as 42. But what happens if we pass in foo of 0? Does x end up a 0 or does it end up as 42?
>> Speaker 3: [INAUDIBLE]
>> Kyle Simpson: If you aren't really aware yet of what's going on with or operator it does a truthy test on the first argument, on the first operand.

[00:01:20] And if it's true or truthy, it returns that operand, otherwise, it returns the other operand. So 0 is a falsey value, meaning that it will fail and end up returning 42 value, okay? So we can't affirmatively pass in something that's falsey like 0, null, undefined, etc. So really technically, the long form the not cheating form of this is to say if X is not equal to undefined.

[00:01:49] Then use X otherwise, you use the default value, okay? That's really how you write the full version of that default value ADM. So, if we pass in 0 now of course we're gonna get 0, if we pass a null. If we passing through without anything we get 42.

[00:02:10] If we also pass in undefined, we're still gonna get 42. So undefined in this case becomes the empty value and everything else including all becomes an actual affirmative value that we care about. Undefined means I'm not passing anything here it's like a placeholder, okay? My recommendation is to try to treat undefined in all is indistinguishable except in this particular case we.

[00:02:35] We need to distinguish between undefined in also that's what this idiom does, okay? The long form of that is what we would refer to as the imperative form. We're telling JavaScript how to compute the default value. Rather than leading with the default values matter fact the default values all the way down here at the end.

[00:02:56] So somebody reading through this code for the first time unless they recognize the ADM. They're gonna have to read through all of that and get to the end visually before they understand what the default value this. So when we set up earlier at the beginning of the workshop this notion of imperative versus declarative that's what we're gonna see here.

[00:03:12] And a lot of these side by side comparisons, the imperative form versus the new declarative form. In the S6, we now have a declarative form which allows us to specify that default value right inside the function signature, okay? So we don't need to do any of that imperative processing or telling JavaScript if it comes in as undefined or missing.

[00:03:36] Go ahead and apply the default value to it. So in this case, if we pass in foo of 0 we get 0, if we pass in null we get null, if we don't pass in anything we get the 42. If we pass in undefined we also get the 42, okay?

[00:03:51] What do think happens if I do this? Foo.apply. Don't care about my this, what happens if I apply an empty array to the arguments list of foo? What's x gonna be?
>> Speaker 3: 42.
>> Kyle Simpson: 42, what happens if I apply one with an empty slot in it?
>> Speaker 3: 42.

[00:04:11]
>> Kyle Simpson: Still gonna be 42. In all those cases, we end up effectively passing in undefined, which then triggers the default algorithm, okay? So pretty straightforward, we now have the ability to declare our default values.