Destructuring function arguments in JavaScript (es6)

In es6, we got a more powerful feature which is the destructuring syntax Let’s learn about it.

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.