Object destructuring – JavaScript

Summary

const user = {
    name: 'John',
    age: 18
};

const {name, age} = user;

Details

Object destructuring is a short way of splitting the values in an object into separate variables.

To destructure an object, first create an object.

const user = {
    name: 'John',
    age: 18
};

Next, write the variables you want to use wrapped in curly braces and then separated by a comma. The variable names should match the names of the properties inside the object.

const user = {
    name: 'John',
    age: 18
};

const {name, age}

Next, write an equals sign followed by the name of the object and a semicolon.

const user = {
    name: 'John',
    age: 18
};

const {name, age} = user;
// name = 'John'
// age = 18

Demo

Exercises

Try the following statements in the console:

const user = {
    name: 'John',
    age: 18
}

const {name, age} = user
name = 'John'
age = 18

References

Destructuring assignment on MDN

Back to: JavaScript Reference > JS Data Types