How does destructuring work?

Destructuring is syntax for reading several properties or elements at once. It reduces repetitive access and makes function signatures self-documenting.

const user = {
  name: "Asha",
  role: "engineer",
  address: { city: "Pune" },
};

const { name, role: title, address: { city } } = user;
console.log(name, title, city); // "Asha engineer Pune"

const [first, , third = "n/a"] = [10, 20];
console.log(first, third); // 10 "n/a"

Defaults and renaming

• const { role = "guest" } = user supplies a default when the property is undefined
• const { role: title } = user reads role into a variable named title
• const { address: { city } } = user destructures a nested object
• const [first, ...rest] = items collects the remaining elements

Defaults only apply to undefined, not to null. A default can also call a function, which is useful for required configuration values.

function greet({ name, role = "guest" }) {
  return "Hello " + name + ", " + role;
}

greet({ name: "Asha" }); // "Hello Asha, guest"