DEV Community

loading...
Cover image for Destructuring arrays in Javascript

Destructuring arrays in Javascript

test555creator profile image Arika ・2 min read

Tired of the traditional property access? ES6 destructuring to the rescue.

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. (MDN)

Although similar to spreading (remember the … operator?), it differs from the it in one very important aspect. While spreading an array we must extract all elements, when using destructuring we can extract only a few pieces on information, if that’s what we want (we can of course extract all of them too). It works with arrays and objects but today I am going to write about arrays.

Consider the following code which illustrates the syntax prior to ES6:

Alt Text

Nothing wrong with it and it gets the job done, right? Right. But when using nested arrays, the code can become cumbersome while trying to access certain elements.

Now let’s look at this code:

Alt Text

If we try to print the new variables to the console, we get the exact same result as in the previous example. The difference is that the syntax is clearer, cleaner and shorter.

We just used destructuring to store all the values of an array into individual variables. What if we want to store only a few of them? We can do that too, using the rest (…) operator. Yes, it looks exactly like the spread operator but it’s used differently. For now, all we need to know is that it must be used with the last item of the array-like-syntax object and it holds all the values that we don’t want to extract individually. We can give the rest variable whatever name we want (yes, even tRex).

Alt Text

We can skip values in an array by simply not writing them and what we get where those values should be in the new array is “undefined”. Like so:

Alt Text

Note that we renamed the "rest" variable to “dinosaur”.

Image source: Likas/ @goumbik on Pexels

Discussion (6)

pic
Editor guide
Collapse
lionelrowe profile image
lionel-rowe

You can also discard elements of the array you don't care about:

// discard end
const [first] = [1, 2, 3]
// discard start
const [, , third] = [1, 2, 3]
// discard middle
const [one, , three] = [1, 2, 3]
Enter fullscreen mode Exit fullscreen mode
Collapse
murkrage profile image
Mike Ekkel

That's a cool, albeit confusing and pretty messy, feature! Never knew that.

Collapse
lionelrowe profile image
lionel-rowe • Edited

It's similar to the literal syntax for creating sparse arrays:

const arr1 = [, , 3] // [empty × 2, 3]
// equivalent to...
const arr2 = []
arr2[2] = 3
Enter fullscreen mode Exit fullscreen mode
Collapse
test555creator profile image
Arika Author

Thx for mentioning, it is the first time I hear about this :).

Collapse
darkwiiplayer profile image
DarkWiiPlayer

...dinosaur 😂

Also, by the way, it'd be better to use actual code blocks instead of images so people can copy the code around and play with it 😉

Collapse
test555creator profile image
Arika Author

That's a good idea, for sure. I will keep it in mind, thx.