Getting Started with Modern JavaScript — Destructuring

Photo by Michael Aleo on Unsplash

The two most used data structures in JavaScript are Object and Array. The destructuring assignment introduced in ECMAScript 2015 is a shorthand syntax that allows us to extract array values or object properties into variables. In this article, we go through the syntax of both data structures and give examples when you can use them.

Destructuring Arrays

In ES5 you could access items in an array by index:

With ES6 destructuring, the code becomes simpler:

const [apple, banana, kiwi] = fruit;

Sometimes you might want to skip over items in the array being destructured:

const [,,kiwi] = ['apple', 'banana', 'kiwi'];

Or you can save the other items in an array with the rest pattern:

const [apple, …rest] = ['apple', 'banana', 'kiwi'];
console.log(rest); // -> ['banana', 'kiwi']

Note that the destructuring assignment pattern works for any iterable.