Introduction to the JS Destructuring Syntax

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.