Using ES6 Destructuring in JavaScript

Although the sixth edition of ECMAScript (colloquially known as ES6) was released almost five years ago, there are still a lot of features that new developers like me can implement beyond the simple reason to "get with the times".

ES6 features like destructuring not only make it easier to extract data from complex data types, they also makes our code easier to read and make more sense to the outside world.

In this post I'll be walking you thorough a few ways to use destructuring on objects and arrays in your code.

Destructuring Objects

Keeping with our basketball theme from a few weeks ago, let's say we have an object that contains the starting five for the New Orleans Pelicans.

const pelicans = {
pg: 'Jrue Holiday',
sg: 'Lonzo Ball',
sf: 'Brandon Ingram',
pf: 'Zion Williamson',
c: 'Derrick Favors'
}; 

Now, if we wanted to isolate each player into their own variable, we could create a variable for each player then assign it to the value of the pelicans object like so:

let pg = pelicans.pg;
let sg = pelicans.sg;
let sf = pelicans.sf;

However, writing out each variable declaration and assignment can get pretty boring and repetitive. With destructuring, we can create something that looks like a temporary object that holds all of the keys we'd like to create new variables from, then assign it to the object we're trying to extract from.

Once we console.log one of those newly created variables, we see that it contains the value from the object.

const {pg, sg, sf, pf, c} = pelicans;
console.log(pg); // prints Lonzo Ball to the console

But as most modern basketball fans know, there is a growing trend around the idea of "postionless" basketball, so you might have heard how a point guard might play the "one" or the small-forward is a "three".

So let's use these naming conventions instead! Destructuring also allows us to do that by listing the keys and then pairing them with our new variable names.

const {pg: one, sg: two, sf: three, pf: four, c: five} = pelicans;
console.log(four); // prints 'Zion Williamson' to the console

Passing in an Object as a Function's Parameters

It's very common to take in an object within your function and then do something with only a few of the values you actually need. For example, let's create a simple slamDunk function that takes in a player object and then prints something to the console with their name.

const slamDunk = (playerObj) => {
  console.log(playerObj.first + " " + playerObj.last + " with the slam!");
}

let zion = {
  first: "Zion",
  last: "Williamson",
  team: "Pelicans"
};

This will work, but again, using playerObj.first and then playerObj.last with the additional spaces in-between is a little messy. Destructuring can help us here too, in a couple of ways.

First, we can use assignment destructuring immediately within our function to grab the values we need.

const slamDunk = (playerObj) => {
  const {first, last} = playerObj;
  console.log(first + " " + last + " with the slam!");
}

Looks better, but believe it our not, with the help of template literals (another cool ES6 feature) and backticks within our console.log we can still optimize the function by destructuring our object before it even reaches our function body.

const slamDunk = ({first, last}) => {

  console.log(`${first} ${last} with the slam!`);
}

slamDunk(zion); // prints 'Zion Williamson with the slam!' to the console

You'll notice that our code even recognizes the spaces between the first, last, and the rest of our statement. This kind of formatting makes our rather long console.log into a simple, dynamic string.

Destructuring Arrays

Similarly to object destructuing, you can destruct arrays by declaring your variable names inside brackets (for arrays we use square brackets) then "assigning" to the array you'd like to pull your values from.

For instance, let's say you were only interested in the first three values from whatever array you are being given. You could create a bunch of variables like this:

const array = [1, 2, 3, 4, 5];
const first = array[0];
const second = array[1];
const third = array[2];

Or you can use destructuring to do a lot of that work for you.

const [first,second] = [1, 2, 3, 4, 5];
console.log(first); // prints 1 to the console
console.log(second); // prints 2 to the console

Since arrays are ordered, you can also use commas to "skip" over elements that you don't want to extract. In this example, I'm grabbing the first element in the array. After adding four commas, I'm grabbing the fifth element as well.

const [first,,,,fifth] = [1, 2, 3, 4, 5];
console.log(fifth); // prints 5 to the console

Conclusion

Since complex data types like objects and arrays are so prevalent in our daily life as programmers, it only makes sense that we do everything we can to make that process as simple as possible. As I mentioned last week, we should always be striving to remove complexity from our programs whenever we can.

With destructuring, we remove complexity by quickly extracting the data we need in a simple, logical syntax that makes sense to others reading our code.

If you'd like to learn more things you can do with destructuring, I'd recommend you check out this post from Nick Fitzgerald at Mozilla back when ES6 was first released.

In the meantime, give destructuring a try in your code. It's definitely a little confusing to start, but like anything else, a little practice goes a long way.