Assignment Destructuring

While learning React, I expected to see a lot of new syntax, encounter complications, and ultimately learn a lot. I hadn’t previously seen the destructuring syntax from ES6, but it is super common in React because of all the nested state and props. Destructuring is a type of variable assignment that makes it possible to unpack arrays and objects into multiple named variables.

Here’s an example to get use started:

let a, b
[a, b] = [12, 24]
console.log(a) => 12

What’s up with those brackets everywhere? Especially on the left side??!! That’s not an array…. The destructuring syntax looks pretty similar to literal expressions, but the object is placed on the left side of the assignment expression instead of the right. There are tons of different ways to use destructuring and it is fairly clear how this could quickly cut down on repetitious code.

What would our code look like without destructuring?

const user = {
  name: 'Arren',
  hometown: 'Madison'
}
const name = user.name
const hometown = user.hometown

Sometimes you simply need to pull out variables from objects for quicker and easier use. But, it gets better with destructuring:

const {name, hometown} = person

What is this magic???

See how clean and quick that is? The code above creates two new variables, name and hometown. They each are assigned from the person object. Now that we have an idea of what destructuring is, let’s see some examples of what it can do!

With Arrays

Assigning default value

Setting a default value is simple, you just need to assign it in the process of destructuring.

let a, b
[a=3, b=7] = [2]
//outputs
a ==> 2
b ==> 7

Swapping variables

Also, pretty straightforward! Without destructuring, you would need a third variable to store the values being swapped.

let a = 'crackers'
let b= 'cheese'
[a, b] = [b, a]
//outputs
a ==> 'cheese'
b ==> 'crackers'

Parsing returns from functions

If a function returns an array, say [1, 2]

const arrayReturner = () => [1, 2]
let a, b;
[a, b] = arrayReturner()
//outputs
a ==> 1
b ==> 2

Use the spread operator to assign the rest of the array

let a, b, rest
[a, b, ...rest] = ['pie', 'cake', 'ice cream', 'brownies', 'cookies']
//outputs
rest ==> ['ice cream', 'brownies', 'cookies']

With Objects

Because objects do not have a specific order, we need to name variables the same as the keys in order to access to corresponding values. A quick example to get us started:

let {a, b} = {a: 1, b: 2}

A property can be unpacked from an object and assigned to a variable with a different name than the object property.

let hotDrinks = {coffee: 'necessary', tea: 'important'}
let {coffee: beanWater, tea: leafWater} = hotDrinks
//outputs
beanWater ==> 'necessary'
leafWater ==> 'important'

Inside the destructuring syntax above, we can assign or alias the variable with a new name using a colon. If we wanted to give it a default value, just like with arrays we can use =

Thanks all! I hope this was informative and helpful. I promise this will clean up your code!