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
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    Create Your Own Dijit CSS Theme with LESS CSS

    The Dojo Toolkit seems to just get better and better.  One of the new additions in Dojo 1.6 was the use of LESS CSS to create Dijit themes.  The move to using LESS is a brilliant one because it makes creating your own Dijit theme...

  • By
    Telephone Link Protocol

    We've always been able to create links with protocols other than the usual HTTP, like mailto, skype, irc ,and more;  they're an excellent convenience to visitors.  With mobile phone browsers having become infinitely more usable, we can now extend that convenience to phone numbers: The tel...

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!