JavaScript Destructuring Assignment

In this tutorial, you will learn about the JavaScript destructuring assignment with the assistance of examples.

Introduction

In the event that you needed to choose elements from an array or object before the ES2015 update to JavaScript, you would need to separately choose them or use a loop.

The ES2015 specification introduced the destructuring assignment, a speedier method to retrieve array components or object properties into variables.

The object destructuring is a useful JavaScript highlight to extract properties from objects and bind them to variables

What’s better, object destructuring can extract various properties in a single statement, can get to properties from nested objects, and can set a default value if the property doesn’t exist.

JavaScript Destructuring

The destructuring assignment presented in ES6 makes it simple to allocate array values and object properties to distinct variables. For instance,

Before ES6:

// assigning object attributes to variables
const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

let name = person.name;
let age = person.age;
let gender = person.gender;

console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

From ES6:

// assigning object attributes to variables
const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

// destructuring assignment
let { name, age, gender } = person;

console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

Note: The order of the name does not matter in object destructuring.

For example, you could write the above program as:

let { age, gender, name } = person;
console.log(name); // Sara

Note: When destructuring objects, you should use a similar name for the variable as the comparing object key.

For instance,

let {name1, age, gender} = person;
console.log(name1); // undefined

In the event that you need to assign various variable names for the object key, you can use:

const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

// destructuring assignment
// using different variable names
let { name: name1, age: age1, gender:gender1 } = person;

console.log(name1); // Sara
console.log(age1); // 25
console.log(gender1); // female

---

Array Destructuring

You can likewise perform array destructuring along these lines. For instance,

const arrValue = ['one', 'two', 'three'];

// destructuring assignment in arrays
const [x, y, z] = arrValue;

console.log(x); // one
console.log(y); // two
console.log(z); // three

---

Assign Default Values

You can assign the default values for variables while using destructuring. For instance,

let arrValue = [10];

// assigning default value 5 and 7
let [x = 5,  y = 7] = arrValue;

console.log(x); // 10
console.log(y); // 7

In the above program, arrValue has only one element. Hence,

• the x variable will be 10
• the y variable takes the default value 7

In object destructuring, you can pass default values in a similar way. For example,

const person = {
    name: 'Salman',
}

// assign default value 26 to age if undefined
const { name, age = 26} = person;

console.log(name); // Salman
console.log(age); // 26

---

Swapping Variables

In this example, two variables are swapped using the destructuring assignment syntax.

// program to swap variables

let x = 4;
let y = 7;

// swapping variables
[x, y] = [y, x];

console.log(x); // 7
console.log(y); // 4

---

Skip Items

You can skip unwanted items in an array without assigning them to local variables. For instance,

const arrValue = ['one', 'two', 'three'];

// destructuring assignment in arrays
const [x, , z] = arrValue;

console.log(x); // one
console.log(z); // three

In the above program, the second element is omitted by using the comma separator ,.

---

Assign Remaining Elements to a Single Variable

You can assign the remaining elements of an array to a variable using the spread syntax …. For example,

const arrValue = ['one', 'two', 'three', 'four'];

// destructuring assignment in arrays
// assigning remaining elements to y
const [x, ...y] = arrValue;

console.log(x); // one
console.log(y); // ["two", "three", "four"]

Here, one is assigned to the x variable. And the rest of the array elements are assigned to y variable.

You can likewise assign the rest of the object properties to a single variable. For instance,

const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

// destructuring assignment
// assigning remaining properties to rest
let { name, ...rest } = person;

console.log(name); // Sara
console.log(rest); // {age: 25, gender: "female"}

Note: The variable with the spread syntax can’t have a trailing comma ,. You should use this rest component (variable with spread syntax) as the last variable.

For instance,

const arrValue = ['one', 'two', 'three', 'four'];

// throws an error
const [ ...x, y] = arrValue;

console.log(x); // eror

Nested Destructuring Assignment

You can perform nested destructuring for array components. For instance,

// nested array elements
const arrValue = ['one', ['two', 'three']];

// nested destructuring assignment in arrays
const [x, [y, z]] = arrValue;

console.log(x); // one
console.log(y); // two
console.log(z); // three

Here, the variable y and z are assigned nested elements two and three.

To execute the nested destructuring assignment, you need to enclose the variables in an array structure (by enclosing inside []).

You can likewise perform nested destructuring for object properties. For instance,

const person = {
    name: 'Salman',
    age: 26,
    hobbies: {
        read: true,
        playGame: true
    }
}
// nested destructuring 
const {name, hobbies: {read, playGame}} = person;

console.log(name); // Salman
console.log(read); // true
console.log(playGame); // true

To execute the nested destructuring assignment for objects, you need to enclose the variables in an object structure (by enclosing inside {}).

Note: Destructuring assignment feature was introduced in ES6. Some browsers may not support the use of the destructuring assignment. Visit Javascript Destructuring support to learn more.

---

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

JS ES6