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
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • By
    Cross Browser CSS Box Shadows

    Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them.  For someone with no design talent, a.k.a me, the need to use Photoshop sucked.  Just because we...

  • By
    FileReader API

    As broadband speed continues to get faster, the web continues to be more media-centric.  Sometimes that can be good (Netflix, other streaming services), sometimes that can be bad (wanting to read a news article but it has an accompanying useless video with it).  And every social service does...

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!