Destructuring Array: How Does Destructuring Work in JS?
Tags: javascript, programming, webdev, coding
Published: 2021-09-27 01:13:21

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:

```js
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**](https://stackblitz.com/edit/web-platform-mrqjsu?file=script.js)

Notice that the snippet above has a lot of repeated code which is not a DRY (**D**on’t **R**epeat **Y**ourself) way of coding.

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

```js
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**](https://stackblitz.com/edit/web-platform-uxrjek?file=script.js)

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](https://www.codesweetly.com/javascript-expression#types-of-expressions-in-javascript).

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:**

```js
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**](https://stackblitz.com/edit/web-platform-rndtx5?file=script.js)

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:**

```js
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**](https://stackblitz.com/edit/web-platform-nm1ng3?file=script.js)

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](https://www.codesweetly.com/javascript-rest-operator) within a destructuring array to assign the rest of a regular array to a variable.

**Here’s an example:**

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

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

[**Try it on StackBlitz**](https://stackblitz.com/edit/web-platform-w15axc?file=script.js)

> **Note:** Always use the rest operator as the last item of your destructuring array to avoid getting a [SyntaxError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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:

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

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

[**Try it on StackBlitz**](https://stackblitz.com/edit/web-platform-311nkt?file=script.js)

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:

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

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

[**Try it on StackBlitz**](https://stackblitz.com/edit/web-platform-r38k67?file=script.js)

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:**

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

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

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

[**Try it on StackBlitz**](https://stackblitz.com/edit/web-platform-fu7phn?file=script.js)

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Parsing_an_array_returned_from_a_function)
* [Unpacking values from a regular expression match](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#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](https://www.codesweetly.com/destructuring-object/) so we can see the differences.

Thanks for reading!