What is object destructuring in JavaScript?

#javascript #beginners #programming #tutorial

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;

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

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

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

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 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

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.

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'}