Destructuring Objects in Javascript

Say if we were to copy properties of an object to given variables, the code would look something like :

var ob = {
	id: 100,
	name: "John",
	age: 28,
};

// copy object properties to 3 variables, 3 statements required 
var id = ob.id;
var name = ob.name;
var age = ob.age;

We can see that 3 statements are required to save 3 object properties to variables. It works, but the code is somehow repetitive.

To cut down such repetitive code, destructuring operator has been introduced. It does the same thing — copy individual properties to given variables — but all in a single line of code.

The above example is rewritten, but this time using destructuring :

var ob = {
	id: 100,
	name: "John",
	age: 28,
};

// copy object properties to 3 variables, 1 statement required
var { id, name, age } = ob

There are multiple options that can be passed while destructuring. They can be best understood through examples.

Assigning Values to Variables from Object's Properties

In the most basic form we can assign variables from object's properties.

var ob = {
	id: 100,
	name: "John",
	age: 28,
};

let { id, name, age } = ob;

// 100
console.log(id);

// "John"
console.log(name);

// 28
console.log(age);

Note that the name of the variables must match the object property names. Otherwise we will get an undefined value for them (however see a below section on how this restriction can be bypassed).

var ob = {
	id: 100,
	name: "John",
	age: 28,
};

// there is no key named "b" in the input object
var { id, name, b } = ob;

// 100
console.log(id);

// "John"
console.log(name);

// undefined
console.log(b);

Assigning Values with Declaration

In cases where variables are declared at some other place, and then if destructuring is performed using those variables, an error will be thrown.

var id, name, age;

// error will be thrown
{ id, name, age } = ob;

It is because Javasript considers a statement starting with { to be the start of a new block. The solution is to use parenthesis () to wrap up the whole statement.

var id, name, age;

// valid
({ id, name, age } = ob);

Assigning Properties to Different Variables Names

Sometimes it may be the case that variable name is different from the property's name. This can be handled by passing the property's name while declaring the variable with a different name.

var ob = {
	id: 100,
	name: "John",
	age: 28,
};

// property "age" is set to variable "b"
var { id, name, age: b } = ob;

// 100
console.log(id);

// "John"
console.log(name);

// 28
console.log(b);

Assigning Default Values if Object Property is Undefined

There may be cases where an object's property may not be present, or may have a value of undefined. In such cases a default value can be passed for the variable.

var ob = {
	id: 100,
	name: "John",
	age: 28,
};

var id, name, b; 

// object has no property named "b"
// "b" will get a default value of 30
( { id, name, b = 30 } = ob);

// 100
console.log(id);

// "John"
console.log(name);

// 30
console.log(b);

Giving a different name to a variable and setting a default value can also be done.

var ob = {
	id: 100,
	name: "John",
	age: undefined,
};

var id, name, b; 

// object has property named "age", but has undefined value
( { id, name, age : b = 30 } = ob);

// 100
console.log(id);

// "John"
console.log(name);

// 30
console.log(b);

Dynamic Property Names

In some cases the name of the object property may be dynamic, and stored in a variable.

Here computed property names can be used to dynamically reference the required property.

var ob = {
	id: 100,
	name: "John",
	age: 28,
};

var type = 'id';

var { [type]: temp, name, age } = ob;

// 100
console.log(temp);

// "John"
console.log(name);

// 28
console.log(age);

Note that while destructuring a name needs to be defined for the dynamic property. Otherwise an error will be thrown.

Assigning Remaining Properties of Object to a Variable

Using the rest pattern ... we can save the remaining properties to a variable. This will be saved as an object.

var ob = {
	id: 100,
	name: "John",
	age: 28,
	gender: "M"
};

var { id, name, ...mics } = ob;

// 100
console.log(id);

// "John"
console.log(name);

// saved as an object
// { age: 28, gender: "M" }
console.log(mics);

Conclusion

Destructuring operator may hamper code readability a bit, but it certainly lessens the amount of (useless) code.