JavaScript: Destructuring Assignment
Tags: javascript, webdev, frontend, development
Published: 2022-05-14 12:58:31

---
title: JavaScript: Destructuring Assignment
published: true
description: The **destructuring assignment** syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
tags: JavaScript, Webdev, Frontend, Development
series: JavaScript Details
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16lei99yhjznon63b2yo.png
---

## Definition

The **destructuring assignment** syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

[MDN Documentation HERE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

Let's examine some common use-cases for destructuring.

### Object Destructuring

First, let's examine a simple example where we destructure the `destructo1` object.

```javascript
const destructo1 = {
  name: 'Bob',
  wife: 'Jen',
  son: 'Patrick',
  daughter: 'Anne',
  email: 'bob.fornal@leadingedje.com'
};

let { name, wife, son, daughter } = destructo1;
name = 'Robert';
console.log(name, wife, son, daughter);
console.log(destructo1);

// Robert Jen Patrick Anne
// {name: 'Bob', wife: 'Jen', son: 'Patrick', daughter: 'Anne', email: 'bob.fornal@leadingedje.com'}
```

### Array Destructuring

Now, let's examine array destructuring by taking apart `destructo2`.

```javascript
const destructo2 = [1, 2, 3, 4, 5];
let [_, a, b, c] = destructo2;

console.log(a, b, c);
console.log(destructo2);

// 2 3 4
// (5) [1, 2, 3, 4, 5]
```

### Default Values

Default values can be managed with destructuring, as well. Here lets use them with `destructo3`.

```javascript
const destructo3 = {
  name: 'Dave Hawk',
  age: 54
};

const { name = 'Bob Fornal', age, height = 60 } = destructo3;
console.log(name, age, height);
console.log(destructo3);

// Dave Hawk 54 60
// {name: 'Dave Hawk', age: 54}
```

Notice the `name` and `age` are retrieved from the object. The default for the `name` is not used in this example, although the `height` is used.

## Use Cases

Now, let's examine some real ways that destructuring can be used.

### Regular Expression Groups

Here, we needed to capture the number and string as separate parts for processing. A Regular Expression is used that provides a very specific array output that can then be leveraged using array destructuring.

```javascript
const maxSize = '10222mb';
const regex = /(\d+)(kb|mb|gb|tb)/i;
const destructo4 = regex.exec(maxSize);
console.log(destructo4);

// ['10222mb', '10222', 'mb', index: 0, input: '10222mb', groups: undefined]

const [_, sizeString, type] = destructo4;
console.log({ sizeString, type });

// {sizeString: '10222', type: 'mb'}
```

Note how we now have the variables `sizeString` and `type` for processing.

### Swapping Variables

Traditionally, we would do something like the following for swapping two variable. In this case, we are swapping `title1` and `title2`.

```javascript
let title1 = 'ABC';
let title2 = 'DEF';

let temp = title1;
title1 = title2;
title2 = temp;
console.log({ title1, title2 });

// {title1: 'DEF', title2: 'ABC'}
```

Note the values of `title1` and `title2` when console log was called.

With destructuring, the code becomes a lot cleaner.

Essentially, we are making an array on the right side of the equal sign with `title2` in the zero-index position and `title1` in the one-index position. We then destructure the array, assigning `title1` and `title2`.

```javascript
let title1 = 'ABC';
let title2 = 'DEF';

[title1, title2] = [title2, title1];
console.log({ title1, title2 });

// {title1: 'DEF', title2: 'ABC'}
```

The output is the same as the previous example with a different approach.

### Removing Keys from an Object

Removing keys from an object can take different forms. A traditional method is to do the following.

```javascript
const destructo5 = {
  name: 'Bob',
  wife: 'Jen',
  son: 'Patrick',
  daughter: 'Anne',
  email: 'bob.fornal@leadingedje.com'
};

delete destructo5.email;
console.log(destructo5);

// {name: 'Bob', wife: 'Jen', son: 'Patrick', daughter: 'Anne'}
```

Using the Spread Operator (`...`) we can remove a key/value pair without impacting the original object.

```javascript
const destructo1 = {
  name: 'Bob',
  wife: 'Jen',
  son: 'Patrick',
  daughter: 'Anne',
  email: 'bob.fornal@leadingedje.com'
};

const destructo6 = Object.assign({}, destructo1);
const { email, ...destructo7 } = destructo6;
console.log(email);
console.log(destructo7);

// bob.fornal@leadingedje.com
// {name: 'Bob', wife: 'Jen', son: 'Patrick', daughter: 'Anne'}
```

Note the new variables, `email` and `destructo7`. The `email` key and value are not included in `destructo7`.

## Summary

In this article we've covered some basic examples and real-life use-cases for destructuring of objects and arrays.