Destructuring in JavaScript - Arrays and Objects

Destructuring is a powerful feature in JavaScript that allows developers to extract data from arrays or objects and assign it to variables in a more concise and readable way.

It was introduced in ES6 (ECMAScript 2015) and has since become an essential part of modern JavaScript programming.

Destructuring is a shorthand syntax for extracting values from arrays or properties from objects and assigning them to variables. It simplifies the process of accessing nested data structures and reduces the amount of code needed to do so.

Destructuring Arrays

Let's start with an example of destructuring an array:

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...everythingElse] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(everythingElse); // [3, 4, 5]

In this example, we declared a constant numbers that contains an array of integers.

We then used destructuring to assign the first and second elements of the array to the variables first and second. The ...rest syntax is used to capture the remaining elements of the array in a new array called everythingElse.

Just for clarity, you don't have to use all of the elements in the array, and you can skip elements by using ,.

Here's another example so you can see that in action:

const numbers = [1, 2, 3, 4, 5];
const [, second, third] = numbers;

console.log(second); // 2
console.log(third); // 3

Destructuring Objects

Destructuring can also be used with objects. Consider the following example:

javascript
Copy code
const person = {
  firstName: 'Niall',
  lastName: 'Maher',
  age: 31,
};

const { firstName, lastName, age } = person;

console.log(firstName); // Niall console.log(lastName); // Maher console.log(age); // 31

In this example, we have an object person with three properties: firstName, lastName, and age.

We use destructuring to assign the values of these properties to variables with the same names. The resulting output shows that we can now access these variables as standalone variables.

With a default value

We can also use destructuring with default values. Consider the following example:

const person = {
  firstName: 'Niall',
  lastName: 'Maher',
};

const { firstName, lastName, age = 30 } = person;

console.log(firstName); // Niall
console.log(lastName); // Maher
// Age doesn't exist in the object
console.log(age); // 31

Deeply nested restructuring

Let's go one step further and destructure nested values from an object inside the object so you can see the syntax.

const user = {
  firstName: 'Niall',
  lastName: 'Maher',
  settings: {
    likesPizza: true, 
  }
}

The usual way of getting the likesPizza property would be to use something like const likesPizza = user.settings.likesPizza, but we can also destructure nested properties:

const user = {
  firstName: 'Niall',
  lastName: 'Maher',
  settings: {
    likesPizza: true, 
  }
}

const { settings: { likesPizza } } = user;

console.log(likesPizza) // true

One thing to note is this only will make the likesPizza property available and not the settings. To achieve that it can look a little strange until you are used to it:

const user = {
  firstName: 'Niall',
  lastName: 'Maher',
  settings: {
    likesPizza: true, 
  }
}

const { settings, settings: { likesPizza } } = user;

console.log(likesPizza) // true
console.log(settings) // { likesPizza: true }

I hope this intro to destructuring helped! ❤️

If it did, leave a comment below. 👇