Destructuring: Why You Should Master It
By: Laura Archambault
Tags: JavaScript, Beginner Coding

In my studies at Flatiron School’s Software Engineering program, this just kept coming up. Each time, I understood that it was a shortcut for naming variables. But in my own code, I’d give it a couple shots, spend 35 seconds skimming MDN’s resources…and then just do it the long way.

You see, there’s never enough time to learn EVERYTHING. With so many priorities, mastering destructuring stayed on the back burner. But this is 100% worth it; even necessary. You should trust me — I’ve never told a hyperbole in my life.

Keep reading for my reasons why AND the code examples to prove it.

THE BASICS: Destructuring is a shortcut to break down information stored in an object or array (or “iterable”, like a string). It takes a collection and “destructures” it into individual pieces of info, which can be assigned to variables (and more!).

Basic Demo: Array Destructuring

//here's an array. We want to create a variable for each element. const array = ["Laura", "loves", "to", "learn"] // 1. declare with let, var, or const

// 2. list your variables in [brackets] on left of =

// 3. list the array containing values on right of = let [ one, two, three, four ] = array //call the newly assigned variables one //=> "Laura"

two //=> "loves"

three //=> "to"

four //=> "learn"

Basic Demo: Object Destructuring

//here's an object. We want a variable for each key

//so we can access the values more easily. const obj = { name: "Laura", hobbies: "dancing and coding", drink: "chai"} // 1. declare with let, var, or const

// 2. list your variables in {curly boys} on left of =

// 3. list the object on right of = let { name, hobbies, drink } = obj //call the newly assigned variable name //=> "Laura"

hobbies //=> "dancing and coding"

drink //=> "chai" // NOTICE: we did not have to call obj.name or obj.hobbies, etc

disclaimer: This isn’t actually a full tutorial. I don’t think I can explain it better than it’s already been taught here.

Now, what you’ve been waiting for…

4 Reasons You Should Master Destructuring

1. Save Time when Creating Variables

Destructuring doesn’t take much longer than declaring a single variable — and you can declare all the variables at once.

without destructuring:

//with this object

favoriteTeas = { laura: "Chai", nick: "Irish Stout", james: "Peach", olivia: "Coconut" } // if we access the values a lot, it's un-DRY

`When the Archambaults drink tea, they like ${favoriteTeas.laura}, ${favoriteTeas.nick}, ${favoriteTeas.james}, and ${favoriteTeas.olivia}.` // we can save some time by assigning variables, but without destructuring, this takes forever.

let laura = favoriteTeas.laura

let nick = favoriteTeas.nick

let james = favoriteTeas.james

let olivia = favoriteTeas.olivia

with destructuring:

// we can save time! with the same favoriteTeas object:

let { laura, nick, james, olivia } = favoriteTeas //DONE! and our final code is prettier too:

`When the Archambaults drink tea, they like ${laura}, ${nick}, ${james}, and ${olivia}.`

With this simple example, you can already see the time you save! Now imagine a more deeply nested object where you access a specific piece of nested data. This brings us to our second point:

2. Save Time when Accessing Nested Data

So if we get beyond our rudimentary example, sometimes you have deeply nested info and you have to access part of it… A LOT.

let meals = {

breakfast: {

sunday: "eggs and sausage",

monday: "biscuits and gravy",

tuesday: "cereal",

wednesday: "cinnamon toast",

thursday: "cereal",

friday: "pancakes",

saturday: "eggs and bacon"

},

lunch: {

sunday: "ham and cheese sandwich",

monday: "quesadillas",

tuesday: "pb&j",

wednesday: "chicken salad",

thursday: "ham and cheese sandwich",

friday: "chicken nuggets",

saturday: "pb&j"

},

dinner: {

sunday: "burritos",

monday: "lasagna",

tuesday: "chicken pie",

wednesday: "mushroom tortellini",

thursday: "chili",

friday: "pizza",

saturday: "fried chicken"

},

}

I’ve made it a little more complicated, but still fairly simple for this example. In your code, you’ll probably have arrays of objects of objects of arrays…

Back to this example. So let’s say I’ve got some code that’s working on dinner, and that I have to access various dinners several times in the code. It could look like this:

function fakeCode {

does fake work to meals.dinner.monday

if (meals.dinner.tuesday === meals.dinner.thursday) {

do work to meals.dinner.wednesday

} else {

do work to meals.dinner.friday

}

}

So yeah, that’s ridiculous fake code…but aren’t you already sick of seeing meals.dinner ?

Let’s try the same fake code with destructuring

let { monday, tuesday, wednesday, thursday } = meals.dinner function fakeCode {

does fake work to monday

if (tuesday === thursday) {

do work to wednesday

} else {

do work to friday

}

}

Now just think about all the time you’ll save when you don’t have to type meals.dinner all the time.

3. Less Confusion

This point doesn’t really get its own example, I’m just going to point out how confusing it can be with un-destructured code. Imagine several pieces of data:

user[0].events[0].weather.chanceOfPrecip,

user[0].events[0].weather.typeOfPrecip,

user[0].events[0].weather.highTemp,

user[0].events[0].weather.lowTemp

If you have to look at stuff like that in your ternaries and nested loops, you’re going to have a hard time following your own logic. Imagine how much time you’ll save if your ternaries and nested loops contain destructured code!

let { chanceOfPrecip, typeOfPrecip, highTemp, lowTemp } = user[0].events[0].weather //now, our list becomes

chanceOfPrecip,

typeOfPrecip,

highTemp,

lowTemp // and I don't mind that so much!

4. Greater Control

This ‘destructuring’ thing gives you a lot of control over accessing your data. When you assign variables with destructuring, it keeps your code cleaner. But you have a lot of unique shortcuts BEYOND just assigning variables.

JavaScript’s documentation blew my mind: with array destructuring, we can assign values to PROPERTIES, not just variables. 🤯!!

For example, an object’s properties can be assigned values. So if we put these ‘assignables’ on the left, it will destructure the elements in the array and assign them to properties on the object.

// the 'tea' object is 'assignable'

let tea = {} // using array destructuring:

// 1. place the desired properties on the left

// 2. put the array to destructure on the right let ingredients = [ "black tea", "cinnamon", "cloves" ]

[ tea.first, tea.second, tea.third ] = ingredients // now, 'tea' properties have been assigned!

tea.first //=> "black tea"

tea.second //=> "cinnamon"

tea.third //=> "cloves" tea //=> {

first: "black tea",

second: "cinnamon",

third: "cloves"

}

So the documentation provides neat little gems like that. Imagine how much time you’ll save if you’re needing to take form input and assign it to fields for a database, or vice-versa. Again: 🤯!!