satya - 12/13/2024, 9:58:20 PM

Two concepts

satya - 12/13/2024, 9:58:54 PM

Start with declaring arrays and objects

// Arrays
const fruits = ["apple", "banana", "cherry"];
const emptyArray = [];
const mixed = [42, "hello", true];
const numbers = [1, 2, 3, 4, 5];
const newArray = Array(3);

// Objects
const person = { name: "Alice", age: 25 };
const emptyObject = {};
const user = { name: "Bob", address: { city: "New York", zip: "10001" } };
const bike = { brand: "Yamaha", color: "red" };

satya - 12/13/2024, 9:59:44 PM

Lets unpack some of those arrays and objects into variables on the left

// Destructuring Arrays
const numbers = [1, 2, 3, 4];
const [first, second, third] = numbers;
const [x, , y] = numbers;
const [a, b = 0, c, d = 10] = numbers;

// Destructuring Objects
const person = { name: "Alice", age: 25, city: "New York" };
const { name, age } = person;
const { city: location } = person;
const { name: fullName, country = "USA" } = person;

// Combining Array and Object Destructuring
const people = [{ name: "Bob", age: 30 }, { name: "Carol", age: 35 }];
const [{ name: firstName }, { age: secondPersonAge }] = people;

satya - 12/13/2024, 10:01:50 PM

Notice how the operators work on the left hand side

//Get the first element from the array of numbers
const [first] = numbers;

//Get name and age from the person objects
const { name, age } = person;

satya - 12/13/2024, 10:03:11 PM

Note

satya - 1/8/2025, 3:56:24 PM

Consider this

const { city: location } = person;

satya - 1/8/2025, 3:58:39 PM

This means