The complete guide to destructuring in JavaScript
Tags: javascript, programming, tutorial
Published: 2021-10-18 15:50:29

Two commonly used data structures in JavaScript are `Object` and `Array`. And many times we may need to extract individual pieces of the object instead of the whole thing. This is where Destructuring comes in.

Destructuring is a special syntax which is used to "destructure" or "unpack" an object or array into many variables, as that may be more useful.

## Array destructuring

Here's an example of array destructuring:

```js
const site = ['dev', 'to'];

// destructuring here
let [domain, ext] = site;
// this is basically equal to
// let domain = site[0]
// let ext = site[1]

alert(domain); //=> dev
alert(ext);    //=> to
```

By using destructuring, we did not have to repeat the array's name or the indices. Destructuring can be really helpful when using string methods which return arrays:

```js
const [firstName, lastName] = 'John Doe'.split(' ');
const [full, short] = /(.+?(?!=day))day/gi.exec('Monday');
```

Note that the original array does not change when destructuring. Destructuring is not destructive.

### Skippping items

You can use [holes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas) to skip items in arrays:

```js
const [, lastName] = 'John Doe'.split(' ');

alert(lastName); //=> Doe
```

### Works with any iterables

Actually, we can use any iterable in destructuring (including objects, which we will talk about later)

```js
let [a, b, c] = 'abc'; //=> ['a', 'b', 'c']
let [one, two, three] = new Set([1, 2, 3]);
```

This is because destructuring is kind of syntactic sugar of using `for...of` over the Iterable and then assigning the value to variables.

### Assign anything

You can assign anything which can be assigned, say object properties:

```js
const day = {};

[day.full, day.short] = /(.+?(?!=day))day/gi.exec('Monday');
```

Or even existing variables:

```js
let full, short;

[full, short] = /(.+?(?!=day))day/gi.exec('Monday');
```

### The variable swapping trick

There's a common trick which is used to swap two variables using destructuring:

```js
let student = 'You';
let master = 'Me';

[student, master] = [master, student];

student; //=> Me
master; //=> You
// The student has become the master
```

### The rest `...`

If an array is longer than what you destructure, the extra items are left out.

```js
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

const [day1, day2] = days;
day1; //=> Sunday
day2; //=> Monday
// No more assignments
```

You can collect those items using [rest parameters](https://dev.to/siddharthshyniben/understanding-the-rest-and-spread-operators-3n2j):

```js
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

const [
	day1, // First item aka Sunday
	day2, // Second item aka Sunday
	...restDays // All the other items
] = days;

restDays; //=> ['Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
```

You can use any name instead of `restDays`, the only rule is that it should be preceded by three dots and should be last.

### Default values

If you destructure nonexistent  values, there will be no error. The items will simply be undefined. We can set default values to fix this:

```js
const [name = 'Anonymous'] = [];
name; //=> Anonymous
```

```js
const [name = 'Anonymous'] = ['John'];
name; //=> John
```

### Nesting

You can also destructure nested arrays. Just use the same syntax inside.

```js
const arr = [["John"]]; // Nested array!

const [[name]] = arr;
name; //=> 'John'
```

Or a really complex example:

```js
const arr = ['Foo', ['Bar', ['Baz', 'Lol', ['Quux']]]];
const [foo, [bar, [baz, lol, [quux]]]] = arr2;

foo; //=> Foo
bar; //=> Bar
baz; //=> Baz
lol; //=> Lol
quux; //=> Quux
```

Just note that when you destructure nested items which dont exist, an error will be thrown.

## Object destructuring

Objects can also be destructured and the syntax is pretty much the same.

```js
const site = {domain: 'dev', ext: 'to'};

// destructuring here, note the {}
let {domain, ext} = site;
// this is basically equal to
// let domain = site.domain
// let ext = site.ext

alert(domain); //=> dev
alert(ext);    //=> to
```

Also note the order does not matter:

```js
const rectangle = {
	width: 10,
	height: 20,
	x: 5,
	y: 5
};

// All of these work
const {width, height, x, y} = rectangle;
const {x, width, height, y} = rectangle;
const {y, width, x, height} = rectangle;
// ...
```

### Aliasing

We can set aliases to destructured variables by writing `realName: alias` just like a normal object:

```js
const rectangle = {
	width: 10,
	height: 20,
	x: 5,
	y: 5
};

const {width: w, height: h, x, y} = rectangle;

w; //=> 10 (value of width)
h; //=> 20 (value of height)
```

Just like in arrays, we can set defaults:

```js
const name = {first = prompt('First name'), last = prompt('Last name')} = {first: 'John'};
```

We can even mix default values and aliases:

```js
const name = {first: f = prompt('First name'), last: l = prompt('Last name')} = {first: 'John'};
```

### The rest `...`

Just like arrays, objects also can have a rest property.

```js
const coords = {x: 13, y: 42, z: 8};

const {x, ...rest} = coords;

x; //=> 13
y; //=> {y: 42, z: 8}
``` 

### A quick gotcha for assigning existing values

In the previous examples, we used `let {...} = {...}` which is fine. But when you try `{...} = {...}` there will be an error:

```js
let width, height;

// Error here
{width, height} = {width: 10, height: 21};
```

this is because JavaScript considers `{...}` on it's own as a block statement. A block statement can be used to group code:

```js
{ // This is a isolated block
	let foo = 42;
	alert(foo);
}
```

So, to tell JavaScript that we need destructuring, we can wrap it in `()`:

```js
let width, height;

// This is fine
({width, height} = {width: 10, height: 21});
```

### Nesting

Just like in arrays, we can destructure nested properties too! We just need to mimic the structure of the source

```js
const rect = {
	color: red,
	coords: {
		x: 12,
		y: 7,
	}
};

const {
	color,
	coords: {
		x,
		y,
	}
} = rect;

color; //=> red
x; //=> 12
y; //=> 7
// No coords :(
```

Note that we have no coords, since we are destructuring it's values.

Here's a complete destructuring example:

```js
const order = {
	items: ['Pizza', 'Donuts'],
	extra: true,
	amount: {
		pizza: 2,
		donuts: 4
	}
};

const {
	items: [main, ...rest] = [], // Array destructuring
	extra = false, // Default props
	amount: { // Nested
		pizza,
		donuts
	},
	homeDelivery = false, // Non existent values
} = order;
```

That's everything you need to know about destructuring!

If you found this post helpful, [spread the word!](https://twitter.com/intent/tweet?url=https%3A%2F%2Fdev.to%2Fsiddharthshyniben%2Fthe-complete-guide-to-destructuring-in-javascript-4b5g&text=Destructuring%20is%20a%20great%20tool%20to%20keep%20your%20code%20clean%20and%20DRY.%20Don%27t%20know%20about%20Destructuring%2C%20or%20want%20to%20brush%20up%20on%20it%3F%20Check%20out%20this%20complete%20guide%20to%20destructuring%20by%20@SiddharthShyn%21&hashtags=javascript) or follow me [on twitter](https://twitter.com/intent/follow?screen_name=SiddharthShyn) or over here to stay updated on my blog posts!