Introduction to the JS Destructuring Syntax
Tags: javascript, beginners, webdev, programming
Published: 2021-01-26 02:58:54

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

The JavaScript destructuring syntax lets us set object property values and array entries as variables without doing that ourselves explicitly.

# Arrays
We can destructure arrays by defining the variables on the left side and assigning an array on the right side so that the variables on the left side will be assigned the array entries as values on the right side.

The number of variables on the left side don't need to match the number of arrays entries on the right side.

Also, we can skip values that we don't want to assign by putting in nothing or spaces between the commas. For instance, we can destructure an array into variables as follows:

```
const [one, two] = [1, 2, 3];
```

In the code above, we defined `one` and `two` on the left side, and have 1 and 2 as the first 2 entries of the array on the right side.

So, 1 is assigned to `one` and 2 is assigned to `two`.

If we want to only assign 3 to a variable, we can write:

```
const [, , three] = [1, 2, 3];
```

Then we would get 3 assigned to `three` since we skipped the first 2 entries on the left side.

Also, we can assign default values to the variables on the left side, which will be assigned if nothing's assigned to it.

For instance, we can add one as follows:

```
const [, , foo = 5] = [1, 2];
```

In the code above, we defined the `foo` variable and assigned 5 as the default value for it. Since we don't have a 3rd entry in the array on the right. `foo` will keep its default value 5.

# Objects

We can also destructure objects property values into variables using the destructuring syntax.

It assigns the value of the property with the same name as the variable name. The nesting level is also matched. 

For instance, we can use the destructuring assignment with objects as follows:

```
const {
  foo: {
    bar
  }
} = {
  foo: {
    bar: 1
  }
}
```

The code above will assign `foo.bar` on the right side to `bar` on the left side since the location and name are the same.

Therefore, `bar` will be 1.

Like with arrays, we can assign a default value to the variable on the left side.

For instance, we can write:

```
const {
  foo: {
    bar = 1
  }
} = {
  foo: {}
}
```

In the code above, we have the default value of `bar` set to 1. Since the object on the right has an empty object set as the value of `foo`, we get that `bar` is 1 since there's no value assigned to `bar`.

# Function Arguments
We can use the destructuring syntax on function arguments.

For instance, we can write:

```
const name = ({
  firstName,
  lastName
}) => `${firstName} ${lastName}`
```

to let our `name` function take an object with the `firstName` and `lastName` properties. Then we can call it as follows:

```
name({
  firstName: 'jane',
  lastName: 'smith'
})
```

and we'll get `'jane smith'` returned since the `firstName` and `lastName` properties are destructured into variables in the argument.

# Loops

We can decompose array entries into variables in loops if we use the `for...of` loop.

For instance, given the following array:

```
const arr = [{
    firstName: 'jane',
    lastName: 'smith'
  },
  {
    firstName: 'john',
    lastName: 'smith'
  },
]
```

Then we can get the `firstName` and `lastName` properties from each entry in the `for...of` loop as follows via destructuring:

```
for (const {
    firstName,
    lastName
  } of arr) {
  console.log(`${firstName} ${lastName}`)
}
```

Then the console will log:

```
jane smith
john smith
```

# Conclusion

The JavaScript destructuring syntax is one of the best features of JavaScript that has been released in the last few years. It makes code cleaner and easier to read while saving typing.