What is object destructuring in JavaScript?

Object destructuring means: extracting values, by key, from an existing object. Object destructuring was introduced in ES6. Prior to that, when we wanted to extract some values from an 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 the following example.

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

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

console.log(name); //John
console.log(surname); //Doe

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 the key that does not exist in the object, it will return undefined.

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

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

let {name, surname} = obj;

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

//Result: 
//John
//Doe

Default value

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

How to use an alias

Alias means substitute name for key without modifying the key. This is useful when we have variables with similar, or the 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

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

Dynamic key object destructuring

Sometimes, we need to destructure objects where we do not know the property name in advance, it only becomes known at runtime. We can find a solution for that, either.

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

//Result:
//John

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. The syntax for this type of destructuring is as follows:

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

After we destructure the 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'}

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.