More Advanced Destructuring Features

3 min readJun 2, 2021

In this post we will discuss more advanced destructuring topics, first lets look back again to what destructuring is. Destruturing is basically breaking down complex structures into, easier to read and understand, simpler parts. This complex structure is usually an object or array. In my previous destructuring post I spoke about basic properties of destruturing like basic values and the syntax, but that just scratched the surface. There is much more we can do with this to help with writing your code for your application. You can access the basic features of destructuring here.

Aliases

With destructuring we can create variable with different names than the properties, we call these aliases which is a nice feature of object destructuring. The syntax for alias looks like the example below.

const { identifier: aliasIdentifier } = expression;

identifier stands for the name of the property to access
alaisIdentifier stands for the variable name
expression evaluates to an object

After destructuring, the variable aliasIdentifier contains the property value. Below is an example.

const hero = {
  name: 'Iron Man',
  realName: 'Tony Stark'
};const { realName: secretName } = hero;
secretName; // => 'Tony Stark'

Extracting properties from nested objects

In all the examples we’ve looked at so far, the objects were simple primitive data types such as strings, numbers, etc. But in the instance where an object is nested, which is a property itself is an object. With this we can still destructure the object and access its properties by going deeper into the object. Below is the the syntax example.

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp stands for the name of the property that is holding the nested object.
identifier stands for the property name that you want to access from the nested object.
expression evaluates to an object

Bellow shows how you can go deeper and deeper, it is infinite the amount of depth we can go to.

const { prop1: { prop2: { prop3: { .... } } } } = object;

Below is an example with the object hero.

const hero = {
  name: 'Iron Man',
  realName: 'Tony Stark,
  address: {
    city: 'Los Angeles'
  }
};// Object destructuring:
const { address: { city } } = hero;
city; // => 'Los Angeles'

Dynamic name property extraction

With destructuring we also have the ability to extract variable properties with a dynamic name. Below we see a syntax example.

const { [propName]: identifier } = expression;

propName stands for the expression should evaluate to a properties name.
identifier stands for the name of the property to access
expression evaluates to an object you want to destructure.

Below we look at the hero example.

const hero = {
  name: 'Iron Man',
  realName: 'Tony Stark'
};const prop = 'name';
const { [prop]: name } = hero;
name; // => 'Iron Man'

Rest object after destructuring

We use rest to collect the remaining properties after destructuring. Below we look at the syntax.

const { identifier, ...rest } = expression;

rest stands for a plain object with the remaining properties.
identifier stands for the name of the property to access
expression evaluates to an object you want to destructure.

Below we wil use this with the hero example.

const hero = {
  name: 'Iron Man',
  realName: 'Tony Stark'
};const { name, ...realHero } = hero;
realHero; // => { realName: 'Tony Stark' }

Summary

So these are the advanced features of destructuring that you can use to help restructure your application code. I hope this was helpful for you and you can use it in the future.