JavaScript Destructuring

Destructuring allows you to extract values from objects and arrays into distinct variables using a concise syntax.

Object Destructuring

Destructuring can be used to extract values from an object into variables.

// Create an object
const person = {
 firstName: "Alice",
 lastName: "Johnson",
 age: 30
};
// Destructuring assignment
let { firstName, lastName } = person;

console.log(firstName); // Output: Alice
console.log(lastName);  // Output: Johnson

The order of properties does not matter when destructuring objects.

Different Order of Properties

Object destructuring allows extracting properties in any order, regardless of their position in the object.

const person = {
 firstName: "Alice",
 lastName: "Johnson",
 age: 30
};
let { lastName, firstName } = person;

console.log(lastName);  // Output: Johnson
console.log(firstName); // Output: Alice

Object Default Values

If a property does not exist in the object, you can assign a default value:

const person = {
 firstName: "Alice",
 lastName: "Johnson"
};
let { firstName, lastName, country = "Unknown" } = person;

console.log(country); // Output: Unknown

Object Property Alias

You can rename properties while destructuring using aliases:

const person = {
 firstName: "Alice",
 lastName: "Johnson",
 age: 30
};
let { lastName: surname } = person;
console.log(surname); // Output: Johnson

String Destructuring

Destructuring can be used to extract individual characters from a string:

let name = "Web";
let [char1, char2, char3] = name;
console.log(char1); // Output: W
console.log(char2); // Output: e
console.log(char3); // Output: b

Array Destructuring

Destructuring allows extracting values from an array into variables based on their position.

const colors = ["Red", "Green", "Blue", "Yellow"];

let [color1, color2] = colors;

console.log(color1); // Output: Red
console.log(color2); // Output: Green

Skipping Array Values

Array destructuring allows skipping elements by using commas without assigning them to variables.

const colors = ["Red", "Green", "Blue", "Yellow"];

let [firstColor, , , lastColor] = colors;

console.log(firstColor); // Output: Red
console.log(lastColor);  // Output: Yellow

Picking Specific Positions

Array destructuring allows extracting values from specific positions while skipping others.

const colors = ["Red", "Green", "Blue", "Yellow"];
let { 0: primary, 2: tertiary } = colors;

console.log(primary);  // Output: Red
console.log(tertiary); // Output: Blue

The Rest Property

Use the rest property to collect remaining elements into an array:

const numbers = [1, 2, 3, 4, 5, 6, 7];
let [first, second, ...remaining] = numbers;

console.log(first);     // Output: 1
console.log(second);    // Output: 2
console.log(remaining); // Output: [3, 4, 5, 6, 7]

Destructuring Maps

Destructuring can be used to extract values from a Map object into variables.

const fruits = new Map([
 ["apple", 500],
 ["banana", 300],
 ["orange", 200]
]);
for (const [fruit, quantity] of fruits) {
 console.log(`${fruit}: ${quantity}`);
}

/*
Output:
apple: 500
banana: 300
orange: 200
*/

Swapping JavaScript Variables Using Destructuring

A simple way to swap variables:

let firstName = "Alice";
let lastName = "Johnson";
[firstName, lastName] = [lastName, firstName];

console.log(firstName); // Output: Johnson
console.log(lastName);  // Output: Alice