Introduction

Destruction is a way to extract data (key, or element) from an object or array and assign it to a variable.

Object Destruction

Object Destruction is a way to extract data from an object and assign it to a variable.

Syntax

const obj = { property1: "abc", property2: 123, property3: true };

const { property1, property2, property3 } = obj;

console.log(property1); // abc
console.log(property2); // 123
console.log(property3); // true

In the above syntax, property1, property2, and property3 are the variables that will store the values of the properties of the object. And object is the object from which we want to extract the data.

Example

const person = {
    name: "John",
    age: 30,
    city: "New York",
};

const { name, age, city } = person;

console.log(name); // John
console.log(age); // 30
console.log(city); // New York

Plain Object Destruction

const obj = { a: 1, b: 2, c: 3 };
const { a, b, c } = obj;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

In the above example, we have destructured the object obj and assigned the values of the properties a, b, and c to the variables a, b, and c. The variables a, b, and c are created automatically by JavaScript.

Nested Object

Nested object is an object that is inside another object.

const person = {
    name: "John",
    age: 30,
    city: "New York",
    address: {
        street: "Main Street",
        number: 123,
    },
};

Method 1:

const obj = {
    a: 1,
    b: 2,
    c: 3,
    d: {
        e: 4,
        f: 5,
    },
};

const { a, b, c, d } = obj;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // { e: 4, f: 5 }

In the above example, we have destructured the object obj and assigned the values of the properties a, b, c, and d to the variables a, b, c, and d. But the value of the property d is an object, so it will be assigned to the variable d as it is.

Method 2:

const obj = {
    a: 1,
    b: 2,
    c: 3,
    d: {
        e: 4,
        f: 5,
    },
};

const {
    a,
    b,
    c,
    d: { e, f },
} = obj;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
// This will error
console.log(d); // ReferenceError: d is not defined
// because we have destructured the property `d` and assigned it to the variable `e` and `f`
console.log(e); // 4
console.log(f); // 5

In the above example, we have destructured the object obj and assigned the values of the properties a, b, c, and d to the variables a, b, c, and d. But the value of the property d is an object, so we have destructured the object d and assigned the values of the properties e and f to the variables e and f.

Renaming Variables

First of all, why do we need to rename the variables

Suppose we have an object with a property a and we want to extract the value of the property a and assign it to a variable x. But we already have a variable x in our code. So, we can rename the variable x to y and assign the value of the property a to the variable y.

We use the colon : operator to rename the variables. The syntax is variable: newVariableName.

const a = 10;
const b = 20;
const c = 30;

const obj = { a: 1, b: 2, c: 3 };

// as a, b, and c are already declared, I can't destructured the object and assign the values to a, b, and c
// so I have to rename the variables a, b, and c to x, y, and z
const { a: x, b: y, c: z } = obj;

console.log(x); // 1
console.log(y); // 2
console.log(z); // 3

console.log(a); // 10
console.log(b); // 20
console.log(c); // 30

In the above example, we have destructured the object obj and assigned the values of the properties a, b, and c to the variables x, y, and z. But we have renamed the variables a, b, and c to x, y, and z using the colon : operator.

Default Values

Default values are used when the property does not exist in the object.

Suppose we have an object with a property a and we want to extract the value of the property a and assign it to a variable x. But we don't know if the property a exists in the object or not. So, we can assign a default value to the variable x and if the property a exists in the object, then the value of the property a will be assigned to the variable x. If the property a doesn't exist in the object, then the default value will be assigned to the variable x.

const obj = { a: 1, b: 2, c: 3 };
const { a, b, c, d = 4 } = obj;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4

Rest Operator ...

Rest operator is used to extract the remaining properties of the object.

Suppose we have an object with a property a and we want to extract the value of the property a and assign it to a variable x. But we want to extract the remaining properties of the object and assign them to a variable y. So, we can use the rest operator to extract the remaining properties of the object and assign them to a variable y.

const obj = { a: 1, b: 2, c: 3 };
const { a, ...y } = obj;

console.log(a); // 1
console.log(y); // { b: 2, c: 3 }

In the above example, we have destructured the object obj and assigned the value of the property a to the variable a. And we have used the rest operator to extract the remaining properties of the object and assigned them to the variable y.

Array Destruction

Array Destruction is a way to extract data from an array and assign it to a variable.

Syntax:

const [variable1, variable2, variable3] = array;

Plain Array

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

In the above example, we have destructured the array arr and assigned the values of the elements 1, 2, and 3 to the variables a, b, and c.

Skipping Elements

const arr = [1, 2, 3, 4, 5];
const [a, b, c, d, e] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

// we can skip the elements
const [a, , c, , e] = arr;

console.log(a); // 1
console.log(c); // 3
console.log(e); // 5

In the above example, we have destructured the array arr and assigned the values of the elements 1, 2, 3, 4, and 5 to the variables a, b, c, d, and e. But we have skipped the elements 2, 4, and 5 by using the comma , operator.

Nested Array

Method 1:

const arr = [1, 2, 3, [4, 5]];
const [a, b, c, d] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // [4, 5]

In the above example, we have destructured the array arr and assigned the values of the elements 1, 2, 3, and 4 to the variables a, b, c, and d. But the value of the element 4 is an array, so it will be assigned to the variable d as it is.

Method 2:

const arr = [1, 2, 3, [4, 5]];
const [a, b, c, [d, e]] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4
console.log(e); // 5

In the above example, we have destructured the array arr and assigned the values of the elements 1, 2, 3, and 4 to the variables a, b, c, and d. But the value of the element 4 is an array, so we have destructured the array 4 and assigned the values of the elements 4 and 5 to the variables d and e.

Using Rest (spread) Operator ...

... (spread operator) is used to extract data from an array and assign it to a variable. It is used to extract the remaining elements of an array.

const arr = [1, 2, 3, 4, 5];
const [a, b, c, ...d] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // [4, 5]

In the above example, we have destructured the array arr and assigned the values of the elements 1, 2, and 3 to the variables a, b, and c. But we have assigned the remaining elements to the variable d using the spread operator ....

Array of Objects

const arr = [
    { a: 1, b: 2 },
    { c: 3, d: 4 },
    { e: 5, f: 6 },
];

const [{ a, b }, { c, d }, e] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4
console.log(e); // { e: 5, f: 6 }

Default Values

We can assign default values to the variables in array destruction. If the element exists in the array, then the value of the element will be assigned to the variable. If the element doesn't exist in the array, then the default value will be assigned to the variable.

const arr = [1, 2, 3];
const [a, b, c, d = 4] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4

In the above example, we have destructured the array arr and assigned the values of the elements 1, 2, and 3 to the variables a, b, and c. But the array arr does not have the element 4, so we have assigned the default value 4 to the variable d.

Swapping Variables

let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

In the above example, we have assigned the value of the variable a to the variable b and the value of the variable b to the variable a using array destruction.

Returning Multiple Values from a Function

function add(a, b) {
    return [a + b, a - b];
}

const [sum, difference] = add(5, 3);

console.log(sum); // 8

console.log(difference); // 2

In the above example, we have created a function add that takes two arguments a and b and returns an array containing the sum and difference of the arguments. We have destructured the array returned by the function and assigned the values of the elements to the variables sum and difference.