Destructuring Assignment in JavaScript

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.

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

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:

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:

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:

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:

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:

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

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

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.