What is Destructuring Assignment in JavaScript?

De-structuring assignment used to unpack values from arrays, or properties from objects, into distinct variables.

For example,

HelloWorld.js

var arr1 = [2, 3, 5, 7, 11]

var [a, b, c, d, e] = arr1;

console.log("a : " + a);
console.log("b : " + b);
console.log("c : " + c);
console.log("d : " + d);
console.log("e : " + e);

Output

a : 2
b : 3
c : 5
d : 7
e : 11

As you see, above script, I defined 5 variables a, b, c, d, e in one line using destructuring assignment.

Destructuring to Rest parameters

var [a, b, ...c] = arr1;

First two values of the array arr1 are assigned to a, b and remaining values are assigned to c.

HelloWorld.js

var arr1 = [2, 3, 5, 7, 9]

var [a, b, ...c] = arr1;

console.log("a : " + a);
console.log("b : " + b);
console.log("c : " + c);

Output

a : 2

b : 3

c : 5,7,9

Destructuring object data

HelloWorld.js

var obj = {name : "Krishna", "age" : 29};

({name, age} = obj);

console.log("Name : "+ name);
console.log("Age : " + age);

Output

Name : Krishna

Age : 29

Order of the properties in the object doesn’t matter.

({age, name} = obj);

Above statement assign obj.age to age, obj.name to name.

HelloWorld.js

var obj = {name : "Krishna", "age" : 29};

({age, name} = obj);

console.log("Name : "+ name);
console.log("Age : " + age);

Output

Name : Krishna

Age : 29

Assigning property values to new variable names

({age:myAge, name:myName} = obj);

In the above statement, myAge and age has same value, name and myName has same value.

HelloWorld.js

var obj = {name : "Krishna", "age" : 29};

({age:myAge, name:myName} = obj);

console.log("myName : "+ myName);
console.log("myAge : " + myAge);

console.log("Name : "+ name);
console.log("Age : " + age);

Output

myName : Krishna

myAge : 29

Name : Krishna

Age : 29

Destructuring and default values

You can assign default values to the destructured variables. If the value unpacked from the object is undefined, then this default value is used.

HelloWorld.js

var obj = {name : "Krishna", "age" : 29, id: undefined};

var {age, name, organization="ABC Corp", id = 123} = obj;

console.log("age : " + age);
console.log("name : " + name);
console.log("organization : " + organization);
console.log("id : " + id);

Output

age : 29

name : Krishna

organization : ABC Corp

id : 123

Assigning default values to new variable names

HelloWorld.js

var obj = {name : "Krishna", "age" : 29, id: undefined};

var {age, name, organization : myOrganization="ABC Corp", id:myId = 123} = obj;

console.log("age : " + age);
console.log("name : " + name);
console.log("organization : " + myOrganization);
console.log("id : " + myId);

Unpacking fields from objects passed as function parameter

HelloWorld.js

var person = {
  firstName : "Krishna",
  lastName : "Gurram",
  age : 29,
  address :{
    city : "Bangalore",
    country : "India"
  }
}

function printPersonInfo({firstName, address}){
  console.log(`Hello Mr ${firstName}, you are from ${address.city}`)
}

printPersonInfo(person);

Output

Hello Mr Krishna, you are from Bangalore

You can even extract the nested properties using destructuring.

function printPersonInfo({firstName, address : {city}})

HelloWorld.js

var person = {
  firstName : "Krishna",
  lastName : "Gurram",
  age : 29,
  address :{
    city : "Bangalore",
    country : "India"
  }
}

function printPersonInfo({firstName, address : {city}}){
  console.log(`Hello Mr ${firstName}, you are from ${city}`)
}

printPersonInfo(person);

Output

Hello Mr Krishna, you are from Bangalore

You can even pass default values and choose custom names to destructured parameters.

HelloWorld.js

var person = {
  firstName : "Krishna",
  lastName : "Gurram",
  age : 29,
  address :{

  }
}

function printPersonInfo({firstName, address : {city : myCity = "Hyderabad", country : myCountry = "India"}}){
  console.log(`Hello Mr ${firstName}, you are from ${myCity}, ${myCountry}`)
}

printPersonInfo(person);

Output

Hello Mr Krishna, you are from Hyderabad, India

Previous                                                 Next                                                 Home