Destructuring assignment — JavaScript

3 min readMar 21, 2021

What is destructuring assignment?

Destructuring simply implies breaking down a complex structure into simpler parts. In JavaScript, this complex structure is usually an object or an array. With the destructuring syntax, you can extract smaller fragments from arrays and objects. Destructuring syntax can be used for variable declaration or variable assignment. You can also handle nested structures by using nested destructuring syntax.

Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals. This syntax can be extremely terse, while still exhibiting more clarity than the traditional property access.

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

var first = someArray[0];
var second = someArray[1];
var third = someArray[2];

With destructuring assignment, the equivalent code becomes more concise and readable:

var [first, second, third] = someArray;

Object Destructuring

we have a person object with two properties: firstName and lastName

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

Prior to ES6, when you want to assign properties of the person object to variables, you typically do it like this.

let firstName = person.firstName;
let lastName = person.lastName;

ES6 introduces the object destructuring syntax that provides an alternative way to assign properties of an object to variables.

let {
   firstName: fname, 
   lastName: lname
} = person;

In this example, the firstName and lastName properties are assigned to the fName and lName variables respectively.

In this syntax

let { 
   property1: variable1,
   property2: variable2
} = object;

The identifier before the colon (:) is the property of the object and the identifier after the colon is the variable.

Notice that the property name is always on the left whether it’s an object literal or object destructuring syntax.

If the variables have the same names as the properties of the object, you can make the code more concise as follows.

let {
   firstName, 
   lastName
} = person;

console.log(firstName); // 'John'
console.log(lastName); // 'Doe'

Default Values

If the number of items in the array is more than the number of local variables passed to the destructuring array literal, then the excess items are not mapped. But if the number of local variables passed to the destructuring array literal exceed the number of items in the array, then each excess local variable will be assigned a value of undefined except you specify a default value.

Just as with object destructuring, you can set default values for local variables using array destructuring. In the following example.

const rgb = [200];

// Assign default values of 255 to red and blue
const [red = 255, green, blue = 255] = rgb;

console.log(`R: ${red}, G: ${green}, B: ${blue}`); // R: 200, G: undefined, B: 255

Resources:

JavaScript Object Destructuring

Summary: in this tutorial, you'll learn about the JavaScript object destructuring that assigns properties of an object…

www.javascripttutorial.net