Destructuring Assignment in JavaScript
Tags: javascript, beginners, webdev
Published: 2019-07-25 12:52:00

One of the things that give me headache about JavaScript ES6 is the amount of expressions that use symbols such as =, => and {} without any keyword to explain them. I imagine that with time it will make things simpler, but for now I'm simply having a hard time getting used to it. So today I am going to talk about one of these expressions: **destructuring assignment** syntax.

###What Is Destructuring Assignment?

It is a way to take the individual values from arrays or properties from objects and turn them into variables standing on their own (i.e. *distinct*).

Destructuring assignment has slightly different syntax for arrays and objects, so let's look at each of them separately.

###Array Destructuring

Let's assume that we've got an array with three vegetables in it. But instead of an array, we want to have three separate variables each with one vegetable.

```javascript
//This is what we've got
const arr = ["pepper", "carrot", "onion"];

//This is what we want
const veggieA = "pepper";
const veggieB = "carrot";
const veggieC = "onion";
```

Destructuring assignment allows us to do exactly that. This is the syntax to do it:

```javascript
const [var1, var2, varN] = array;
```

Note that we can also use `let` or `var` instead of `const` to declare the new variables. Now let's apply it to our example:

```javascript
const arr = ["pepper", "carrot", "onion"];

const [veggieA, veggieB, veggieC] = arr;
console.log(veggieA); //"pepper"
console.log(veggieB); //"carrot"
console.log(veggieC); //"onion"
```

###Object Destructuring

Similarly, if we've got an object with several properties that we want to turn into distinct variables, with ES5 we would have done something like this:

```javascript
var book = { title: "The Hobbit", author: "JRR Tolkien", year: 1937 };
var title = book.title;
var author = book.author;
var year = book.year;
```

With destructuring syntax, we can achieve the same with the following statement:

```javascript
const book = { title: "The Hobbit", author: "JRR Tolkien", year: 1937 };
const { title, author, year } = book;
```

We could even assign new variable names if we wanted:

```javascript
const book = { title: "The Hobbit", author: "JRR Tolkien", year: 1937 };
const { title : bookTitle , author : bookAuthor, year: bookYear } = book;
```

So the main differences between destructuring arrays and destructuring objects are:
1. We use brackets (`[]`) for arrays and curly braces (`{}`) for objects.
2. We can reassign variable names to object properties (with arrays we're always giving them a new name anyway).

###Bonus

We can also use destructuring syntax to assign values to multiple variables at once:

```javascript
let a, b;
[a, b] = ["carrot", "onion"];
```

We can even use it to swap the values of two variables:

```javascript
let a = 1;
let b = 5;
[a, b] = [b, a];
console.log(a); //5
console.log(b); //1
```

###Conclusion

Destructuring assignment syntax is an easy way to turn arrays or object properties into distinct variables. It also allows us to assign values to multiple variables at once or swap the values of two variables.