JavaScript Best Practices — Destructuring

John Au-Yeung
May 28, 2020 · 4 min read
Photo by David Clode on Unsplash

JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.

In this article, we’ll look at how to use the JavaScript destructuring syntax to our advantage.

Use Object Destructuring When Accessing and Using Multiple Properties of an Object

It saves us from creating temporary references to those properties.

For instance, instead of writing the following to assign our object properties to variable the old way:

const obj = {
a: 1,
b: 2
}
const a = obj.a;
const b = obj.b;

We can write the following:

const obj = {
a: 1,
b: 2
}
const {
a,
b
} = obj;

In the code above, we set the obj.a ‘s value to a and obj.b ‘s value to b with the destructuring syntax. It’s the same as the old way, which requires us to access the object properties individually.

The benefit is that we don’t have to reference obj in every line.

In both examples, we have the value of a being 1 and the value of b being 2.

It also works with function arguments. For instance, we can destructure object parameters into variables by writing the following:

const obj = {
a: 1,
b: 2
}
const add = ({
a,
b
}) => a + b;
const sum = add(obj);

In the code above, we have the same obj object with properties a and b . We also have the add function, which takes an object with properties a and b and returns the sum of them.

We then pass in obj as an argument of add . The destructuring syntax will then take the value of property a and set it as the value of parameter a and do the same for b .

Therefore, we get 3 as the return value in the example above.

Furthermore, we can do the same thing for objects in arrays. If we use the for...of loop, then we can use the object destructuring syntax as follows:

const arr = [{
name: 'jane',
age: 20
},
{
name: 'joe',
age: 22
},
];
for (const {
name,
age
} of arr) {
console.log(name, age);
}

In the code above, we destructured our object in the first line of our for...of loop. We destructured the name and age properties of each entry of arr into the name and age loop variables is updated in each iteration.

Use Array Destructuring

const [a, b] = [1, 2];

In the code above, we set the variable values by the position that they’re in. So a is set to 1 and b is set to 2.

This is much better than assigning them to variables the old way, which is the following:

const arr = [1, 2];
const a = arr[0];
const b = arr[1];

As we can see, we’ve to write 3 lines to do the same thing. Plus we have to set a name for the array before getting the entries and assigning them to variables.

We didn’t have to do that with the destructuring syntax.

Likewise, we can do the destructure arrays in parameters. For instance, we can write the following code:

const add = ([a, b]) => a + b;
const sum = add([1, 2]);

In the code above, we destructured our array parameter in the add function into variables and return them added together.

Then we can call add with an array in the 2nd line to get the sum of them.

We can also use the syntax in the for...of loop as follows:

const arr = [
['a', 1], ['b', 2]
];
for (const [key, val] of arr) {
console.log(key, val);
}

In the code above, we destructured our array entries in the for...of loop much like how we did it with the object destructuring syntax, so we get:

a 1
b 2

logged in the console.

Photo by John Torcasio on Unsplash

Conclusion

With arrays, the destructuring is done by matching the position of the array entry with the position of the variable.

The Startup

Get smarter at building your thing. Join The Startup’s +785K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +785K followers.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +785K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store