Destructuring objects and arrays in JavaScript

Destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays or properties from objects into distinct variables. This means we can extract data from arrays or objects and assign that data to variables.

You might be asking yourself, why would I do this? or how does this help me? Well, to answer your question, let's look at the examples below.

Destructuring Arrays

const list = ['Gabriel', 'Asakawa', 'Brazil'];
const name = list[0]; // Gabriel
const lastName = list[1]; // Asakawa
const country = list[2]; // Brazil

console.log(name, lastName, country); // Gabriel Asakawa Brazil

In the code above, I used a way of extracting elements from an array that works and used to be very common, but notice that I have to specify the position of each array element on a separate line. This makes the code more verbose.

Using destructuring, the code can be shortened — let's look at a few scenarios.

Basic

const list = ['Gabriel', 'Asakawa', 'Brazil'];
const [name, lastName, country] = list;

console.log(name, lastName, country); // Gabriel Asakawa Brazil

Using JS's destructuring feature, the code has fewer lines and is easier to read.

Skipping array elements

const list = ['Gabriel', 'Asakawa', 'Brazil', 'São Paulo'];
const [name, , country, state] = list;

console.log(name, country, state); // Gabriel Brazil São Paulo

Notice that the array receiving the assignment has an extra comma. It's not actually extra — it represents the position of the array element we didn't want to extract (the one that was skipped).

Default values

We can assign a default value to a variable for cases where the value extracted from the array is undefined.

const [a, b = 7] = [1];

console(a, b); // 1 7

Using the (...) operator

When you need to assign one array element to a variable and the rest of the array's elements to another variable, we can use the (...) operator.

const list = ['Gabriel', 'Dad', 'Developer', 'Nerd'];
const [name, ...others] = list;

console.log(name); // Gabriel
console.log(others); // ['Dad', 'Developer', 'Nerd']

Destructuring Objects

Destructuring an object is similar to an array, the difference being the use of curly braces { } instead of square brackets [ ].

const person = {
  name: 'Gabriel',
  lastName: 'Asakawa',
  country: 'Brazil',
};
const name = person.name; // Gabriel
const lastName = person.lastName; // Asakawa
const country = person.country; // Brazil

console.log(name, lastName, country); // Gabriel Asakawa Brazil

In the code above, I used a way of extracting elements from an object that works well, but the code is verbose and repetitive. So once again we can use destructuring and shorten the code — let's look at a few scenarios.

Basic

const person = {
  name: 'Gabriel',
  lastName: 'Asakawa',
  country: 'Brazil',
};
// correct
const { name, lastName, country } = person;
console.log(name, lastName, country); // Gabriel Asakawa Brazil

// incorrect
const { name, last, country } = person;
console.log(name, last, country); // Gabriel undefined Brazil

In direct object destructuring, the name of the variable that will receive the object property's value must match the property name on the object. Otherwise, the value won't be assigned.

Nested objects

const person = {
  name: 'Gabriel',
  lastName: 'Asakawa',
  country: 'Brazil',
  address: {
    street: 'Av Paulista',
    zipCode: '00000-000',
  },
};
const {
  name,
  lastName,
  address: { street, zipCode },
} = person;

console.log(name, lastName, street, zipCode); // Gabriel Asakawa Av. Paulista 00000-000

Different variable names

As I mentioned before, when destructuring an object directly, the variable name that receives the property's value must match, but you can use a different variable name if needed.

const person = {
  name: 'Gabriel',
  lastName: 'Asakawa',
  country: 'Brazil',
};
const { name, lastName: familyName } = person;

console.log(name, familyName); // Gabriel Asakawa

More use cases can be found here.

Conclusion

Using destructuring helps reduce lines of code and makes the code more readable. It also lets you extract only the data from an array or object that you actually need at that moment.

If you have questions, compliments, or suggestions, leave a comment. If you enjoyed the content, share it with your friends.