How to Use Destructuring in JavaScript

// Array destructuring
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first, second, rest);

// Skip elements
const [, , third] = numbers;
console.log(third);

// Default values
const [a = 10, b = 20] = [5];
console.log(a, b);

// Swap variables
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y);

// Object destructuring
const person = { name: "Alice", age: 30, city: "NYC" };
const { name, age } = person;
console.log(name, age);

// Rename variables
const { name: userName, age: userAge } = person;
console.log(userName, userAge);

// Default values
const { name: n, country = "USA" } = person;
console.log(n, country);

// Nested destructuring
const user = {
  id: 1,
  profile: {
    name: "Bob",
    settings: { theme: "dark" }
  }
};

const { profile: { name, settings: { theme } } } = user;
console.log(name, theme);

// Function parameters
function display({ name, age }) {
  console.log(`${name} is ${age}`);
}

display(person);

// Rest in objects
const { name: n2, ...rest2 } = person;
console.log(rest2);

// Practical example
const response = {
  status: 200,
  data: { users: [1, 2, 3] }
};

const { status, data: { users } } = response;
console.log(status, users);