How does destructuring work?

Destructuring unpacks values out of arrays and objects into separate variables in one statement. Arrays destructure by position, objects by property name.

const [first, second] = [10, 20];              // by position
const { name, age } = { name: "Mai", age: 30 }; // by name

Defaults, renaming, skipping

const { name: userName, role = "member" } = { name: "Mai" };
// userName === "Mai", role === "member"

const [, , third] = [1, 2, 3];   // skip with empty slots
const [head, ...rest] = [1, 2, 3];

A default applies only when the value is undefined — not for null, 0 or "". That surprises people regularly:

const { count = 10 } = { count: 0 };    // 0, not 10
const { count = 10 } = { count: null }; // null, not 10

Where it earns its keep

Function parameters, where it acts as a named-argument list with defaults:

function createUser({ name, role = "member", active = true } = {}) {
  // ...
}
createUser({ name: "Mai" });

The trailing = {} matters — without it, calling createUser() with no argument throws.

It also swaps values without a temporary, and pulls nested data out in one line:

let a = 1, b = 2;
[a, b] = [b, a];

const { data: { items = [] } = {} } = response;

Keep nested destructuring shallow. Two levels is usually clear; three becomes harder to read than plain property access, and a missing intermediate object throws unless you supply a default at every level.