Destructuring Assignment in JavaScript
Tags: javascript
Published: 2021-07-27 16:15:22

---
title: Destructuring Assignment in JavaScript
published: true
date: 2021-06-04 14:16:04 UTC
tags: javascript
canonical_url: https://dberri.com/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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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](https://twitter.com/dwberri) 👋