I just launched a new course on ES6! Use the code WESBOS for $10 off.

Strengthen your core JavaScript skills and master all that ES6 has to offer. Start Now →

Setting Default Values with JavaScript’s Destructuring

There’s one last thing we need to know about destructuring objects, and that is the ability to set defaults. This one’s a little bit confusing, so bear with me here and we’re going to circle back for another example later on in a couple of videos over at ES6.io.

When you destructure an object, what happens if that value isn’t there?

const settings = {
    speed: 150
}
const { speed, width } = settings; 
console.log(width);

What is width? It’s undefined because we create the variable, but it’s not able to be set to anything.

With destructuring we can set defaults, or fallback values so that if an item is not in the object (or Array, Map, or Set) it will fall back to what you have set at the default.

This syntax is a little hard to read:

const settings = {
    speed: 150
}
const { speed = 750, width = 500 } = settings;
console.log(speed); // 150 - comes from settings object
console.log(width); // 500 - fallback to default

Now if the speed or width properties don’t exist on our settings object, they fallback to 750 and 500 respectively.

Careful: null and undefined

One thing to note here is that this isn’t 100% the same as this old trick used to fallback when settings.speed is not set:

const mySpeed = 0;
const speed = mySpeed || 760; 
console.log(speed); // 760!

Why? Because ES6 destructuring default values only kick in if the value is undefined. null, false and 0 are all still values!

const { dogName = 'snickers' } = { dogName: undefined }
console.log(dogName) // what will it be? 'snickers'!

const { dogName = 'snickers' } = { dogName: null }
console.log(dogName) // what will it be? null!

const { dogName = 'snickers' } = { dogName: false }
console.log(dogName) // what will it be? false!

const { dogName = 'snickers' } = { dogName: 0 }
console.log(dogName) // what will it be? 0!

Combining with Destructuring Renaming

In my last post we learned that we can destrucutre and rename varaibles at the same time with something like this:

const person = {
  first: 'Wes',
  last: 'Bos',
};

const { first: firstName } = person;
console.log(firstName); // Wes

We can also set defaults in the same go. Hold onto your head because this syntax is going to get funky!

const person = { first: 'Wes', last: 'Bos' };
const { middle: middleName = 'Super Rad' } = person;
console.log(middleName); // 'Super Rad'

Woah – let’s step through that one!

  1. First we create a new const var called middleName.
  2. Next we look for person.middle. If there was a person.middle property, it would be put into the middleName variable.
  3. There isn’t a middle property on our person object, so we fall back to the default of Super Rad.

Cool! Make sure to check out ES6.io for more like this!

This entry was posted in ES6, JavaScript. Bookmark the permalink.

12 Responses to Setting Default Values with JavaScript’s Destructuring

  1. Brian Mayers says:

    Thank you for the great breakdown. The information is greatly appreciated!

  2. Pingback: A Dead Simple intro to Destructuring JavaScript Objects | Wes Bos

  3. Dzmitry Yurtsevich says:

    Big thanks for the important info, but it’s not absolutely accurate, sorry. Written above is true for cases when value to be extracted is 0, false or null. But not true for case when it’s undefined. In last case default value from destructuring assignment will be applied. At least such is behavior in last Chrome and FF.

  4. Nick Burke-Gaffney says:

    You mean to be console-logging dogName not dog, right?

  5. ac says:

    2 things I am confused with one of your examples.

    this example
    https://i.gyazo.com/983fb6756d8fca70d2e62bd7efae9a92.png

    1. should the `dog` var names be `dogName`?
    2. if I run it after changing to `dogName`, each one gives “snickers” instead of the expected result in the comments for each line
    ex: https://i.gyazo.com/652bf24e657536f74700356b616644e6.png
    ex: https://i.gyazo.com/4ba593e85aa8ef062a760fd5d6347b09.png (given each an individual name)

    Not being sarcastic, but am I missing something here?
    *my English is not my first language

    Thanks

    P.S. Love your youtube videos and so on. They are all great!

  6. Fadi Wissa says:

    Thanks for the great post.

    In the following: the answer should be “undefined”, not “snickers”… right?
    You mentioned that undefined, null, 0 and false are actual values and thus the default fallback would not be used.

    const { dogName = ‘snickers’ } = { dogName: undefined }
    console.log(dogName) // what will it be? ‘snickers’!

    Cheers…

  7. xgqfrms says:

    Great article & Thanks for your time!

  8. Alberto De Lucca says:

    Hey Wes, I think there’s something wrong with one of the examples. Re: “Why? Because ES6 destructuring default values only kick in if the value is not present. undefined, null, false and 0 are all still values!” it should note that a default value *will* kick in if the value is undefined (as per your own example returning ‘snickers’).

  9. Kessir Adjaho says:

    “…Because ES6 destructuring default values only kick in if the value is not present. undefined, null, false and 0 are all still values!”. That sentence is a bit confusing.
    I don’t think ‘undefined’ should be in that list with null false and 0. ‘Undefined’ is not really a ‘value’ since it will trigger the default value.

  10. Josh N says:

    Console.log would return “undefined”, no? (4th example in article)
    const { dogName = ‘snickers’ } = { dogName: undefined }
    console.log(dogName) // what will it be? ‘snickers’!

  11. Adam Wells says:

    Hey Wes,

    Your explanations are excellent! One thing I have a question about in this article though. Where you state, “Why? Because ES6 destructuring default values only kick in if the value is not present. undefined, null, false and 0 are all still values!” and then have the following code example. I notice how all of the examples return the present value except for the first, returning the name ‘snickers’. I am curious why because in the earlier quote you say undefined is a value as well so I would assume it would be considered a present value passing to the console as undefined rather than ‘snickers’. I hope I explained my question well enough for you to understand, thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *