DEV Community 👩‍💻👨‍💻

Cover image for Javascript ES6: Destructuring with default values
Adrian Bece for PROTOTYP

Posted on • Originally published at blog.prototyp.digital

Javascript ES6: Destructuring with default values

This is a short, but very useful code snippet for destructuring variables with default values (if the value is undefined). Very useful snippet for avoiding errors caused by undefined variables.

In the following example, the options object is being destructured.

const {
    valFirst = 1,
    valSecond = "hello",
    valThird = false
  } = options;
Enter fullscreen mode Exit fullscreen mode

If a destructured value doesn't exist within the object, it will be assigned a default value. If it does exist within the object, it will be assigned the value from the object.

Thank you for taking the time to read this post. If you've found this useful, please give it a ❤️ or 🦄, share and comment.

Top comments (3)

Collapse
athimannil profile image
Muhammed Athimannil

helpful information 👌

Is it possible to rename the destructured variable with the default value?

does it work?

const { amount  =  0 : bill } = options;
Enter fullscreen mode Exit fullscreen mode
Collapse
rafaacioly profile image
Rafael Acioly

This is not possible unfortunately

Collapse
athimannil profile image
Muhammed Athimannil

Got it

const  { amount : bill = 0 } = options;
Enter fullscreen mode Exit fullscreen mode

🌚 Life is too short to browse without dark mode