Scott Whittaker

Software Engineer

Day job React | side projects Svelte


The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects into distinct variables.


Object Destructuring

What everyday problem does this address? A common thing to want to do is extract some data from an object, for example, a name and manufacturer from a starship object (I am always dealing with starships).

Given the following object (an example from SWAPI) we would normally do something like this…

const starship = {
	name: 'Millennium Falcon',
	model: 'YT-1300 light freighter',
	manufacturer: 'Corellian Engineering Corporation',
	cost_in_credits: '100000',
	length: '34.37',
	max_atmosphering_speed: '1050',
	crew: '4',
	passengers: '6',
	cargo_capacity: '100000',
	consumables: '2 months',
	hyperdrive_rating: '0.5',
	MGLT: '75',
	starship_class: 'Light freighter'

// old skool
const starshipName =;
const starshipManufacturer = starship.manufacturer;

Nothing wrong with that but destructuring provides a different and more convenient way to achieve this…

// new skool
const { name, manufacturer } = starship;
console.log(name, manufacturer); // Millennium Falcon, Corellian Engineering Corporation

Note the curly braces in the statement, this is the destructuring syntax…

const { name, manufacturer } = starship;

This creates 2 variables called name and manufacturer and assigns the values of and starship.manufacturer respectively. As long as the name of the variable is the same name as the object key the value will be assigned.

For cases where you don’t want to use the same name as an object key, for example you may not want your variable names to include underscores, you can assign to a different name with the following syntax…

// assign different names
const { name: ship, hyperdrive_rating: hyperdriveRating } = starship;
console.log(ship, hyperdriveRating); // Millennium Falcon 0.5

Deeply Nested Objects

const data = {
	id: '1574083',
	username: 'joebloggs',
	counts: {
		media: 1320,
		follows: 420,
		followed_by: 3410

const { follows, followed_by: followedBy } = data.counts;
console.log(follows, followedBy); // 420 3410

Setting Default Values

const config = {
	width: 100,
	height: 60

const { width = 80, height = 40, color = 'red' } = {};
console.log(width, height, color); // 80, 40, red

const { width: w = 80, height: h = 40, color: c = 'red' } = config;
console.log(w, h, c); // 100, 60, red