Array Destructuring

By  on  
Destructuring has become a major language feature in JavaScript, most prominently seen with imports, but also in function declarations and so on.  While object literals are the usual case for destructuring, remember that you can also destructure Arrays and Sets. Let's have a look at how destructuring is used for arrays and Sets! The usual case for destructuring is with an object literal:
const dict = { prop1: "one", prop2: "two" };

const { prop1, prop2 } = dict;
// prop1 = "one"
// prop2 = "two"
The syntax for Array and Set destructuring is a bit different:
const arr = ["uno", "dos"];

const [one, two] = arr;
// one = "uno"
// two = "dos"

// Or more explicitly
const [width, height] = [200, 400];
The destructuring syntax within iteration looks like:
const items = [
    ["one", "two"],
    ["three", "four"]
];
items.forEach(([uno, dos]) => {
    console.log(uno, dos);
});

// "one", "two"
// "three", "foor"
You can also clone an array with destructuring:
const arr = ["one", "two"];
const clone = [...arr];
You can also use commas to your advantage if you don't care about a given index of an array:
const arr = [1, 2, 3, 4];

const [,,,four] = arr; // four === 4
Destructuring is awesome for skilled JavaScript developers and can be confusing to newcomers.  Basic array destructuring doesn't mislead too much but iterating can be an ugly snippet.  Taking a minute to see these reduced examples may help you too better understand the pattern.

Recent Features

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    Modal-Style Text Selection with Fokus

    Every once in a while I find a tiny JavaScript library that does something very specific, very well.  My latest find, Fokus, is a utility that listens for text selection within the page, and when such an event occurs, shows a beautiful modal dialog in...

  • By
    Event Delegation with MooTools

    Events play a huge role in JavaScript. I can't name one website I've created in the past two years that hasn't used JavaScript event handling on some level. Ask yourself: how often do I inject elements into the DOM and not add an...

Discussion

  1. Charles Robertson

    Hi David. This is really great, but what is the point of destructuring? Is it just a more concise way of writing objects?

  2. Other nice use cases to mention:

    Iterating over objects

    const myObject = { /* ... */ }
    
    for (const [ key, value ] of Object.entries(myObject)) {
      // ...
    }
    

    Omitting unneeded values by just using some commas:

    const [,, month] = '2018-07-31'.match(/^[0-9]{4}.([0-9]{2}).[0-9]{2}$/)
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!