Destructuring in Javascript

Jordan Eckowitz
3 min readNov 12, 2018

The two most common data structures in Javascript, as in most languages, are objects and arrays. Javascript ES6 provides a useful syntax for unpacking objects and arrays into variables with assigned values. I’ll dig into some of those useful patterns here.

Let’s start off with arrays. The basic example shown here illustrates how easy it is to assign values to multiple variables in a single line of code. Each element in the array on the left is defined as a constant variable with a value equal to its matching element position in the array on the right.

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

What happens if the arrays are of different lengths? The additional variables are declared but are undefined.

const [a,b,c] = [1,2]console.log(a) // 1console.log(b) // 2console.log(c) // undefined

We can also skip over variable declarations if we don’t have a value to assign to them.

const [a,b,c] = [1, ,3]console.log(a) // 1console.log(b) // undefinedconsole.log(c) // 3

Destructuring applies to any iterable and can be useful for applying to strings.

const [firstName,lastName] = "Jordan Eckowitz".split(" ")console.log(firstName) // Jordanconsole.log(lastName) // Eckowitz

We can use the spread operator together with destructuring. In the example below we set variables for the first and last names and set all remaining elements equal to a variable called rest. That’s the common nomenclature but you can name it whatever you want.

const [firstName,lastName,...rest] = ["Nelson","Mandela","President","South Africa"]console.log(firstName) // Nelsonconsole.log(lastName) // Mandelaconsole.log(rest) // [ 'President', 'South Africa' ]

We can also set default values for variables to use if no value is assigned.

const [username = "User", password = "Password"] = ["Jordan"]console.log(username) // Jordanconsole.log(password) // Password

The syntax for object destructuring looks similar: an object on the left equals an object on the right. The way it works is that the variable names declared in the object on the left have to match names of keys in the object on the right. Because it’s matching the variable name to key names the order of the variables is not significant in the same way it is with arrays.

const me = {firstName: "Jordan",lastName: "Eckowitz",city: "New York"}const {city,firstName,lastName} = meconsole.log(firstName) // Jordanconsole.log(lastName) // Eckowitzconsole.log(city) // New York

It may seem somewhat limiting that the variable declaration name and the object key have to be an exact match. We can actually redefine variable declarations in the object on the left. In the example below I redefined city as place using the : syntax.

const me = {firstName: "Jordan",lastName: "Eckowitz",city: "New York"}const {city:place,firstName,lastName} = me
console.log(firstName) // Jordanconsole.log(lastName) // Eckowitzconsole.log(place) // New York

As with array destructuring we can also set default values for variable declarations.

const me = {firstName: "Jordan",lastName: "Eckowitz",}const {city="Johannesburg",firstName,lastName} = meconsole.log(firstName) // Jordanconsole.log(lastName) // Eckowitzconsole.log(city) // Johannesburg

Further, we can also use the spread operator when dealing with objects. In the example below the undeclared variables are stored in the rest object.

const me = {firstName: "Jordan",lastName: "Eckowitz",city: "New York"}const {city, ...rest} = me
console.log(city) // New York
console.log(rest) // { firstName: 'Jordan', lastName: 'Eckowitz' }

Conclusion

Is destructuring necessary? No. Does it make your code cleaner, more concise and legible? Yes, it certainly does.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

No responses yet

Write a response