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];

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
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

Incredible Demos

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!