Destructuring Assignment in JavaScript

Today, I wanted to bring you one of my favorite modern JavaScript features: Destructuring Assignment! I use it almost everyday because it is so helpful in so many situations. So, let's get started. The destructuring assingment is an expression that allows you to extract values from arrays and properties from object into variables. To give you a very simple example:

const obj = { a: 1, b: 2 }
const { a } = obj
console.log(a) // 1

const arr = [1, 2]
const [firstValue, secondValue] = arr
console.log(firstValue) // 1
console.log(secondValue) // 2

In the first example, we define an object with properties "a" and "b" and in the second line we use destructuring assignment to extract property "a" into a variable with the same name. In the second example we do something similar with an array. We define a new variable called "firstValue" which holds the value in the first position in the array and "secondValue" for the value in the second position. It's the equivalent of doing:

const arr = [1, 2]
const firstValue = arr[0]
const secondValue = arr[1]
console.log(firstValue) // 1
console.log(secondValue) // 2

By default, when destructuring an object you use the name of the property, but you can also rename it in the same expression if you need:

const obj = { language: 'JavaScript' }
const { language: lang } = obj
console.log(lang) // 'JavaScript'

We extract the "language" property from the object but define a variable "lang" to hold its value.

You can also combine the destructuring assignment with the spread operator (another favorite of mine) to hold multiple values like this:

const arr = [1, 2, 3, 4]
const [firstValue, secondValue, ...rest] = arr
console.log(rest) // [3, 4]

When destructuring arrays, you have to pay attention to the order of variables. In the code snippet above, firstValue holds the value in the first position of arr, secondValue holds the value in the second position and rest holds all the other values. Knowing this, how can we ignore one value if we need the value in position one and the value in position three? Simple:

const arr = [1, 2, 3, 4]
const [firstValue, , thirdValue] = arr
console.log(firstValue) // 1
console.log(thirdValue) // 3

I tend to use object destructuring more often to get a nested value inside an API response object, for example:

const response = {
    data: {
        user: {
            name: "David",
        }
    }
}

// instead of
const name = response.data.user.name

// you can do
const { name } = response.data.user

Let's say you have a promise called fetchUser that returns that same response object in the code snippet above but you only need "name" of the user which is nested deep inside the response, you can do something like this:

const { data: { user: { name } } } = await fetchUser()

In this snippet, the only constant that will be declared is name which is useful when you only want part of the object returned by the function. If you want to use the same expression for function parameters, you can:

fetchUser().then(({ data: { user: { name } } }) => name)

Or you can define a function that destructures it's arguments, so you can pass the full object to the function call:

const user = {
    name: "David"
}

function printName({ name }) {
    console.log(name)
}

printName(user) // 'David'

Another cool use case for destructuring arrays is swapping variables in a one liner:

let a = 1
let b = 2

[a, b] = [b, a]

One last thing I want to show you is that you can give these variables a default value if, for example, the extracted value is undefined:

const arr = [1]
const [first, second = 2] = arr;
console.log(first) // 1
console.log(second) // 2

const obj = { a: '1' }
const { a, b = '2' } = obj
console.log(a) // '1'
console.log(b) // '2'

And that's a wrap for today. I hope you can see now how helpful this JavaScript expression is, and can incorporate in your day to day coding :) If you have any questions, reach out to me 👋