Weekly Webtips
Published in

Weekly Webtips

Array & Object Destructuring in Javascript

Photo by Mohamad Mahdi Abbasi on Unsplash

In javascript, we can refer fields of an array or object via [] or calling .something of an object.

Let’s say we have the following arrays & objects and we want to reference their respective fields:

That seems straightforward but isn’t it tedious having to use [] or the . keyword to reference array or object properties? Here is where destructuring comes in.

Destructuring in javascript offers a cleaner & easier way to extract a group of data from array and objects into simpler statements.

Let’s take at the following example:

Over here, we have a double array. We index twice to get the information we need. On the example below, we used destructuring to differentiate between fruits and numbers from the array.

Afterward, we can further extract specific fruits(apple, banana) from the fruits array as well as extracting numbers from the number array.

This is so much cleaner comparing to indicing twice to get certain values from the double array. We can clearly differentiate between apples and numbers in the double array and it is easy for other people to follow the code.

This makes accessing a long array of data much easier instead of using a loop to access all the elements.

Aside from that, you can also default fields to values you are trying to extract out of the array. If the array is empty, as it is over here, it will set defaultVal to “New Name”.

We went through a bit as to how array destructuring works but how about object destructuring?

Let’s take a look at the following example:

Here we have a nested object that contains some information about a relative’s name. Normally, we have to reference several layers down by referencing one layer at a time(obj.information.relatives.aunt).

With object destructuring, we extract one layer at a time. We first extract information out of obj, then relatives out of information, and then aunt of relatives.

If we look at it more closely, destructuring doesn’t look really that much different from referencing multiple nested fields of an object.

In the example above, we can only reference aunt if obj, obj.information, obj.information.relatives and obj.information.relatives.aunt exist.

Enter object destructuring here.

Not only does object destructuring offer a way to extract data out of an object, it gives us the mechanism to default some sort of value to a field if it is not defined:

Over here, if fieldOne is an attribute of obj, then console.log(fieldOne) will print out its value. What if fieldOne doesn’t exist?

In regular cases, that will print out “undefined” but destructuring allows us to default to some value if needed.

Photo by Jon Tyson on Unsplash

Why should we be concerned if fieldOne is defined or not?

Let’s say you are building an application that relies on fieldOne to render some input. If you are building a react application and “fieldOne” is not defined, it can cause the application to error out and not render anything onto the screen. Sounds awful right?

That’s why we want to some default values and taking advantage of that from destructuring is essential in frontend development today. At times, we cannot guarantee whether certain fields of an object exist or not and therefore we need to default it to some value so the application doesn’t crash.

And yes, nested destructuring(as shown in one of the examples above) can look ugly and unreadable but it does give us the option of using default values.

Recently, in es2020, optional chaining is provided as an option to default it undefined if any of the values in a nested object is not available. You can read this article to understand more about optional chaining:

That’s it! Enjoy destructuring your objects apart now! Don’t forget to give them some default values.

--

--

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