Super simple to set Default Parameters with ES6 πβ¬ The old way was to use a ternary operator to assign the default value if it was undefined. With ES6, you can set the default value right inside the function parameters π
// Old Way
function beverage(drink) {
drink = drink !== undefined ? drink : 'π΅';
}
// β
ES6 Way
function beverage(drink = 'π΅') {}
When the default value kicks in π₯Ύ
The default value only kicks if no value or undefined
is passed. Let's take a look:
function beverage(drink = 'π΅') {
return drink;
}
beverage(); // 'π΅'
beverage(undefined); // 'π΅'
undefined
vs other falsy values
Does the default value kick in for other falsy values? Great question! Let's take a look:
function beverage(drink = 'π΅') {
return drink;
}
beverage(false); // false
beverage(null); // null
beverage(NaN); // NaN
beverage(0); // 0
beverage(''); // ""
βοΈThe answer is NO. The default value only kicks in for undefined
. All other times, the value that you passed through will take effect π
Setting Default Parameter for ALL falsy values
If you want to capture all falsy value, you might want to do something like this instead:
function beverage(drink) {
drink = drink || 'default value';
return drink;
}
beverage(); // 'default value'
beverage(undefined); // 'default value'
beverage(false); // 'default value'
beverage(null); // 'default value'
beverage(NaN); // 'default value'
beverage(0); // 'default value'
beverage(''); // 'default value'
Default Parameter with Destucturing
You can also set default parameter with destructuring.
Object Destructuring
function beverage({ name } = { name: 'π΅' }) {
return name;
}
beverage(); // 'π΅'
beverage({ name: 'π₯€' }); // 'π₯€'
Array Desructuring
function color([black] = ['#000']) {
return black;
}
color(); // #000
color(['#222']); // #222
Why is Default Parameter important for destructuring
Setting a default parameter is super important for destructuring. That's because if you try to destructure something that is undefined
, it will throw an error. Yes, error is sometimes good because it's an indicator something is broken with your app so you better fix it. But sometimes, you prefer it fail gracefully so not to break your app.
Your app will crash if you try to destructure a value that is undefined
.
const person = undefined;
const { name } = person;
// β TypeError
But this is okay. You app will not crash.
const person = {};
const { name } = person;
// β
undefined (no crash)
Fixing TypeError
in function with default parameter
Now let's apply this knowledge in our function world where we are destructuring our argument.
function beverage({ name }) {
return name;
}
beverage();
// β TypeError
That's why you will see a lot of functions setting a default parameter to avoid this crash.
function beverage({ name } = {}) {
return name;
}
beverage();
// β
undefined (no crash)
Does Default Parameter work with Arrow Functions
You bet! Default parameters can also be applied to arrow functions.
const beverage = (drink = 'π΅') => drink;
In JavaScript, arrow functions have implicit and explicit returns. So the above is the same as:
const beverage = (drink = 'π΅') => {
return drink;
};
To learn more about arrow functions, you can read my arrow function cheatsheet
Using parameter in your default parameter
Here's something really cool you could do! You can access earlier parameter in your later default parameter.
function metric(kilogram, gram = kilogram * 1000) {
return gram;
}
metric(0.5); // 500
metric(0.5, 200); // 200
β οΈ Note: The parameters are processed left to right. So you won't be able to access later parameters in earlier paramters. So don't do this π
ββοΈ
function metric(gram = kilogram * 1000, kilogram) {
return gram;
}
metric(undefined, 200);
// β ReferenceError:
Best Practice
If you're following Airbnb's JavaScript Style Guide, you should:
Always put default parameters last.
// β bad
function handleThings(opts = 'default', name) {}
// β
good
function handleThings(name, opts = 'default') {}
Community Question
I listed this as the old way:
function beverage(drink) {
drink = drink !== undefined ? drink : 'π΅';
}
But many of you have stated the more popular old way is this:
function beverage(drink) {
drink = drink || 'π΅';
}
I picked the former way as the old way because it more closely aligns with the new way of setting default parameter. Remember I mentioned that the default parameter only kicks in when it's undefined
. The latter way will capture ALL falsy values. The subtitles of coding, am I right π
Resources
- MDN Web Docs: Default Parameters
- Stack Overflow: Set a default parameter value for a JavaScript function
- Originally published at www.samanthaming.com
Thanks for reading β€
Say Hello! Instagram | Twitter | Blog | SamanthaMing.com
Top comments (3)
Thanks, I didn't know that I could set default values for destructured parameters like this-
And this-
Thanks for sharing these two useful tips with us.
There is a newer way, but it also captures
null
. It needs to be compiled first, I think.oh cool! let me add that to my notes. thanks for sharing!