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

A few quick and simple code samples

Andrew Koenig-Bautista
Mar 11 · 3 min read
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:

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


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

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!

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Andrew Koenig-Bautista

Written by

Junior Web Developer, bookworm, viewer of indie films. Passionate about problem-solving and building a more equitable -and joyful- world. Actively job seeking.

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade