Dev Proto
Published in

Dev Proto

Learn about Destructuring in JavaScript

Destructuring is one of the most useful features in ES6, it offers a quick and easy way to extract values from objects and arrays.

In this post, we will look at how to destructure objects and arrays.

Object Destructuring

Let’s say we have an object like this:

const obj = {
prop_1: 67,
prop_2: "nnamdi",
prop_3: true
}

The obj is a literal object, with properties prop_i and their corresponding values.

To access the values, we need to reference the properties.

obj.prop_1 // 67obj.prop_1 + 1 // 68
obj.prop_2 // "nnamdi"
obj.prop_3 // true

We use the property name in the obj to access the value.

We can also, assign variables to the property, like this:

var prp1 = obj.prop_1
prp1 //67

Here, the value in the prop_1 property of obj is assigned to variable prp1. wherever we use the prp1 variable we will be using the obj.prop_1 value which is 67.

Using Destructuring, we can re-write the above to this:

var { prop_1: prp1 } = obj

Two things are happening here. First, the prop_1 property is extracted from the obj object, then second a var prp1 variable is created and assigned to hold the value of the prop_1 property.

Now, using prp1 will have the value 67.

var { prop_1: prp1 } = obj
prp1 //67

We can destructure many properties from the obj at once:

var { prop_1: prp1, prop_2: prp2 } = obj

Here, we destrutured the properties prop_1 and prop_2 to prp1 and prp2 respectively.

prp1 will hold 67 and prp2 will hold "nnamdi":

var { prop_1: prp1, prop_2: prp2 } = objprp1 // 67
prp2 // "nnamdi"

Note, to destructure a property from an object, it follows this format:

var/const/let { PROPERTY_NAME_IN_THE_OBJECT : VARAIBLE_TO_HOLD_THE_PROPERTY_VALUE, ...} = object

The type of the scope is first declared, whether a let or const or var. Then, we open and close curly brackets. Inside the brackets, we make a colon, on the left of it is the name of the property we want to destructure and on the right is the variable that will hold the value of the property. Destructuring multiple properties in one curly brackets will be done in a comma-separated list.

If we wanted to extract the properties into variables with the same name we would write it like so:

var { prop_1 } = obj

This is the same as the kinds of stuff we did above, the only difference here is that there is no colon : to separate the property name and the variable. We are destructuring the prop_1 property of obj to the variable prop_1. It's just that the property to extract and the variable to hold the property value has the same name, so there is no need for the : to separate them.

We can still add the colon:

var { prop_1 : prop_1 } = obj

This is the same as var { prop_1 } = obj It's just that var { prop_1 } = obj is just a fancier way.

Array Destructuring

The elements in an array are indexed by numbers.

const arr = [45, 46, 47]
arr[0]

Just like we have properties on Object like our obj, prop_1, prop_2, prop_3 so we have on arrays. But in arrays, they are defined by the index number of the elements in the array.

We know that elements in arrays are referenced by their index number. The first is 0, the second is 2, the last is (array.length -1). These indexes are the properties in an array.

So, this

const arr = [45, 46, 47]

will look like this

as an object:

const arr = {
0: 45,
1: 46,
2: 47,
length: 3
}

See, the properties are numbers and they are referenced by that. That’s why to reference the first value of an array, you will do this:

arr[0]

like in an object when you reference a property:

obj[prop_1]

Just like destructuring an object with its properties name, same is done with arrays just that the properties names are numbers:

const arr = [45, 46, 47]
const { 0: first } = arr
first // 45

Here, we extracted the first element (which has the property name “0”) from the arr array and created a first variable to hold the element.

See, it is the same as an object. The first variable will hold 45.

We can destructure more indexes from the arr array:

const arr = [45, 46, 47]
const { 0: first, 1: second } = arr
first // 45
second // 46

The second element in the arr array is 46 and its referenced by number 1. So we add 1 and : then the variable second to hold the value of the property "1" in arr.

We can destructure the length of an array.

Yes, we do it by referencing “length”, this is possible because “length” is a property of an array, and it holds the amount of the elements in an array:

const arr = [45, 46, 47]
const { 0: first, 1: second, length: len } = arr
first // 45
second // 46
len // 3

The length of the arr is extracted via “length” and held in the “len” variable.

Without curly braces

We can also destructure arrays like this:

const arr = [ 45, 46, 47 ]
const [ first, second ] = arr
first // 45
second // 46

You see, we are no longer using the curly braces and specifying the index number. We are using the array square brackets [].

The elements will be destructed from the arr array. The first and second are variables that will hold the first element and the second element in the arr respectively. The element at index 0 will be assigned to first and the element at index 1 will be assigned to second. the reason is that the first is at index 0 and the second is at index 1.

If we switch their places:

...
const { second, first } = arr
second // 45
first // 46

second will hold the element at index 0 in arr and first will hold the element at index 1. So the placing of the variables determines the index it will destructure.

Function Parameter Destructuring

Function parameters can be destructured. This can occur when objects are passed as parameters to functions.

function hi(opts) {
const p = opts.prop
...
}
hi({prop: 23})

We can use destructuring to extract the prop property from the opts argument in the function.

function hi({prop}) {
prop // 23
...
}
hi({prop: 23})

We know the function argument is expecting an object with prop property. We replaced opts argument with {prop}.

This will extract the prop property from the argument coming in, create a variable prop (of the same name with the property destructured), then assign the extracted prop property to the prop variable.

To extract the prop property to a variable of a different name, we do this :

function hi({prop: p}) {
p // 23
...
}
hi({prop: 23})

Because we are destructuring to a variable of different name we had to add : and the variable name, p. p will hold the value of the prop property.

Conclusion

Destructuring is a very exciting and wonderful feature in ES6.

If you have any question regarding this or anything I should add, correct or remove, feel free to comment, email or DM me

Thanks !!!

Thanks for stopping by my little corner of the web. I think you’ll love my email newsletter about programming advice, tutoring, tech, programming and software development. Just sign up below:

Follow me on Twitter: @ngArchangel

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store