Destructuring

Unpacking values by shape

Destructuring pulls values out of objects and arrays by describing their shape on the left side of =.

• Object: const { name, age } = user; grabs user.name and user.age by key.
• Rename: const { name: userName } = user; reads key name into variable userName.
• Default: const { role = "student" } = user; used only when the value is undefined.
• Array: const [first, second] = list; unpacks by position instead of by key.

Destructuring exists because JavaScript functions receive bags of named data constantly — API responses, options objects, React props — and picking fields out with repeated user.something lines is pure noise. Nearly every modern file uses it, so reading it has to become automatic.

In function parameters

The most common real-world spot is a function that takes an options object. Destructure right in the parameter list, defaults included:

function connect({ host, port = 80 }) {
  return host + ":" + port;
}

connect({ host: "api.dev" }); // "api.dev:80"

Callers pass named options in any order, and the function body gets clean local variables. You will see this pattern in nearly every JavaScript codebase and framework.