What is object destructuring in JavaScript?
Tags: javascript, beginners, programming, tutorial
Published: 2021-10-15 14:08:33

*This post was originally published on [webinuse.com](https://webinuse.com/what-is-object-destructuring-in-javascript/)*

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.
``` javascript
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. 

``` javascript
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.

``` javascript
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.

``` javascript
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.

``` javascript
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.

``` javascript
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:

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

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

``` javascript
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](https://twitter.com/AmerSikira), or you can read some of my other articles like [](https://webinuse.com/css-positions-the-complete-guide/)[How to use localStorage API](https://webinuse.com/how-to-use-localstorage-api/).