Array and Object Destructuring

Boston Cartwright | May 7, 2020
3 min read | ––– views
<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@eadesstudio?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from James Eades"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">James Eades</span></a>

Having worked with JavaScript for about a year now, one feature I have come to love is destructuring.

When I began my current project, we were not using any type of destructuring. However after we introduced ESLint and used Airbnb’s rule set, we began to be required to use object destructuring when we are able. With this experience I have come to love it!


For those unfamiliar with object destructuring, here are the basics:

Let's say you have an object to identify a person that looks like this:

const adam = {
name: 'Adam',
age: 24,
location: 'Bay Area',
}

Now let's say you need to do something with this object, specifically with the location field:

doIntensiveAnalytics(adam.location)
doOtherIntensiveWork(adam.age)
doEvenMoreWork(adam.name)

This works fine, but there might be a time where your object name is long or you are just simply tired of writing the name Adam. Instead you can just destructure!

const { name, age, location } = adam
doIntensiveAnalytics(location)
doOtherIntensiveWork(age)
doEvenMoreWork(name)

A nice feature about this is that you can easily rename methods:

const { location: place } = adam
doIntensiveAnalytics(place)

This is awesome because it feels very explicit and reduces the amount of time you write an object's name but instead just refer to its property specifically. It also allows you to rename properties with ease when you are having naming conflicts. When paired with the spread syntax it becomes very powerful.

There is a bunch more features for object destructuring that you can read about on the MDN web docs.


While object destructuring is awesome, there also is array destructuring.

I had no idea that this existed in JavaScript until I started to learn React Hooks and saw this:

import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
// ... rest of the component

In the example we can see that the useState function returns an array with two variables, here named count and setCount. The nice feature of array destructuring is that we can name these whatever we like! This is extremely useful in state management because you can have many useState calls all with different names on which state it is managing.

You could argue that this could be done instead with object destructuring:

const { state: count, setState: setCount } = useStateReturnObject(0)

but why

Array destructuring allows us to rename these variables with less verbosity than object destructuring and works really well when working with a small amount of variables.

It works generally in the same way as object destructuring, only without as much naming capabilities that objects have. Anyone using the arrays you are passing around will need to know what variable is in each index of the array. When working with a few variables, it can make things very easy (such as with React Hooks)

const adam = ['Adam', 24, 'Bay Area']
const [name, age, place] = adam
doIntensiveAnalytics(place)
doOtherIntensiveWork(age)
doEvenMoreWork(name)

Since arrays also support the spread syntax this can have some powerful opportunities.


I have come to love destructuring in my application. It has made my contributions easier for others to read, maintain, and helps me to write more elegant code.

Let me know what you think! Tweet me @bstncartwright 😃.