loading...

Destructuring JavaScript objects with default value

varundey profile image Varun Dey ・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

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

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

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

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

  • First we destructure properties of the object
const {a, b, c} = obj;
  • Next, we assign variables to these properties
const {a: A, b: B, c: C} = obj;
  • 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;

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

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. ✌️

Posted on by:

varundey profile

Varun Dey

@varundey

Software Engineer, Grofers. Past SWE Symantec. Passionate about learning how things work. Full stack JS dev. Loves all things web.

Discussion

markdown guide
 
 

Great article Varun, you really explained this concept well!