Learn JS Object Destructor With Me 
Tags: javascript, node, webdev
Published: 2021-08-21 07:27:51

The new ES6 JS `Destructor` method allows to to extract properties and bind properties from objects.

It also allows you to extract several properties from a specific object and set a default value if the property does not exist.

so, let's dive in :D :D


#1. Why Object Destructor ? : 
Imagine you are trying to extract a property from an object and put it in a variable : 

```javascript
const coffee = {
    sugar : '3 teaspoon',
    coffeeBin : '1 teaspoon',
    milk : '100ml',
}


const sugar = coffee.sugar
const coffeeBin = coffee.coffeeBin;
const milk = coffee.milk;
// pretty messy right ? 

sugar; // '3 teaspoon'
coffeeBin; // '1 teaspoon'
milk; // '100ml'
```
so we are making a `coffee` and the requirements are the properties.

Here, the property value `coffee.sugar` is assigned as `sugar`, property `coffee.milk` is assigned as `milk`.

In such a way to access properties to an object will end up with a ["BoilerPlate Code"](https://en.wikipedia.org/wiki/Boilerplate_code#:~:text=In%20computer%20programming%2C%20boilerplate%20code,Such%20code%20is%20called%20boilerplate.). You have to call different variables for the objects property. By writing `const sugar = coffee.sugar` you have to mention `sugar` and so as the others.



![So much boiletPlate image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ridwhik1zpasm298em7.jpg)

Here is why **Destructor Method** comes to rescue you. With the method, you can assign and read variable without duplicating the property. And also , you can read multiple properties from the same object by just **ONE** statement !! 

#implementing Destructor Method: 
Lets refactor the above script and put our object destructor syntax. 

```javascript
const coffee = {
    sugar : '3 teaspoon',
    coffeeBin : '1 teaspoon',
    milk : '100ml',
}


const {sugar , coffeeBin , milk} = coffee
// BOOM ! 

sugar; // '3 teaspoon'
coffeeBin; // '1 teaspoon'
milk; // '100ml'
```
Here , the `const {sugar , coffeeBin , milk} = coffee` is the object **destructor syntax**. the `coffee.sugar` is defined as a new constant as `sugar` as well as `coffee.coffeeBin` , `coffee.milk`as `coffeBin` and `milk`.


####comparing the 2 approach to access the object properties : 
```javascript
const sugar = coffee.sugar
const coffeeBin = coffee.coffeeBin;
const milk = coffee.milk;  // very messy

// is equivalent to 

const {sugar , coffeeBin , milk} = coffee; // ooouuh yeah !
```
It is visible that object destructor syntax is much more handier because neither names nor the object is duplicated.

#2. Extracting A Property:
The basic syntax of object destructor is basically simple: 

```javascript
let {identifier} = object;
```
where `identifier` use to be the property name of the object. After destructering, the variable `identifier` should contain the value of the property of the `object`.

Lets bring the object destructuring in the example : 
```javascript
const coffee = {
    sugar : '3 teaspoon',
    coffeeBin : '1 teaspoon',
    milk : '100ml',
};

const {sugar} = coffee;

sugar; // '3 teaspoon'
```
The statement `const {sugar} = coffee` defines the variable `sugar` and initializes the variable with the value of `coffee.sugar` property.

#Extracting Multiple Properties : 


![whole OBject destructure in an image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a648c3j77ivok1gn2zp9.jpg)

extracting multiple properties using the destructuring method is easy. To destructure the object into multiple properties, enumerate as many properties as you like adding commas , in between

```javascript
const { identifier1, identifier2, ... , identifierN } = expression;
```

Where `identifier1`, `…`, `identifierN` are names of properties to access, and `expression` should evaluate to an object. After the **destructuring**, the variables `identifier1`, `…`, `identifierN ` contain corresponding properties values.

Lets do it again with the example:

```javascript
    const coffee = {
        sugar : '3 teaspoon',
        coffeeBin : '1 teaspoon',
        milk : '100ml',
    };
 

    const {sugar , coffeeBin , milk} = coffee;

    sugar; // '3 teaspoon'
    coffeeBin; // '1 teaspoon'
    milk; // '100ml'
```
Here , `const {sugar , coffeBin , milk} = coffee` created three variable containing the value of the specific properties from the `coffee` object

#4. Default Values : 
If the destructured property doesn't have the value specified, it will return `undefined`. Lets see: 
```javascript
const coffee = {
        sugar : '3 teaspoon',
        coffeeBin : '1 teaspoon',
        milk : '100ml',
    }
 

const {water} = coffee

water; //undefined
```

After returning `water` value , you will get undefined because the `water` property does not exist in the `coffee` object.

Fortunately, you can create new property using the distructure syntax. Here's the basic syntax:
```javascript
const { identifier = defaultValue } = expression;
```
Where `identifier` is the property and the `expression` should evaluate to an object .After distructuring, the `identifier` contains the property value which assigned as `defaultValue` if the `identifier` property doesn't exists

In comparison , here is the the default value feature : 
```javascript
const identifier = expression.identifier === undefined ? 
                defaultValue : expression.identifier;

```

Let's change the sample code and create a new property of the `coffee` object

```javascript
const coffee = {
        sugar : '3 teaspoon',
        coffeeBin : '1 teaspoon',
        milk : '100ml',
   }

const {water = "100ml"} = coffee;

water; // 100ml
```

now , instead of being undefined, the constant `water` is default to `"100ml"`.

#5. Aliases :
If you want to use another variable name of the object property. You can use the Aliases feature of Destructuring.

```javascript
const { identifier: aliasIdentifier } = expression;
```

`identifier` is name of the object property, `aliasIdentifier` is the variable name you would give and `expression` should evaluate to an object.

Here's the example of using aliases in the given sample : 
```javascript
const coffee = {
        sugar : '3 teaspoon',
        coffeeBin : '1 teaspoon',
        milk : '100ml',
   };

const {milk : cowjuice} = coffee;

cowjuice; // '100ml'
```
looking at the `const {milk : cowjuice} = coffee`, the destructring defines a new constant named `cowjuice` and assigns it to the value of `coffee.milk`


#Summury:

There are also many things you can do with the destructuring method , like extracting **dynamic property**.Maybe I'll cover that up on a new blog.

The object destructuring method is a really effective syntax to extract one property or multiple property from an object value, I usually use this for extracting multiple property in just one statement and use the Aliases feature.

Hope you find the blog useful and I can clarify the basic of the destructuring syntax