Destructuring is one of the cool features that came with the release of ES6 in 2015, in the previous article on How to destructure arrays and objects in JavaScript - part 1, I discussed how destructuring works in arrays, this article focuses on objects and how to destructure them.

Quick reminder in case you forgot how to destructure arrays:

The code snippet below demonstrates how destructuring works in arrays, to know more, follow up on the previous article here.

const colors = ['blue', 'red', 'yellow', 'green', 'purple'];
const [first, second, third, , fifth] = colors;
console.log(first); // 'blue'
console.log(fifth); // 'purple'

How to destructure objects

Destructuring arrays and objects in JavaScript are a bit similar in syntax but they still have their differences since they are not the same data type.

Object literals are denoted by the curly brace {}, so when destructuring objects, we do it like this:

const dog = {
  name: 'Max',
  color: 'brown',
  legs: 4
};

const { name, color } = dog;
console.log(name); // 'Max'
console.log(color); // 'brown'

Note: The variables you set for the destructured properties have to be the same as the property name on the original object, so if we did something like this:

const dog = {
  name: 'Max',
  color: 'brown',
  legs: 4
};
const { owner } = dog;
console.log(owner); // undefined

Also, when destructuring objects, there's no need to skip properties because you can just specify what properties you want out of the object.

You can assign default values to the variables

Just like assigning default values in arrays work when destructuring, it's also possible to set default values in objects too, if the value of the variable evaluates to undefined the default value gets assigned.

for example:

const dog = {
  name: 'Max',
  color: 'brown',
  legs: 4
};
const { owner = 'Steve' } = dog;
console.log(owner); // 'Steve'

It's possible to change the variable name

If you do wish to change the name of the variable to another (alias), you can do that by appending a colon followed by the variable name you wish to use, like this:

const dog = {
  name: 'Max',
  color: 'brown',
  legs: 4
};
const { owner = 'Steve', legs: paws } = dog;
console.log(paws); // 4
console.log(legs); // reference error, undefined

As you see from the snippet, when you transfer a variable to an alias, that variable ceases to exist, so you can only refer to the alias you'd set now.

You can also assign default values to aliases

Yep, you can assign a default value to an alias just in case the original variable does not exist or evaluates to undefined. You do that by assigning the value after setting the alias.

const dog = {
  name: 'Max',
  color: 'brown',
  legs: undefined
};
const { owner = 'Steve', legs: paws = 4 } = dog;
console.log(paws); // 4

neat right?

Finally you can store the remaining properties in another object

Using the rest operator ..., you can store all remaining properties from the original object to a variable.

Note: This technique has to be used just before the closing curly brace:

const dog = {
  name: 'Max',
  color: 'brown',
  legs: 4
};

const { color, ...rest } = dog;
console.log(rest); // {name: "Max", legs: 4}

In the next article, we'll be taking a deep dive into more advanced techniques in destructuring like nested destructuring and destructuring parameters of functions 😃.