JavaScript Interviews: Can You Give an Example of Destructuring an Object or Array?

A few quick and simple code samples

Photo by Barrett Ward on Unsplash

Before We Destructure, What Is a Structure?

In computer science, the type of structures that we constantly build and use are called data structures.

A data structure is a storage format created for the purpose of storing and organizing data, often prioritizing the accessibility and customization of that data. In other words:

“More precisely, a data structure is a collection of data values, the relationships among them, and the functions or operations that can be applied to the data.” -Wikipedia

JavaScript has two built-in data structures: arrays and objects.

What Does It Mean to “Destructure” a Data Structure?

“The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.” — MDN

That’s the MDN definition. Personally, the most helpful part of this definition is the word unpack, keep that term in mind as we move forward.

Let’s dive right in with a code sample for destructuring an array:

In the first line, we are declaring a new variable studentsArr, and assigning it the value of an array of student names. Line 2 is where we destructure.

In line 2 we declare three variables; first, second, and third. By declaring them on the left-hand side, we initiate destructuring. By writing syntax this way, in line 2 we are saying to JavaScript:

“I want you to destructure, or “unpack” the array on the right-hand side. Once you have destructured or “unpacked” the array, I want you to assign its values to the variables on the left-hand side.”

In doing so, we have declared three new variables and assigned them three different values, all in one line of code. Without destructuring, this would take three lines:

The Rest ‘…’ Parameter

If we want to assign the first few values of an array to specific variables, but we also want to capture the rest of the array values, we can use the rest syntax:

The remaining array values are assigned to rest. You can use any name to assign the remaining values to, as long as it is preceded by the … rest syntax.

Destructuring Objects

Destructuring is especially useful for unpacking data from objects. For example, let’s say we have a movie app filled with movie objects like so:

If we want to pull individual values from this object, we could do this:

const title = movie.title
const country = movie.country

Or, using the destructuring syntax we could do this instead:

const {title, country} = movie
console.log(title, country) // 'Star Wars', 'United States'

JavaScript will take the variables declared on the left-hand side and match them to the corresponding values within the chosen destructured object!

Nested Destructuring

Let’s say we have nested data that we would like to reach using destructuring. This may sound complicated, but it’s actually quite simple!

Note the simplicity of this syntax as opposed to the usual chaining.

Default Values

Destructuring can also be used to assign default values. Using our movie example, there are occasionally films that don’t disclose their budgets. If we want to account for that in our destructuring, we can assign a default:

And That’s All Folks!

I hope I was able to “unpack” this concept for you in a way that is easy to understand. With a little practice, I promise this concept will click quickly.

Thanks for reading!