Learn JS Object Destructor With Me

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 :

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

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.

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.milkas coffeBin and milk.

comparing the 2 approach to access the object properties :

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:

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 :

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 :

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

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:

    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:

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:

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 :

const identifier = expression.identifier === undefined ? 
                defaultValue : expression.identifier;

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

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.

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 :

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