Object and Array Destruction
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
This is similar to the following:
const person = {
name: "John",
age: 30,
city: "New York",
};
const name = person.name;
const age = person.age;
const city = person.city;
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
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
Use empty commas to skip positions you don't need:
const arr = [1, 2, 3, 4, 5];
const [a, , c, , e] = arr;
console.log(a); // 1
console.log(c); // 3
console.log(e); // 5
In the above example, the second and fourth elements (2 and 4) are skipped by leaving their positions empty between the commas.
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.