A Better & Cleaner Way To Destructure JavaScript Arrays

photo credit: https://philna.sh/blog/2017/02/09/toast-to-es2015-destructuring/

If you are familiar with using JavaScript, either vanilla-style or via frameworks, then you would have come across ES6, which has been popularised thanks to tools like BabelJS and growing support by browsers and standards from TC39.

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

Array Destructuring

Instead of accessing elements in an Array with their index number, ES6 allows you to assign the array to another array that contains variables in the same index as the element you need.

Given this array of Nigerian states:

const states = ["Abia", "Adamawa", "Anambra", "Akwa Ibom", "Bauchi", "Bayelsa", "Benue", "Borno", "Cross River", "Delta", "Ebonyi", "Enugu", "Edo", "Ekiti", "Gombe", "Imo", "Jigawa", "Kaduna", "Kano", "Katsina", "Kebbi", "Kogi", "Kwara", "Lagos", "Nasarawa", "Niger", "Ogun", "Ondo", "Osun", "Oyo", "Plateau", "Rivers", "Sokoto", "Taraba", "Yobe", "Zamfara"];

Using Array de-structure, you would get the first, second and the fourth elements from the states array, thus:

// Accessing Array elements, ES6 style
const [first, second, , fourth] = states;
console.log(first, second, fourth); // Abia, Adamawa, Akwa Ibom

This is a huge (pronounce as you-dge for me, pls) improvement from pre-Array de-structuring days where we would have to access these three elements individually and usually on separate lines, as shown below

// Accessing Array elements, pre-ES6 style
const first = states[0]
const second = states[1]
const fourth = states[3];
console.log(first, second, fourth); // Abia, Adamawa, Akwa Ibom

However, there’s still a number of challenges with the ES6 Array destructure approach.

In the Accessing Array elements, ES6 style code block above, did you notice the empty comma before fourth? That’s an inevitable and ugly placeholder for the third element in the states array. We happen not to be interested in it, but must account for it with that placeholder since we want to get to one or more elements after it.

const [, , ,fourth, , , , , ,tenth] = states;
console.log(fourth, tenth); // Akwa Ibom, Delta

The biggest problem apart from the unsightly commas, is that this also makes for brittle code. It is very easy for you, a member of your team, or you at a later date, to miss the count of those placeholders and introduce a bug to your code.

Destructure Arrays Like Their Cousins — Objects

JavaScript Objects have a related de-structure syntax and it is void of the above issues when de-structuring Arrays. Since Objects are key/value pairs and not indexed like arrays, their syntax is kinda more straight forward:

const me = {name: 'Charles Odili', company: 'Andela'};
// 1. put value of name key from me object into name variable below
const { name } = me;
console.log(name); // Charles Odili
// 2. put value of name key from me object into chalu variable below
const { name: chalu } = me;
console.log(chalu); // Charles Odili

Recall from first principles that Arrays are also objects. In fact, running typeof [] in Chrome DevTools will produce “object”

Also recall that elements in an Array can be thought of as values to their respective index within the array. This means looking at the states array above with the lens of an Object, the Abia entry is the value of key 0 and the Adamawa entry is the value of key 1.

All of this explains why, for a cleaner and better syntax trick, we can de-structure Arrays like Objects, but using the array indexes as keys which are mapped to variables representing the Array entry for the said index.

This code block below does just that, and does it elegantly:

const {0: first, 3: fourth, 9: tenth} = states;
console.log(first, fourth, tenth); // Abia, Akwa Ibom, Delta

Finally

We have identified how difficult and error-prone it can be to maintain code using the default ES6 Array destructuring syntax, notably if you are reaching deeper into the Array to access the elements you want, and probably having to skip a number of preceding elements that you don’t need.

Given that JavaScript Arrays can be treated like Objects, allowing you treat the Array indexes as keys which map to the Array elements at that index, we can apply this understanding to destructure JavaScript Arrays in a concise, more readable, and maintainable way, just like with Objects.

If for some reason you don’t like this approach and want to stick with the default approach to Array de-structuring in JavaScript, that’s also fine! Maybe you can try sorting your Arrays first (especially for mid to large arrays) in such a way that you won’t need to reach deeper into the Array with placeholder commas to grab the entries you want.

Let me know what you think in the comments section. Feel free to like/clap, recommend and share with your friends who might equally benefit.