JavaScript: How to perform Object Destructuring in JavaScript ES6

JavaScript ES6 have a few cool implementation and one of them is object destructuring. This feature in a nutshell provide developer with the capability to write shorter codes to access array internal values. There is also an illustration of array destructuring here.

What is Object Destructuring

Object destructuring is a syntax that gives the ability to extract the values from data types like json object from their syntax.

Below shows how we access an object in the past. We will need to access one index at a time and assign it to another variable line by line.

var fruitBasket = {
  numOfApple: 10, 
  numOfOrange: 20, 
  numOfPear: 30
};

var numOfApple = fruitBasket.numOfApple;
var numOfOrange = fruitBasket.numOfOrange;
var numOfPear = fruitBasket.numOfPear;

// 10
// 20
// 30

With destructuring, we can assign the value of an object where the name matches the keys in the object. This way, we reduce the number of lines of code and also improve code readability at the same time! Notice that the ordering of the key does not matter.

const fruitBasket = {
  numOfOrange: 20, 
  numOfPear: 30,
  numOfApple: 10,
};
const { numOfApple, numOfOrange, numOfPear } = fruitBasket;

console.log(numOfApple);
console.log(numOfOrange);
console.log(numOfPear);

// 10
// 20
// 30

Other Usage of Object Destructuring

Now that we have shown the basics, let’s move on to some other more complicated examples. We will explain them one by one.

If there is any extra variables in the destructuring process, the extras will become undefined.

const fruitBasket = {
  numOfApple: 10, 
  numOfOrange: 20, 
  numOfPear: 30
};
const { numOfApple, numOfOrange, numOfPear, numOfUnknown } = fruitBasket;

console.log(numOfApple);
console.log(numOfOrange);
console.log(numOfPear);
console.log(numOfUnknown);

// 10
// 20
// 30
// undefined

If we have more values than it can assign, it will ignore the rest of them. Other way is we can put them into another array by using a rest operator.

const fruitBasket = {
  numOfApple: 10, 
  numOfOrange: 20, 
  numOfPear: 30
};
const [ numOfApple, ...others ] = fruitBasket;

console.log(numOfApple);
console.log(others.numOfOrange);
console.log(others.numOfPear);

// 10
// 20
// 30

In order to ensure that there are some default value assigned if nothing is destructured, we can add in a default value.

const fruitBasket = {
  numOfApple: 10
};
const { numOfApple, numOfOrange = 0, numOfPear = 0 } = fruitBasket;

console.log(numOfApple);
console.log(numOfOrange);
console.log(numOfPear);

// 10
// 0
// 0

If it happens that the receiving json object uses a different keys compare to your code, we can rename these variables in the same line of code. We can also set the default value on top of renaming it.

const fruitBasket = {
  numOfApple: 10, 
  numOfOrange: 20, 
  numOfPear: 30
};
const { numOfApple : appleCount = 0, numOfOrange, numOfPear } = fruitBasket;

console.log(appleCount);
console.log(numOfOrange);
console.log(numOfPear);

// 10
// 20
// 30

Let’s say there is a nested variable or attribute that we would like to access. with object destructuring, it is very easy to read the values. Just need to assign to the level that we would like to destructure.

const everythingBasket = {
  fruitBasket : {
    numOfApple: 10, 
    numOfOrange: 20, 
    numOfPear: 30
  },
  someOtherBasket: {
  }
};

const { numOfApple , numOfOrange, numOfPear } = everythingBasket.fruitBasket;

console.log(appleCount);
console.log(numOfOrange);
console.log(numOfPear);

// 10
// 20
// 30

Conclusion

Object destructuring is something that can be very handy. Especially when we are receiving an object that is nested very deeply and wanted some attributes from within manipulate them individually. Thus, use it well and you will do more with less code!

More reference here!