Destructuring Array: How Does Destructuring Work in JS?

The destructuring array assignment is a unique technique you can use to copy an array’s value into new variables neatly.

For instance, without using the destructuring assignment technique, we would copy an array’s value into a new variable like so:

const profile = ["Oluwatobi", "Sofela", "codesweetly.com"];

const firstName = profile[0];
const lastName = profile[1];
const website = profile[2];

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Try it on StackBlitz

Notice that the snippet above has a lot of repeated code which is not a DRY (Don’t Repeat Yourself) way of coding.

Let’s now see how the destructuring assignment makes things neater and DRY.

const profile = ["Oluwatobi", "Sofela", "codesweetly.com"];

const [firstName, lastName, website] = profile;

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Try it on StackBlitz

You see, like magic, we’ve cleaned up our code by encasing the three new variables (that is, firstName, lastName, and website) into an array object ([...]). Then, we assigned them the profile array’s values.

In other words, we instructed the computer to copy the profile array’s values into the variables on the left-hand side of the assignment operator.

Therefore, JavaScript will parse the profile array and copy its first value (“Oluwatobi”) into the destructuring array’s first variable (firstName).

Likewise, the computer will copy the profile array’s second value (“Sofela”) into the destructuring array’s second variable (lastName).

Lastly, JavaScript will copy the profile array’s third value (“codesweetly.com”) into the destructuring array’s third variable (website).

Notice the snippet above destructured the profile array by referencing it. However, we can also do direct destructuring of an array. Let’s see how below.

How to do direct array destructuring

JavaScript permits direct destructuring of an array.

Here’s an example:

const [firstName, lastName, website] = [
  "Oluwatobi", 
  "Sofela", 
  "codesweetly.com"
];

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Try it on StackBlitz

Suppose you prefer to separate your variable declarations from their assignments. In that case, JavaScript has you covered. Let see how below.

How to use the destructuring assignment while separating variable declarations from their assignments

Whenever you use the destructuring assignment, JavaScript allows you to separate your variable declarations from their assignments.

Here’s an example:

let firstName, lastName, website;

[firstName, lastName, website] = ["Oluwatobi", "Sofela", "codesweetly.com"];

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Try it on StackBlitz

What if you want “Oluwatobi” assigned to the firstName variable — and the rest of the array items to another variable? How can such be accomplished? Let’s find out below.

How to use the destructuring assignment to assign the rest of an array to a variable

JavaScript allows you to use the rest operator within a destructuring array to assign the rest of a regular array to a variable.

Here’s an example:

const [firstName, ...otherInfo] = ["Oluwatobi", "Sofela", "codesweetly.com"];

console.log(firstName); // "Oluwatobi"
console.log(otherInfo); // ["Sofela", "codesweetly.com"]

Try it on StackBlitz

Note: Always use the rest operator as the last item of your destructuring array to avoid getting a SyntaxError.

Now, what if you only want to extract “codesweetly.com”. In that case, you can also use the destructuring assignment. Let’s find out how below.

How to use the destructuring assignment to copy values at any index

You can use destructuring to copy values at any index of an array like so:

const [, , website] = ["Oluwatobi", "Sofela", "codesweetly.com"];

console.log(website); // "codesweetly.com"

Try it on StackBlitz

In the snippet above, we used commas to skip variables at the destructuring array’s first and second index positions. By so doing, we were able to link the website variable to the third index value of the regular array on the right-hand of the assignment operator (that is, “codesweetly.com”).

At times, however, the value you wish to extract from an array is undefined. In that case, JavaScript provides a way to set default values in the destructuring array. Let’s learn more about this below.

How default values work in a destructuring assignment

Setting a default value can be handy when the value you wish to extract from an array does not exist (or is set to undefined).

Here’s how you can set one inside a destructuring array:

const [firstName = "Tobi", website = "CodeSweetly"] = ["Oluwatobi"];

console.log(firstName); // "Oluwatobi"
console.log(website); // "CodeSweetly"

Try it on StackBlitz

In the snippet above, we set “Tobi” and “CodeSweetly” as the default values of the firstName and website variables.

Therefore, in our attempt to extract the first index value from the right-hand side array, the computer defaulted to “CodeSweetly” — because only a zeroth index value exists in ["Oluwatobi"].

So, what if you need to swap firstName’s value with that of website? Again, you can use the destructuring assignment to do so. Let’s see how below.

How to use the destructuring assignment to swap values

You can use the destructuring assignment to swap the values of two different variables.

Here’s an example:

let firstName = "Oluwatobi";
let website = "CodeSweetly";

[firstName, website] = [website, firstName];

console.log(firstName); // "CodeSweetly"
console.log(website); // "Oluwatobi"

Try it on StackBlitz

The snippet above instructed the computer to reassign the firstName and website variables by swapping their values.

As such, firstName’s value will change from "Oluwatobi" to "CodeSweetly". While website’s content will change from "CodeSweetly" to "Oluwatobi".

Examples of other ways to use the destructuring array

See the resources below for examples of other ways to use the destructuring assignment to copy an array’s value into new variables neatly.

• Parsing an array returned from a function
• Unpacking values from a regular expression match

Overview

This article discussed how the destructuring assignment works with JavaScript arrays. We also used examples to understand various ways of destructuring array literals.

Now that we know how destructuring array works, let's discuss destructuring object here so we can see the differences.

Thanks for reading!