Javascript ES6 Array & Object Destructuring

Sherlynn Tan
Aug 31 · 2 min read

ES6 introduced a number of significant improvements to the language, including de-structuring of Objects and Arrays.

Array Destructuring

Traditionally, to access elements in an Array, you would do so with their index number like so:

const array = [1, 2, 3];console.log(array[0])
// 1

Javascript ES6 allows you to assign the array to another array that contains variables in the same index as the element you need.

You can do this:

const array = [1, 2, 3];const [first, second, third] = array;console.log(first, second, third); 
// 1 2 3

This works well for simple arrays. However, if you only want to assign variables to certain array elements, e.g. you want to assign a variable to the number 4 in the array; you would have to do something like this:

const array = [1, 2, 3, 4];const [, , ,fourth] = array;console.log(fourth); 
// 4

This introduces some code smells in terms of readability (unsightly commas) as well as maintainability. A developer (yourself or a team member) might easily miscount the number of those placeholders and introduce a bug to the code.
If you face a situation whereby you need to do the above, you may want to consider using Object Destructuring instead (below).

Object Destructuring

JavaScript Objects also have a de-structure syntax:

const obj = { key1: 'value1', key2: 'value2' };const { key1 } = obj;console.log(key1); 
// value1

You can then assign variable names for the object keys:

const { key1: first } = obj;console.log(first);
// value1

For the above Array example, we can avoid the use of the unsightly placeholders and use Object destructuring:

Array Destructing (with unsightly placeholders)const array = [1, 2, 3, 4];const [, , ,fourth] = array;console.log(fourth); 
// 4

Modifying the above to use Object Destructuring:

const array = [1, 2, 3, 4];const { 3: fourth } = array;console.log(fourth); // 4

In the above, it could work because Arrays are also Objects. The array indexes act as the object keys. This is why we can do something like array[0].

In the example, we can access the value 4 by using array[3] (array index values start from 0) and then assign it to the variable named fourth. When we log fourth to the console, we get the value of 4.

Conclusion

ES6 Array destructuring syntax is useful for simple and straightforward destructuring. However, we saw how error-prone it could potentially be if we need to access deeper into the array and when we have to skip certain array elements.

Because JavaScript Arrays are also Objects, you can use the Array indexes as keys and then use Object destructuring to destructure JavaScript Arrays in a more succinct and maintainable way.

Cheers! 🍺

Sherlynn Tan

Written by

Software Developer at Thoughtworks | Marathon Runner | Ex-Pharmacist Writing on Coding, Technology and Running

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade