Destructuring JS

Due to this quarantine, I’ve had much more free time than before so I’m going to be writing about topics I’ve either been asked in recent technical interviews or topics that helped students during my time as a PM. Below we’ll talk about different types of destructuring.

Destructuring was introduced to JavaScript in ES6 and allows us to make code more readable by assigning object values to variables. Destructuring does this by allowing us to extract values from objects. 2 more sentences about how JS lets us do this or why its useful maybe…

Below is an example of how we’d assign values prior to ES6

const character = {
  firstName: 'Spongebob',
  lastName: 'Squarepants',
  age: 33,
};

const firstName = character.firstName;
const lastName = character.lastName;
const age = character.age;

We’re repeating our actions several different times by writing our object this way. Lets destructure this so that our code is more concise.

const { firstName, lastName, age, country } = character;

So what is happening above? First, we create these variables in memory: firstName, lastName, and age. Then, with our new object, we look for the associated values in the character object and assign them to our created variable, country.

But what if we don’t want our variables to have the same name as the keys of objects? Here is how that would look.

const { firstName: name, lastName: surname } = character;

In the above sample, we’re creating two variables, name and surname and assigning the values of character.firstName and character.lastName. This syntax allows for more flexibility, but is less concise.

NESTED DESTRUCTURING

In another example, we want to save the values of the address of our character into three variables: street, city, and state. There are several ways we can go about it.

const character = {
  firstName: 'Spongebob',
  lastName: 'Squarepants',
  age: 33,
  address: {
    street: '124 Conch Street',
    city: 'Bikini Bottom',
    state: 'CA',
  },
};

Here is the dot notation way:

const street = character.address.street;
const city = character.address.city;
const state = character.address.state;

We could also restructure values while accessing the address object with dot notation:

const { street, city, state } = character.address;

Or…we can use nested destructuring:

const {
  address: { street, city, state },
} = character;

console.log(street, city, state); // 124 Conch Street, Bikini Bottom, CA
console.log(address); // address is not defined

In the character object access the address value, which is an object. The variables street, city and state are created and assigned the associated values in the address object. Also, the referenced parents are not created as variables, only the last nested properties.

If we want to create a reference to the address value, we’d just use a comma.

const {
  address,
  address: { street, city, state },
} = character;

console.log(street, city, state); // 124 Conch Street, Bikini Bottom, CA
console.log(address); // Object

Destructuring lets us write D(on’t)R(epeat)Y(ourself)er, more readable code when creating references and I personally enjoy it more than dot notation