Back to Basics - Simple Destructuring in JavaScript

Want to type less, keep your code concise, and quickly access values within objects and arrays? Then you've come to the right place. This week's Back to Basics series will review the incredible (and perhaps underrated?) feature of destructuring in JavaScript. I'll show how to 'take a peak' inside data structures like objects and arrays and assign specific values to a variable for quick easy reference.

As implied by the name, destructuring can help simplify complex data structures into smaller and more manageable fragments. This can be especially helpful when passing objects/arrays as arguments, or if you want to frequently access a deeply nested value within an object since you can save yourself some typing (and potentially typos) by assigning the value to a variable.

Let's begin with simple examples of destructuring arrays and objects in JavaScript.

Below you can see an example with an array of princesses 👑. For the sake of simplicity we are going to destructure the array and create easy references to the first two princesses in the array - let's call them first and second. On line 34 we use the array literal and assign it to our original array. Inside of the array literal we list our new variables first and second which will be mapped to the first two elements in the princesses array in their corresponding order. You can see the logs on lines 35 and 36.

Another option is to assign the remainder of the array to a variable. This can be accomplished by using the spread operator as the third and final variable within our array literal (...remaining). You can see the logs from this alternative example on lines 40-42.

Moving on now..let's explore a simple object example. We need to keep track of the hometowns of each princess (very important stuff, I know). We have a rather large object which lists each princess, her rumored country of origin, and the region said country belongs to. While this is just a fraction of princesses, we can imagine that a complete list would create a much larger object. Hypothetically speaking throughout our program we will want to reference the object which represents each region. We can easily destructure our hometowns object into variables which represent each region.

On line 58 we use the object literal to create a variable europe and assign it to the object hometowns. This variable will be mapped to the value of the key europe inside the hometowns object as proved on line 60. We can also declare two variables like northAmerica and asia in one object literal to pull of the remaining two nested object - take a look at lines 62-66!

Lastly, let's take a brief look at how you can destructure a function parameter. From our princess data - you'd really like to print out the total number of countries represented from each region. To achieve this efficiently through destructuring, pass in the larger hometown object and pick off each region. You can then log the count of keys inside of each country object. Note that here we destructured each region, but you could also just destructure {asia} similar to the earlier object example.

I hope this post helped to provide some foundation for destructuring in JavaScript. There are a lot of other cool ways you can utilize destructuring within your code and I encourage you to explore further. I've linked the MDN doc for your convenience!