DEV Community

Cover image for Tips: Object Destructuring in JavaScript ES6
Sakib Ahmed
Sakib Ahmed

Posted on

Tips: Object Destructuring in JavaScript ES6

Suppose you have a person object with TWO prperties:

let person = {
   firstName: 'Devv',
   lastName: 'Sakib'
}
Enter fullscreen mode Exit fullscreen mode

Before ES6, when you want to assign the variables to the properties of the person object, you typically do like this:

let firstName = person.firstName
let lastName = person.lastName
Enter fullscreen mode Exit fullscreen mode

But but but, ES6 make it more easier! There are an alternative way to assign properties of an object. Let's see

let { firstName: fName, lastName: lName } = person
Enter fullscreen mode Exit fullscreen mode

Here, firstName and lastName prop are assgined to fName and lName variables.

Syntax:

let { 
    property: variable, 
    property: variable 
    } = object
Enter fullscreen mode Exit fullscreen mode

Notice that the property name is always on the left whether it is object literal or object destructuring syntax.

TO KNOW: If the variables have the same name as the properies of the object, you can make the code more concise as follows:

let { firstName, lastName } = person

console.log(firstName) // "Sakib"
console.log(lastName) // "Smith"
Enter fullscreen mode Exit fullscreen mode

In this examples, we declared two variables firstName and lastName, and assigned the properties of the object to the variables in the same statement.

When you assign a property that does not exist to a variable using the object destructuring, the variable is set to undefined.

Example:

let { firstName, lastName, middleName } = person

console.log(firstName) // "Sakib"
console.log(lastName) // "Smith"
console.log(middleName) // undefined
Enter fullscreen mode Exit fullscreen mode

The middleName property does not exist in the person object, that's why middleName is undefined

Default Values

You are able to assign a default value of the variable when the property of an object doesn't exist.

Example:

let person = {
   firstName: 'Devv',
   lastName: 'Sakib'
}

let { 
    firstName, 
    lastName, 
    middleName = ''
    } = person

console.log(middleName) // ''
Enter fullscreen mode Exit fullscreen mode

In this example, we assigned empty string to the middleName variable when the person object doesn't have the middleName property.

However, when the person object has middleName property, the assignment works as usual:

Example:

let person = {
   firstName: 'Devv',
   lastName: 'Sakib',
   middleName: 'IDK'
}

let { 
    firstName, 
    lastName, 
    middleName = ''
    } = person

console.log(middleName) // 'IDK'
Enter fullscreen mode Exit fullscreen mode

Destructuring a null object

If you know, a function may return an object or null in some case.

const person = () => {
   return null
}

let { fname } = person()

Enter fullscreen mode Exit fullscreen mode

But you can't destructure an null object. The code will throw a TypeError

TypeError: Cannot destructure property 'fname' of 'person()' as it is null.
Enter fullscreen mode Exit fullscreen mode

To solve this, you can use the OR(||) operator to fallback the null object t an empty object.

let { fname } = person() || {}
Enter fullscreen mode Exit fullscreen mode

Now, fname will be undefined

There are so many destructuring, will write later. See yaa

Top comments (0)