πŸ”₯ NEW Code Tidbit Every Week πŸ”₯

# Setting Default Parameters

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 Destructuring

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 to 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 parameters. 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 subtleties of coding, am I right πŸ˜‚

# Community Input

@Ma_x0M: Just to mention. As of ES 2019 you can use Nullish coalescing for default values. For example:

const foo = 'value' ?? 'default string'; (meaning if foo is undefined or null fall back to the default string. More information:

MDN Web Docs: Nullish Coalescing Operator

@patarapolw: There is a newer way, but it also captures null. It needs to be compiled first, I think.

drink = drink ?? '🍡';

# Resources


Related Tidbits