Basic array destructuring in ES6

When I wrote this blogpost about object destructuring in ES6, I decided that it would be easier to split up the main subject of destructuring between how to destructure objects in ES6 and how to destructure arrays. This post is part 2 and aims at giving an intro to array destructuring.

The difference between arrays and objects

The differences in how to destructure them basically come down to what the differences between objects and arrays are. You store values in both of them, but objects have properties that you can think of as ‘characteristics’, while arrays are a collection (or ‘list’) of values. This differentiation means that their syntax is not the same and that you access the stored values in different ways – and this is the important part when it comes to destructuring. As we’ve seen in my previous blogpost, values in an object are accessed via bracket or dot notation. Arrays use zero-based indexing.

Here’s an example of how to extract data from an array without ES6 destructuring:

var bookIntro = ["It", "was", "a", 
                 "snowy", "Winter", "day"];
var verb = bookIntro[2];
var season = bookIntro[5];

console.log(verb);// "was"
console.log(season);// "Winter"

You can see how the values are accessed via their index in the array, but you’ll also notice that this is rather complicated. Can we make this easier?

Basic destructuring

ES6 gives us a way to access array data without being overly repetitive with the code we write. Let’s take the example from above and destructure it:

var bookIntro = ["It", "was", "a", 
                 "snowy", "Winter", "day"];
var [object, verb] = bookIntro;

console.log(object);// "It"
console.log(verb);// "was"

And we can even go a little shorter than that:

var [object, verb] = ["It", "was", "a", 
                      "snowy", "Winter","day"];

console.log(object);// "It"
console.log(verb);// "was"

As you can see, the result is the same!

As the array index starts at 0 on the left, the variables are set from left to right starting at 0, too. For the example above, that means that the var object corresponds to value at index 0, which is "It"; the var verb to the value at index 1, which is "was", and so forth.

What do we do if we don’t want to assign all the values to variables, but rather skip some of them?

Skipping items and using the rest parameter

var [object,,,,, season] = ["It", "was", "a", 
                      "snowy", "Winter","day"];

console.log(object);// "It"
console.log(season);// "Winter"

As you see in the code above, you use commas to skip an item in the array when you assign variables. You use one comma for each item in line that you want to skip. So in this case, imagine you had only used one comma: season would be = “was”. Use two commas, and you would have skipped the “was” item so that season = “a”. The only thing you have to keep in mind when you’re skipping: You place a comma for the item you want to skip, but the actual var names on the left side of your statement are also separated by commas, so do not forget about that!

The array we’re using in our example is a basic one, but you can imagine that you could have lots more items in a given array. There’s a way for you to destructure and assign the rest of an array, like so:

var [object, ...sentence] = ["It", "was", "a", 
                      "snowy", "Winter","day"];

console.log(object);// "It"
console.log(sentence);
                  // ["was", "a", "snowy", "Winter", "day"]

Adding default values

Default values are handy for destructuring arrays and objects alike, because for both there are possible scenarios where we destructure and the property (when working with objects) or item (when working with arrays) is not there, hence undefined.

The logic of adding default values to array destructuring is exactly the same as for objects – you add them to the left side of your destructuring statement. A default value can be added like this:

var [object, season = "Summer"] = ["Winter"];

console.log(object);// "Winter"
console.log(season);// "Summer"

If you had just used season without adding a default value, it would have logged undefined since the only value in our array is "Winter", which is already assigned to object (remember, from left to right).

Leave a comment

Your email address will not be published. Required fields are marked *