7 Use Cases for Destructuring in JavaScript
By: Wathsala Danthasinghe
Tags: JavaScript, Web Development, Software Engineering, Tutorial, Destructuring Assignment

“The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables”. MDN

Destructuring assignment helps to build your code fragments in clear and easier manner. It unpacks individual values from arrays or properties from objects and assigns them into distinct variables. Simply, it takes an object or an array and convert them into smaller objects elements or variables. There are two types of destructuring in JavaScript.

Array destructuring

Object destructuring

1. Array destructuring

Array destructuring allows to take the individual elements from an array and assign them into individual variables. Let’s discuss with an example. The days of the week are set to the week array.

const week = [‘monday’, ‘tuesday’, ‘wednesday’, ‘thuresday’, ‘friday’];

Without destructuring assignment, you might access the items in an array like this.

access elements of the array week without array destructuring

Now, Let’s do it with destructuring assignment. Here, week (array you want to destructuring) is put to the right side to the equal(=) and day1, day2, day3, day4, day5 variables are assigned each value in the week array. [] is used to destructure the array. single line of code to assign each value of the array week

access elements of the array week with array destructuring

2. Object destructuring

Object destructuring allows to take the individual properties from an object and assigns them into smaller objects elements or individual variables. {} is used to destructure the objects. Here, we must ensure the property name is same as the variable name.

access studentDetails with object destructuring

3. Use cases of destructuring assignment

3.1 Combine an array with another array

Combine two arrays is commonly used when we are coding. Destructuring assignument can be used to combine an array at any place with another array. In the example, array weekDays is added to the beginning of the week array.

week array is added weekend values

3.2 Combine two objects

Object destructuring can be used to combine two different objects. In this example, both studentDetails and studentGrade objects’ properties are copies to the studentResult object.

studentResult contains properties of both studentDetails and studentGrade

Output:

{ name: ‘John’, age: 20, subject: ‘Physics’, grade: ‘A’ }

Note that there is a same property in both objects which going to combine, the second object’s property value is over written. In this example, name property is available both objects. Therefore, the StudentGrade object name value ‘John Mary’ is the value of the name in StudentResult.

property name is availbe both studentDetais and studentGrade

Output:

{ name: ‘John Mary’, age: 20, subject: ‘Physics’, grade: ‘A’ }

3.3 Function parameters destructuring

Function’s parameter destructuring helps to prevent passing unnecessary properties in the objects to the function. Let’s clear this idea with an example. In the bellow code, studentDetails object is passed to the printName() function. But only firstName and lastName is used inside the function.

only firstName and lastName is used inside the printName function

Using the destructuring, we can take only necessary properties as an object into the function. This is very helpful, when we deal with large objects. In the bellow code, the only firstName and lastName properties’ values are input to the printName() function as standalone variables.

only firstName and lastName properties’ values are input to the printName() function

Output:

Full name is John Mary

3.4 Convert array into object

In this example, birthDayArr array is converted into birthDayObj object. Here, birthDayArr is destructured into year, month, day and works as input parameters of the arrayConvertToObj function.

birthDayArr array convert to birthDayObj object

Output:

{ year: 2000, month: 1, day: 1}

3.5 Skipping Items

During the destructuring, we can skip elements from the array that we do not want to use. It helps to save unnecessarily using the memory for the variables which useless elements in the array . We can skip the elements just putting the commas(,). For an example, given numebers array, I want only third and fifth elements. therefore, skips others from putting the commas.

only third and fifth elements are assigned to variables

Output:

3

5

3.6 Rest in Object Destructuring

Rest operator helps to have single variable that contains group of elements not already picked off by the destructuring pattern. In the example, firstName and lastName properties are assigned individually and the rest of properties(age, country) are assigned to the single variable rest.

age and country properties are available in rest variable

Output:

John

Mary

{ age: 20, country: ‘Sri Lanka’ }

3.7 Assign new variables name and set default values

During the object destructuring, the property name of the object must match to the variable name. However, we can assign it to a variable with different name. Also, we can assign default value to the variable instead of undefined. In the given example, firstName vale is mapped to fName and ‘not given’ is assigned as default value instead of undefined.

Output: