Destructuring Arrays in JavaScript
Tags: javascript, beginners, tutorial, arrays
Published: 2024-02-22 16:34:43

Do you have questions about how array destructuring works? Let's dive in!

Content:
  * [Basic Syntax](#basic-syntax)
  * [Skipping Values](#skipping-values)
  * [Swapping Values](#swapping-values)
  * [Nested Arrays](#nested-arrays)
  * [Default Values](#default-values)


### Basic Syntax <a name="basic-syntax"></a>

Destructuring is a simple way to extract data from arrays or objects into separate variables. Let's take a look at how array destructuring works.

Consider the array below as an example:

```javascript
const numbers = [41, 27, 55];
```

If we were to extract these data manually, we would do:

```javascript
const a = numbers[0]; 
const b = numbers[1];
const c = numbers[2];
```

Quite repetitive, right?

Thanks to the programming gods, in 2015, ES6 introduced destructuring, and now we can extract these data in a much more concise and simple way. This is the basic syntax of destructuring:

```javascript
const [ a, b, c ] = numbers;
```

We did the same thing as the code above: we declared three variables and assigned them the values of the `numbers` array.

Now, we can work with the array values separately:

```javascript
console.log(a); // output: 41
console.log(b); // output: 27
console.log(c); // output: 55
```

But what if we don't want to extract all the data from the array? Let's find out!


### Skipping Values <a name="skipping-values"></a>

The reason we skip values during array destructuring is because arrays, unlike objects, follow a specific order. Therefore, every time we don't want to extract a value from an array, we have to signal this to the program. We do this by omitting the variable that would be there (but leaving the commas and spaces), so this `, b, ` becomes this `, , `.

Using the example above, if we don't want to extract the value 27 from the array, we should simply write:

```javascript
const [ a, , c ] = numbers;
```

Et voilà!

### Swapping Values <a name="switching-values"></a>

Destructuring allows us to swap values between variables without having to create a temporary variable. See the before and after of swapping values between `a` and `c`:

```javascript
console.log(a, c); //  output: 41 55

[a, c] = [c, a];

console.log(a, c); //  output: 55 41
```
Is there anything simpler than this? Now you have a more performance-efficient option to swap values between variables!


### Nested Arrays <a name="nested-arrays"></a>

Additionally, what happens if we encounter an array within an array? Destructuring still works smoothly:

```javascript
const nested = [47, 5, [2, 1]];

const [k, , array] = nested;
```

The result is:

```javascript
console.log(k); // output: 47
console.log(array); // output: [2, 1]
```

We can also nest destructuring within destructuring. Taking the same array as an example:

```javascript
const [m, , [n, o]] = nested;

console.log(m); // output: 47
console.log(n); // output: 2
console.log(o); // output: 1
```

Nice!

Can destructuring generate more variables than the number of elements in the array? Absolutely! Let's delve deeper!


### Default Values <a name="default-values"></a>

It's possible to create more variables than there are elements in the array. However, initially, they will have the value of undefined:

```javascript
const [a, b, c] = [2, 3]

console.log(a, b, c); // output: 2 3 undefined 
```

What can we do to avoid this? Along with destructuring, we can establish default values! Take a look:

```javascript
const [a = 1, b = 1, c = 1] = [2, 3]

console.log(a, b, c); // output: 2 3 1 
```

This way, we avoid bugs in our code due to undefined. Additionally, setting default values makes our code more robust and reliable.

And that's it for today! Thank you for getting this far! =)

Comment below what you thought of this so I can improve myself!


![Dog coding in an old computer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbirh7jxcuon6r63jesx.jpg)