In this tutorial, we are going to learn about object destructuring in javascript.

So, let's get started...

What is Destructuring?

Destructuring is an ES6 feature and it's basically a way of unpacking values from an array or object into separate variables.

In other words, Destructuring is a way to break a complex data structure down into a smaller data structure like a variable.

In Object  Destructuring Order of an element does not matter like an array, so provided the exact name of the property. 

const sampleObj = {
  name: 'Adam',
  address: 'New york, 21',
  age:'22'
};


const {age, name} = sampleObj ;
console.log(age, name);
//Output : 22, Adam

Note : When we destructure an array we use square brackets, when we destructure an object we use curly braces.

Using different property name

const {name:userName,age:ageNow} = sampleObj;

console.log(userName,ageNow);
//Output : Adam, 22

Setting Default values

const {languges=[],certificates = []} = sampleObj;

console.log(languges,certificates);
//Output : [],[]

Mutating variables

let m = 111;
let w = 999;
const obj = {m:23,w:7,c:14};
({m,w} = obj);
console.log(m,w);
//output : 23 7

Nested Objects

const users = {
  name: 'Joy',
  address: {
    city: 'san francisco'
  }
};

// Object destructuring:
const { address: { city } } = users;

city; // => 'san francisco'

Rest object after destructuring

const users = {
  fname: 'Joy',
  fullName: 'Joy Benrji',
  job:'developer'
};

const { name, ...fullData } = users;

fullData ; // => { fullName: 'Joy Benrji' }

In above example, the destructuring const { name, ...fullData } = users extracts the property fname and the remaining properties (fullName,job) are collected into the variable fullData.