Destructuring function arguments in JavaScript (es6)

In es6 we got a more powerful feature which is the destructuring syntax.

What is Destructuring ?

Destructuring syntax helps us extract the values from the arrays or objects into their own named variables.

Let’s see an example without using destructuring syntax.

function userInfo(user){

   const name = user.name;   const age = user.age;
}

userInfo({name:"gowtham",age:22})

In the above code, we extracted the object data by using dot notation user.name but you can see its already hard to declare a new variable for every property in the object we have.

Destructuring function arguments example

Now, we are rewriting the same code by using the destructuring syntax.

function userInfo({name,age}){
   console.log(name,age)

}

userInfo({name:"gowtham",age:22})

In the above code, we unpacked the object properties inside the function parameter by using destructuring syntax {name, age}.

We improved our code so much by using destructuring.

The order of destructing the object properties doesn’t matter for example.

function userInfo({age,name}){
   console.log(name,age)

}

userInfo({name:"gowtham",age:22})

Here we extracted the age property first and name property second.