Destructuring Objects in ES6

Object destucturing is new (relatively) Javascript syntax that allows us to store objects properties into unique variables.

An object in Javascript looks like this;

    const me = {
      firstname: "seyi",
      surname: "adeleke"
    };

Prior to ES6 the only way to access the firstname property in the me object is by creating a new variable and then assigning it using the objectName.propertyName or objectName["propertyName"] syntax like so;

    const firstname = me.firstname;
    const surname = me.surname;

This is all well and good, but what if we had a more complicated object with deeply nested objects as properties. The object below is nested two levels deep.

    const myObject = {
      property1: {
        innerProperty1: {
          key: 'value',
        }
      }
    }

To access the key property in the object above we would need to write a chained expression this.

  const key = myObject.property1.innerProperty1.key

This could be further complicated if we needed to check if key exists before assigning it. We would then have to write.

    const key = myObject.property1.innerProperty1.key && myObject.property1.innerProperty1.key

You can see how this can get ugly very quickly. Destructuring helps us to solve this problem using the following syntax.

    const {firstname, surname} = me;
    console.log(firstname); // 'seyi'
    console.log(surname); // 'adeleke'

In the code above we create a new object on the left-hand side { firstname, surname } which is a list of variable names. We can then use those variables in the rest of our code.

What we’re technically doing is creating a new object using the initialiser syntax. In line 1 of the code below, the key on the left is the property from the initial object we’re de-structuring and the value on the right is the variable we’re storing the value in. Since both variables are named the same we can then shorten it to what we have in line 2.

    { firstname: firstname }
    {firstname}

Knowing this, we can now assign a property with another name like so;

    const { firstname: fName, surname } = me;
    console.log(fName); // 'seyi'

Destructuring a nested object follows the same rules. Using the complex object we have above as an example. We can pull out the key variable like this.

    const {
              property1: {
                innerProperty1: {
                    key: k
                  }
              }
          } = myObject;
    console.log(k); // 'value'

While destructuring we can also set a default value for an object property. This means that the new variable created would be assigned the default value if the property we’re accessing does not exist in the object. An example of that is given below.

    const me = {
      surname: 'adeleke'
    }

    const {firstname: fName = "seyi", surname} = me;
    console.log(fName); // 'seyi'

Summary

• Destructing lets us unpack objects properties into variables

• Destructuring uses the following syntax;

  const { property: newVariable = defaultValue } = myObject;
  console.log(newVariable); // defaultValue