Array and Object Destructuring

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)

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 😃.