Using Destructuring in JS to Write Cleaner Code

As a beginner in vanilla JavaScript, I still struggle with writing clean, concise and easy to read code (otherwise known as DRY code). So, I get excited when I learn a method that makes my code look more ✨elegant✨. Today, we will go over how destructuring does just that.

---

How I initially learned...

Normally, if we wanted to target a specific element in an array we would use the indices of the array. Below we have an array with the first 6 letters of the alphabet. To target the letter A and assign to it its own local variable, we set the variable equal to the letter's index in the array as shown below.

When we console.log the newly made variable we get back the letter A in the original array.

As for objects, we would use dot notation to set new variables to specific elements within the object. Like so...

And when we console.log the new variable it will show the value for the key muppetName...

Now this seems all fine and dandy but what if we had much larger arrays or objects and we wanted to set each element or value to it's own local variable? That would make for a lot of lines of code that is not so easy to read. That's where the wonderful tool of destructuring comes in and cleans everything up.

---

What is destructuring?

The destructuring assignment syntax was introduced in ES6 and it allows you to take objects and arrays and easily extract the values and assign them to their own variables.

Destructuring arrays

Below we have the same array as before but now we can set each value of the array to its own variable in one line of code. To break this down, the new variables need to equal the index positions of the original array and essentially inserted into a new array. Then the new array must be set equal to the original array variable.

And when we console.log each individual variable the values of the original array will show.

We can also skip values within arrays by taking out value we want to skip and keeping the comma.

This will return

Another pretty useful trick is the ability to copy the rest of the array and put it into a new array using the spread operator.

Adding the spread operator syntax to the array constant then returns

Functions that return arrays can also be destructured as show below

Same concept except the array constant is set to the function call with whatever parameters you want to pass and it will return the added and subtracted values.

As you can see this functionality works well on arrays but the power of it is really shown when it is used to destructure objects.

---

Destructuring objects

Unpacking objects works in basically the same way as destructuring an array except instead of square brackets we use curly braces and the variables we designate are not based on the index position but on the name of the key in the object.

Since the variables designated in the curly braces match the keys in the object it will return the values of the nestedName and nestedColor...

However, in the instance that we don't want the variable name to match the key name we can easily change it like so

And when we console.log the new variable name it will console the same value.

We can also access the nested key value pairs within the object we are working with and directly assign variables to them as well.

We set the new curly braced variables equal to the nested object we wanted to access and when we logged the variables it returned the values we wanted!

---

To wrap things up

With all that said, here is a good visual representation of how destructuring cleans up your code when you need to assign local variables to each key value pair in an object...

Dot notation:

Destructuring:

We went from seven lines of code to three! There are a few more cool destructuring tricks we can use to our advantage but these are just a couple of the basic things that I learned that I will definitely be using in my code from now on!