Destructuring in Javascript

Where would we be without ES6? Destructuring is one of the many things that were introduced. It’s easy forget about it with all the other major features added, but its a nice quick and short way to clean up your code. In this article I will explain what Destructuring is and how to implement it.

What is Destructuring?

Destructuring in Javascript gives us the ability to extract values from objects. No longer are the days where you have to create multiple variables and call every element of an array or every key on an object to assign them. Destructuring gives us a streamlined way to exact the values we want all in one line.

//pre ES6
let dogs = ['Ada', 'Taz']
let dog1 = dogs[0]
let dog2 = dogs[1]

dog1
// => 'Ada'
dog2
// => 'Taz'

let myDogs = {
   boyDog : "Taz",
   girlDog : "Ada"
}

let boyDog = myDogs.boyDog
let girlDog = myDogs.girlDog

boyDog
// => 'Taz'
girlDog
// => 'Ada'

The above is an example of assigning variables from an array and object. For the Array, we have to use the element index to extract the value. For the object, we have to use the key to extract the value. We also have to use the variable keyword for each variable we are creating. While this is simple to follow and easy to write it takes up a lot of space. I am only doing this with two values inside my objects. Imagine how tiring and boring it would get with larger datasets!

Implementation

Setting up the Destructuring Assignment is very simple. It looks a little strange at first glance. Lets break it down.

let dogs = ['Ada', 'Taz']
let [dog1, dog2] = dogs

dog1
// => 'Ada'
dog2
// => 'Taz'

let myDogs = {
   boyDog : "Taz",
   girlDog : "Ada"
}

let {boyDog, girlDog} = myDogs

boyDog
// => "Taz"
girlDog
// => "Ada"

Whoah, thats a lot less redundant code! Lets break down how this works starting with the array example above. We start out with a dog array that has two elements. The next line we are doing a couple different things at once. We are declaring the dog1 and dog2 variable and then assigning them the values of the dogs array. When destructuring an array what we put inside the [] to the left of the = will be the name of our new variables we are creating. To the right of = is the array we are destructuring. Its that simple. Some interesting things to keep in mind:

• only the variable names you put in the [] to the left of the = will be created. If you had an array with 10 elements but only wanted the first two, all you have to do is put two variable names in the [] and only the first two elements will be extracted.

let number = [1,2,3,4,5,6,7,8,9,10]
let [one, two] = number
one
 //=> 1
two 
 //=> 2

• you can skip elements in the array that you do not want to exact with ,,. So from our example above if we wanted the first two elements and then the 6th one we can do the following.

 let number = [1,2,3,4,5,6,7,8,9,10]
let [one, two,,,,six] = number
one 
// => 1
two
// => 2
six
// => 6

• you can also setup default values if you like. If there is no element to extract for that position the default value will take over.

let food = ['eggs', 'sandwich']

let [breakfast='cereal', lunch = 'salad', dinner = 'steak'] = food

breakfast 
// => 'eggs'
lunch
// => 'sandwich'
dinner
// => 'steak'

In the above example, if we did not have default values then the dinner variable would have been undefined.

Now lets talk about objects. Object destructuring is very similar to array destructuring. Lets look at the myDogs object from earlier. The setup is the same as the array. Everything to the left of our = will be our variable names and to the right will be what we are destructuring. One difference here is that we use {} instead of []. The major difference is that we need to be aware of what are variable names are. In array destructuring we can call our variables whatever we want since arrays work off an index, but objects retrieve information with keys. So in order for Javascript to know what value we are trying to retrieve, we must use the key associated with that value in our {}. There are two ways to do this. If the variable name is the same as the key then we can use just the keys in our {}.

let myDogs = {
   boyDog : "Taz",
   girlDog : "Ada"
}

let {boyDog, girlDog} = myDogs

Now if we want out variable names to be different than the keys we need to include : when we are Destructuring.

let myDogs = {
   boyDog : "Taz",
   girlDog : "Ada"
}

let {boyDog:youngestDog, girlDog:oldestDog} = myDogs

Above, we are declaring two new variables the youngestDog and the oldestDog and then assigning the value of the boyDog key and girlDog key from the myDogs object.

One last thing to keep in mind about object Destructuring is that you can have default values just like we did with arrays.

There you have it, Destructuring in all its glory. The syntax can feel a little foreign when you start but once you give it time, it will become second nature.