JavaScript Destructuring

Today we’re gonna talk about another JavaScript ES6 feature which is Destructuring. It is like creating small pieces of an array or object and storing them in separate variables. In ES6 we can destructure in very easy way.

First we are going to understand Array Destructuring.
Arrays are generally used to store data like a list. Let’s have an array of cars -

const cars = ['Audi', 'Mercedes', 'Lamborghini', 'Ford'];

Don’t mind if I missed your favorite brand, hehe. So, if we want to store the elements of this array in separate variables, we would write -

const firstCar = cars[0];
const secondCar = cars[1];
const thirdCar = cars[2];
const fourthCar = cars[3];

As we know array index starts form 0. But this is so much code for a simple task. ES6 helps us to do this in a single line! How? Let’s see the code first.

const [ firstCar, secondCar, thirdCar, fourthCar ] = cars;

This is going to do the same task which we done writing 4 lines in ES5. Easy isn’t it? Let’s explain. In the left hand side, we just need one let keyword for all the variables. Then we put square brackets[] because we’re going to destructure an array and array’s have square brackets. Then we put our variable names inside them. On the right hand side, we give the array name which we want to destructure.

What JavaScript does is, it goes through the elements of the array and assigns them to our variables serially. So our first variable name firstCar is going to have the first element of our array which is car[0] or Audi and eventually the next variable is going to store the next element. We can visualize the code like this -

const [ firstCar, secondCar, thirdCar, fourthCar ] = ['Audi', 'Mercedes', 'Lamborghini', 'Ford'];

Hope that makes it more clear now.

Let’s jump to Object Destructuring!
We use enormous amount of objects when we deal with large amount of data. Imagine we have a user object -

const user = {
  name: 'John Doe',
  age: 18,
  isMarried: false
};

If we want to store user object’s name , age and isMarried in separate variables, what we would do in ES5? We do -

const name = user.name;
const age = user.age;
const isMarried = user.isMarried;

ES6 allows us to do this in single line just like above. Guess how -

const { name, age, isMmarried } = user;

We just need to put curly braces{} to surround our variables as objects have curly braces. Rest of the code is almost same as array destructure. But here, JavaScript doesn’t just goes through the object’s properties but it matches them with the variable names. If our variable name matches with any of it’s property, the value of the property is assigned to our variable.

As our variable name age matches with the user object’s age property, the value 18 is assigned to our age variable. Likely, our name and isMarried variables are gonna store respectively 'John Doe' and false. Just like array, you can think it like -

const {name,age,isMmarried} = {name:'John Doe', age:18, isMarried:false};

Let’s dig deep. JavaScript only assigns property values if your variable name matches property names. What if we want to assign the values in variables with different names? Like, we want to store the age property’s value 18 in a variable called userAge. Can we do that? Of course we can!

const { name, age:userAge, isMarried } = user;

We do what we did before, just add our variable name userAge along with the name that matches the age property with a colon:. So now, three variables are created name , userAge and isMarried which are assigned with 'John Doe' , 18 and false respectively.

So much thing we learnt today. Just one final thing to see. What about having an array inside an object and storing element of the array in a variable? Suppose we have -

const person = {
  profession: 'student',
  hobby: ['sleeping', 'eating']
};

That person is definitely me. Here, we want a variable named firstHobby to store the sleeping element of the hobby property of the person object. To do this we write -

const { hobby:[ firstHobby ] } = person;

As the person is an object, we go in it with curly braces to access the property hobby and as it is an array we go in it with square brackets and put out variable name firstHobby which now stores the value sleeping.

At last, we’re able to conquer the distructuring method. High five!
Now I’m gonna take your leave. See you soon. Assalamualaikum :)

Btw, how is the distructuring featured photo?