Understanding Destructuring Assignment in JavaScript

Copy Link LinkedIn Message Facebook Email X

In this lesson, you will learn about destructuring assignment. This is a great way to assign values to variables from arrays or properties from objects.

Traditional Variable Assignment

There are times when you may want to declare a bunch of variables all at once, perhaps you get a row from a table in an array:

const row = ['nomad', 976, null, 'caravan'];

const name = row[0];
const age = row[1];
const occupation = row[2];
const dwelling = row[3];

There is nothing wrong with this way of doing things, but with ES6, there is a faster way that involves less typing.

A Faster Alternative: Destructuring Assignment

const row = ['nomad', 976, null, 'caravan'];
const [name, age, occupation, dwelling] = row;
console.log(name, age, occupation, dwelling); // nomad 976 null caravan

This is called destructuring assignment, and it also works for objects:

const person = {
	name: 'nomad',
	age: 976,
	occupation: null,
	dwelling: 'caravan'
};

const { name, age, occupation, dwelling } = person;
console.log(name, age, occupation, dwelling); // nomad 976 null caravan

Destructuring assignment is an efficient way to extract values from array or properties from objects and assign them somewhere.

What is more, with both examples, you can choose which ones to get:

const row = ['nomad', 976, null, 'caravan'];

const [drifterName] = row;
console.log(drifterName); // nomad

const person = {
	name: 'bill',
	age: 35,
	occupation: 'delivery driver',
	dwelling: 'flat'
};

const { name } = person;
console.log(name); // bill

You aren't limited to using the same property names, either:

const { name: drifterName } = person;
console.log(drifterName); // bill

As you can see, you can set the variable name to whatever you want with the syntax above.

With arrays, it assigns in order, whereas with objects, the variables have to have the same name as the properties.

const row = [1, 2, 3, 4, 5];
const [a, b, c] = row;
console.log(a, b, c); // 1, 2, 3

const person = {
	name: 'bill',
	age: 35,
	occupation: 'delivery driver',
	dwelling: 'flat'
};

const { d, e, f } = person;
console.log(d, e, f); // undefined, undefined, undefined

const { name, age } = person;
console.log(name, age); // bill 35

As you can see, this can make extracting values from arrays and objects much more succinct.

Learn by Doing

Copy the examples from this lesson and get them working in your labs. Make a few variations, too.

Please be sure to push your code to Github when you're done.

Summary: JavaScript Object Destructuring and Array Destructuring

In this lesson you've:

• Discovered destructuring assignment, which allows you to unpack values from arrays or properties from objects directly into variables, reducing the amount of code you need to write.
• Saw how to extract array elements and assign them to variables using the concise [name, age, ...] syntax instead of accessing each index individually.
• Applied destructuring to objects, extracting properties with the {name, age, ...} syntax, and learned that the variable names must match the property names.
• Understood that you can rename variables while destructuring from objects, giving you the flexibility to avoid naming conflicts or to create more suitable variable names.
• Realized that when destructuring arrays, the assignment follows the order of the elements, while destructuring objects relies on matching the property names.
• Notice how leaving variables unmatched by properties in an object leads to them being undefined.