DEV Community

Cover image for What is object destructuring in JavaScript?
Amer Sikira
Amer Sikira

Posted on • Originally published at webinuse.com

What is object destructuring in JavaScript?

This post was originally published on webinuse.com

Object destructuring means: extracting values, by key, from existing object.
Object destructuring was introduced in ES6. Prior to that, when we wanted to extract some values
from object it required a lot of typing. As a result, we had to do additional work, and often
this lead to mistakes.

One example of extracting data the old way would be following example.

let obj = {
    id: 123, 
    name: "John",
    surname: "Doe"
}

let name = obj.name;
let surname = obj.surname;

Enter fullscreen mode Exit fullscreen mode

With ES6 object destructuring became a lot easier. It uses the following syntax: const {properties} = obj.
We can use as many properties as we want, as long as those properties exist inside an object.
If we use key that does not exist in object, it will return undefined.

When we use destructuring method, every property that we pass inside {} will be created as variable.

let obj = {
    id: 123, 
    name: "John",
    surname: "Doe"
}

let {name, surname} = obj;

console.log(name);
console.log(surname);

//Result: 
//John
//Doe
Enter fullscreen mode Exit fullscreen mode

Default value in object destructuring

If we are not sure whether some key will be defined we can pass default values, like in the example below.

let obj = {
    id: 123, 
    name: "John",
    surname: "Doe"
}

const {name, surname, age=18} = obj;

console.log(name);
console.log(surname);
console.log(age);
//Result:
//John
//Doe
//18

Enter fullscreen mode Exit fullscreen mode

How to use alias

Alias means substitute name for key without modifying the key. This is useful when we have variables with similar, or same
names as object keys, so we want to differentiate them.

let obj = {
    id: 123, 
    name: "John",
    surname: "Doe"
}

const {name: nameAlias} = obj;

console.log(nameAlias);
//Result:
//John

Enter fullscreen mode Exit fullscreen mode

Extracting properties from nested objects

Not all objects are created with one level. Sometimes we use objects with multiple levels. By using object destructuring we can
extract data from all levels.

let obj = {
    id: 123,
    name: {
        firstName: "John",
        lastName: "Doe"
    }
}

let {name: {firstName, lastName}} = obj;
console.log(firstName);
console.log(lastName);

//Result:
//John
//Doe
Enter fullscreen mode Exit fullscreen mode

Dynamic key object destructuring

Sometimes we need to destructure object where we do not know property name in advance, but it is known at runtime.
We can use object destructuring for that, also.

let obj = {
    id: 123,
    name: "John",
    surname: "Doe"
}
let prop = 'name';
let {[prop]: name} = obj;
console.log(name);

//Result:
//John

Enter fullscreen mode Exit fullscreen mode

Combination of rest operator and object destructuring

If we need to separate some properties from the rest of the object, but we also need the rest of the object, we can use rest (...) operator.ž
Syntax for destructuring object this way is as following:

let {identifiers, ...rest} = obj.

Enter fullscreen mode Exit fullscreen mode

After we destructure object this way, identifier(s) contain property value, while ...rest contains remaining properties.

let obj = {
    id: 123,
    name: "John",
    surname: "Doe"
}

let {id, ...names} = obj;
console.log(id);
console.log(names);

//Result:
//123
//{name: 'John', surname: 'Doe'}

Enter fullscreen mode Exit fullscreen mode

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like How to use localStorage API.

Top comments (2)

Collapse
 
ddasb profile image
Damien Da Silva Bregieiro

Hello, nice article !

I think you should also talk about destructuring Arrays since it's pretty similar ;)

Collapse
 
amersikira profile image
Amer Sikira

That is something I have intention to do in the next few articles.

Thank you for your appreciation and support. Really appreciate it.