ES6: Constructive Destructuring

By Wayne Dunkley (Front-end Developer)

Destructuring is a new feature introduced in ES6 which allows you to easily extract values from Objects or Arrays and assign to new values or even assign default values to undefined properties.

Object Destructuring

Consider the following code.

const user = { name: 'dave', gender: 'male', age: '24' }
const name   = user.name
const gender = user.gender
const age = user.age
console.log(name);
---
dave

Here we have a user Object with keys for name, gender and age and we want to extract the values of these keys and assign them to their own variables. In this example we are defining new variable names and assigning the value of each of the required properties of the user Object to those variables so that we can work with then separately.

Although this works perfectly fine, once we start extracting a large number of values our code starts to look rather messy. Object Destructuring allows us to do the same thing but with a single declarative line of code. The following example shows how we write a destructuring statement by listing the keys of the values we wish to extract from the user Object, note that these keys are wrapped in curly braces. The result being that we have three new variables; name, gender and age with their respective values assigned to them.

const user = { name: 'dave', gender: 'male', age: '24' }
const { name, gender, age } = user
console.log(name)
---
dave

Renaming Variables Whilst Destructuring

The above example show us how to extract values and assign to new variables with the same name but what if we want to give these values new variable names? Destructuring allows us to do just this by declaring the new variable names alongside the name of the value we want to extract, in the destructuring assignment statement.

Here we are extracting the name, gender and age properties of the user Object and assigning them to the new variables n, g and a.

const user = { name: 'dave', gender: 'male', age: '24' }
const { name: n, gender: g, age: a } = user
console.log(n)
---
dave

Default Value Assignments

The destructuring assignment allows you to assign default values for properties that may return undefined. In the following example you’ll notice that the gender property of the user Object has not been defined. In the destructuring assignment we are saying that gender should be set to ‘unknown’ if the value returns undefined.

const user = { name: 'dave', age: '24' }
const { name, gender = 'unknown' } = user
console.log(gender)
---
unknown

Default values can also be used in conjunction with new variable assignments.

const user = { name: 'dave', age: '24' }
const { name, gender: g = 'unknown' } = user
console.log(g)
---
unknown

Nested Destructuring

The examples so far have looked at extracting properties that are just a single level deep into an Object, but what if you want to access a nested property? Destructuring allows us to extract values in such the same way using object literal syntax. Sticking with our user example. We have expanded the name property to include first_name and last_name. When initially declared last_name is a nested property of the user object but using destructuring we can extract this to its own variable.

const user = { 
name: {
first_name: 'dave',
last_name: 'smith'
},
age: '24'
}
const { name: { last_name } } = user
console.log(last_name)
---
smith

And by combining this with the renaming syntax we can even extract the users last_name and assign it to a new variable called surname.

const user = { 
name: {
first_name: 'dave',
last_name: 'smith'
},
age: '24'
}
const { name: { last_name: surname } } = user
console.log(surname)
---
smith

Array Destructuring

Array Destructuring is fairly similar to Object Destructuring but uses array literal syntax instead of object literal syntax. Whereas Object Destructuring uses named keys to extract values, Array Destructuring uses positions within an array to achieve the same thing. The following example demonstrates Array Destructuring to extract a list of colours.

const colours = ["red", "blue", "green"]
const [first, second, third] = colours
console.log(first)
console.log(second)
console.log(third)
---
red
blue
green

Default Value Assignments

Just like Object Destructuring you can also assign default values to undefined values within an Array. Using the same above example we can define default values for the 2nd and 3rd items in an Array that have not been defined.

const colours = ["red"]
const [first, second = "unknown", third = "Also unknown"] = colours
console.log(first)
console.log(second)
console.log(third)
---
red
unknown
Also unknown

Skipping Values

Selecting specific properties within an Object is easy but what about an Array where values are listed sequentially? Although you can’t jump straight to a specific value, you can ignore the values that you aren’t interested in and just extract the ones that you want. This is done by only defining variable names for the values that you want and leave the others empty, but remember to include the comma separators for each ignored value.

const colours = ["red", "blue", "green"]
const [ , , third] = colours
console.log(third)
---
green

Destructuring Parameters

Not only can Destructuring be used inline, but it can also be used in function parameters.

Consider the follow code example.

function userDetails(user){
const name = user.name
const age = user.age
console.log(name)
console.log(age)
}
const user = {
name: 'dave',
gender: 'male',
age: '24'
}
userDetails(user)
---
dave
24

We can see from the function declaration that we need to pass in a user Object but it doesn’t make clear what this object should look like or what properties are required. Using Object Destructuring we can use the same pattern as we did before but right within the function declaration when passing in parameters. We can replace the user Object name with curly braces and the define only the specific properties of that Object that we want, passing these into the function as seperate named variables.

function writeName({ name, age }){
console.log(name)
console.log(age)
}
const user = {
name: 'dave',
gender: 'male',
age: '24'
}
writeUserDetails(user)
---
dave
24

Further Reading

Enjoyed this article and want to learn more about the features introduced with ES6? Check out my other articles: “An Idiots Guide to let and const” and “All Hail, Template Literals

Like what you read? Give Mentally Friendly a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.