Destructuring in JavaScript

Friday, Apr 1, 2022

Object destructuring was introduced in ES6 and it provides an alternative syntax to assign properties of an object to variables.

Prior to ES6, if you wanted to assign a property of an object to a variable you would do it like so:

let name = {
	first: 'Jane',
	last: 'Doe'
};

let firstName = name.first;
let lastName = name.last;
console.info(firstName); // => Jane

The object destructuring syntax allows us to accomplish the same variable assignment using:

let { first: firstName, last: lastName } = name;
console.info(firstName); // => Jane

We see that the same first and last property values assigned to the variables firstName and lastName.

The basic syntax looks like this:

let { property: variable } = object;

The colon : identifies the named property of the object, The value of that property is set as value of the variable we are assigning.

If the named property and name of the variable being set are the same, you can omit the property entirely.

Let’s use our first example. If we wanted to set the variable first to hold the value of name.first, we could do it like so:

let { first } = name;
console.info(first); // => Jane
// multiple
let { first, last } = name;
console.info(last); // => Doe

If a property doesn’t exist, the variable will be set to undefined.

let { nickName } = name;
console.info(nickName); // => undefined

You can set a default value if a property doesn’t exist.

let { nickName = 'Johny' } = name;
console.info(nickName); // => Johny

You can reference nested properties.

let student = {
	id: 1,
	name: {
		first: 'John',
		middle: 'Wayne',
		last: 'Doe'
	}
};

let {
	name: { first, middle }
} = student;
console.info(middle); // => Wayne

You can also extract values of properties where the key or name of a property is a string or would otherwise be an invalid variable name.

let merchandise = {
	type: 'shirt',
	'item-id': 249
};
let { 'item-id': id } = merchandise;
console.info(id); // => 249

Tags