Destructuring in JavaScript. What is it? How does it work? Why should you use it?

What is destructuring?

Destructuring in JavaScript is a powerful feature that lets you extract values from data structures like arrays and objects. It can be used to make your code more readable and concise.

In this blog post, we'll take a look at what destructuring is, how it works, and some of the benefits of using it.

How does destructuring work?

Destructuring is simple though it might seem magical and confusing at first glance. It works by taking an array or object and creating variables from its properties.

Destructuring arrays

For example, let's say you have an array of numbers called myNumbers:

const myNumbers = [1, 2, 3, 4, 5];

You can use destructuring to create variables from the elements of the array.

const [first, second, third, fourth, fifth] = myNumbers;

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3
console.log(fourth); // 4
console.log(fifth); // 5

As you can see, destructuring lets you extract data from arrays and assign it to variables.

Destructuring objects

You can also use destructuring to extract data from objects.

For example, let's say you have a person object with properties name, age, and country:

const person = {
  name: ' John Doe ',
  age: 30,
  country: ' United States '
};

You can use destructuring to create variables from the object's properties.

const { name, age, country } = person;

console.log(name); // John Doe
console.log(age); // 30
console.log(country); // United States

As presented above we can use destructuring to extract object properties and assign them to the variables.

Destructuring nested data structures

Destructuring can also be used to extract data from nested data structures.

Let's say you have an array of objects with properties name, age, and country.

const people = [
  {
    name: ' John Doe ',
    age: 30,
    country: ' United States '
  },
  {
    name: ' Jane Doe ',
    age: 20,
    country: ' Canada '
  }
];

You can use destructuring to create variables from the nested object's properties.

const [{ name: name1, age: age1, country: country1 }, { name: name2, age: age2, country: country2 }] = people;

console.log(name1); // John Doe
console.log(age1); // 30
console.log(country1); // United States

console.log(name2); // Jane Doe
console.log(age2); // 20
console.log(country2); // Canada

This helps us simplify more complex data structure and extract values form each element of array.

Destructuring function arguments

Destructuring can also be used to extract data from function arguments.

Given that we have a function that takes an object with properties name, age, and country:

function sayHello({ name, age, country }) {
  console.log(`Hello, my name is ${name}. I'm ${age} years old and I'm from ${country}.`);
}

You can use destructuring to extract the data from the object and pass it as an argument to the function.

sayHello({
  name: ' John Doe ',
  age: 30,
  country: ' United States '
});

// Hello, my name is John Doe. I'm 30 years old and I'm from United States.

As you can see, destructuring makes it easy to extract data from data structures and pass it to functions as arguments.

Benefits of Using Destructuring

Destructuring can be used to make your code more readable and concise. To show it we will compare code that uses destructuring with one that doesn't for the examples we wrote above.

Array comparison

Let's take our myNumbers array and try to sum up all the integers inside it.

Without destructuring, you would have to write the following code:

const myNumbers = [1, 2, 3, 4, 5];

let sum = 0;

for (const num of myNumbers) {
  sum += num;
}

console.log(sum); // 15

With destructuring, you can write the following code:

const myNumbers = [1, 2, 3, 4, 5];

const [first, second, third, fourth, fifth] = myNumbers;

const sum = first + second + third + fourth + fifth;

console.log(sum); // 15

As you can see, destructuring can make your code more concise.

Let's take a look at object examples and how restructuring can help us make code more readable.

Object comparison

We will use our person object from the previous example.

Without destructuring, you would have to write the following code:

const person = {
  name: ' John Doe ',
  age: 30,
  country: ' United States '
};

console.log(person.name); // John Doe
console.log(person.age); // 30
console.log(person.country); // United States

With destructuring, you can write the following code:

const person = {
  name: ' John Doe ',
  age: 30,
  country: ' United States '
};

const { name, age, country } = person;

console.log(name); // John Doe
console.log(age); // 30
console.log(country); // United States

Using destructuring makes our code more readable.

Extracting function arguments comparison

Last but not least let's see how using destructuring to extract function arguments can help us make it easier to understand and work with:

We will use the sayHello function we are already familiar with from the example above.

Without destructuring, you would have to write the following code:

function sayHello(person) {
  console.log(`Hello, my name is ${person.name}. I'm ${person.age} years old and I'm from ${person.country}.`);
}

sayHello({
  name: ' John Doe ',
  age: 30,
  country: ' United States '
});

With destructuring, you can write the following code:

function sayHello({ name, age, country }) {
  console.log(`Hello, my name is ${name}. I'm ${age} years old and I'm from ${country}.`);
}

sayHello({
  name: ' John Doe ',
  age: 30,
  country: ' United States '
});

Our destructured example is both more concise and readable.

Conclusion

Destructuring is a powerful feature that can be used to make your code more readable and concise. It is a convenient way to extract data from data structures without having to write a lot of code.

If you're not already using destructuring in your JavaScript code, I encourage you to give it a try - it is worth adding to your toolbox.