DEV Community

loading...

Destructuring JavaScript objects with default value

Varun Dey
Software Engineer, Grofers. Past SWE Symantec. Passionate about learning how things work. Full stack JS dev. Loves all things web.
・2 min read

Originally posted at https://varundey.me/blog/destructuring-and-default-values/

Destructuring introduced in JavaScript ES6 is a nifty trick to scoop out properties directly from an object as variables.

const obj = {
    a:1,
    b:2,
    c:3
};

const {a, b, c} = obj;

console.log(a, b, c); // 1 2 3
Enter fullscreen mode Exit fullscreen mode

Destructure and assign default values - the naive way

But what if you have to do some validation checks on your destructured properties before doing any operation

const {a, b, c} = obj;

if(typeof a === 'undefined'){
    // assign a to something
}

if(typeof b === 'undefined'){
    // assign b to something
}

if(typeof c === 'undefined'){
    // assign c to something
}

// start the actual work
Enter fullscreen mode Exit fullscreen mode

Destructure and assign default values - the JavaScript way

Though it works perfectly fine but it is boring and redundant. What if we could make use of default values (just like default arguments in functions) right at the time of destructuring objects so that our unpacked property is never undefined.

const obj = {a: 1, b: 2};

const {
    a = 'foo',
    b = 'bar',
    c = 'baz',
} = obj;

console.log(a, b, c); // 1 2 baz
Enter fullscreen mode Exit fullscreen mode

Easy right? You just need to assign the values as and when you unpack it.

Destructure, rename and assign default values

Neat! But what if we want to rename a parameter and set a default value to it? Pay attention.

const obj = {a: 1, b: 2};

const {
    a: A="foo",
    b: B="bar",
    c: C="baz"
} = obj;

console.log(A, B, C); // 1 2 baz
Enter fullscreen mode Exit fullscreen mode

Confusing? I bet it is. Here are the steps to it.

  • First we destructure properties of the object
const {a, b, c} = obj;
Enter fullscreen mode Exit fullscreen mode
  • Next, we assign variables to these properties
const {a: A, b: B, c: C} = obj;
Enter fullscreen mode Exit fullscreen mode
  • After that, assign the default value as how we did in the previous example
const {a: A="foo", b: B="bar", c: C="baz"} = obj;
Enter fullscreen mode Exit fullscreen mode

And there you have it. Adding default values right at the time of unpacking objects.

Caveats

Please note that destructuring with default value only works when there is no property to unpack in the object i.e. the property is undefined. This means that JavaScript treats null, false, 0 or other falsy values as a valid property and will not assign default value to them.

const obj = {a: null, b: false, c: 0};

const {
    a = 1,
    b = 2,
    c = 3,
    d = 4
} = obj;

console.log(a, b, c, d); // null false 0 4
Enter fullscreen mode Exit fullscreen mode

I hope this was informative and will help you when you need to do something similar. Let me know what you think about this post in the comments below. ✌️

Discussion (3)

Collapse
jpcardoso89 profile image
João Paulo Cardoso

Great article!

Collapse
justageek profile image
Brian Smith

Great article Varun, you really explained this concept well!

Collapse
athimannil profile image
Forem Open with the Forem app