What is destructuring in JavaScript?

Question

Accepted Answer

Destructuring is an ES6 feature that lets you unpack values from arrays or properties from objects into distinct variables in a single statement. It makes code that accesses nested data far more concise and expressive. Array destructuring Values are pulled out by position. const [a, b, c] = [1, 2, 3]; // a = 1, b = 2, c = 3 const [first, , third] = [10, 20, 30]; // skip elements const [x = 5, y = 10] = [1]; // defaults const [head, ...tail] = [1, 2, 3, 4]; // rest: head = 1, tail = [2,3,4] Object destructuring Properties are pulled out by name, with optional renaming and defaults. const user = { name: "Ada", age: 28, city: "London" }; const { name, age } = user; const { name: firstName } = user; // rename const { role = "admin" } = user; // default value const { name, ...rest } = user; // rest: rest = { age, city } Nested destructuring const order = { id: 1, items: [{ sku: "A1" }, { sku: "B2" }] }; const { items: [{ sku: firstSku }] } = order; // firstSku === "A1" Function parameters Destructuring in parameters is a clean way to accept "options" objects with defaults, replacing positional arguments that are easy to misorder. function createUser({ name, role = "member", verified = false } = {}) { // use name, role, verified } createUser({ name: "Grace" }); Swapping variables let a = 1, b = 2; [a, b] = [b, a]; // a = 2, b = 1 Use with iteration const map = new Map([["a", 1], ["b", 2]]); for (const [key, value] of map) { console.log(key, value); } Gotchas A missing property is undefined , which triggers defaults; a null property does not trigger them. Destructuring undefined or null throws; always provide a fallback ( = {} , = [] ). You must parenthesise a destructuring assignment that is not a declaration: ({a, b} = obj); . Show both array (position-based) and object (name-based). The swap [a, b] = [b, a] is a classic quick trick. Function parameter destructuring is the most practical daily use. Know renaming (:), defaults (=), and rest (...).