Destructuring extracts values from arrays (by position) and objects (by property name) into variables. The spread operator (...) expands iterables, while the rest operator (...) collects remaining elements.
Extracts by position with defaults and skipping; enables variable swapping; works with any iterable
Extracts by property name with renaming, defaults, and nesting; does not mutate the original
Destructure directly in function parameters — standard pattern for React props: function Component({ title }) {}
Expands iterables into elements — merge arrays, shallow-copy objects, pass arrays as function arguments
Collects remaining elements into an array — must be last in destructuring patterns and function parameters
Destructuring (ES6) provides a concise syntax to unpack values from arrays and properties from objects into distinct variables. Combined with the spread and rest operators, it's fundamental to modern JavaScript and used extensively in React.
const [a, b, c] = [1, 2, 3];.const [, second] = [1, 2, 3]; — second is 2.const [a = 10] = []; — a is 10 when the value is undefined.[a, b] = [b, a];.const { name, age } = person;.const { name: fullName } = person; — creates fullName, not name.const { name = 'Anonymous' } = {};.const { name: fullName = 'Anonymous' } = {};.const { address: { city } } = person; — extracts city from nested object.function greet({ name, age }) {} — cleaner than accessing options.name.function Component({ title, children }) {} destructures props.function fetch({ url, method = 'GET' } = {}) {} — the = {} prevents errors when called with no arguments.[...arr1, ...arr2] merges arrays.{ ...obj, newProp: value } — creates a new object with all properties plus overrides.Math.max(...numbers) spreads an array into arguments.const [first, ...rest] = [1, 2, 3]; — rest is [2, 3].const { id, ...otherProps } = obj; — otherProps contains everything except id.function sum(...args) {} — collects all arguments into a real array.const [...rest, last] = arr; is a SyntaxError.Key Interview Distinction: Spread vs Rest
Spread expands (unpacks) — used in array/object literals and function calls to spread elements out. Rest collects (packs) — used in destructuring and function parameters to gather remaining elements into an array. Same ... syntax, opposite directions. Context determines which it is.
Fun Fact
Destructuring was inspired by pattern matching in functional languages like ML and Haskell. The original ES6 proposal went through 14 revisions over 3 years. Nested destructuring like const { a: { b: { c } } } = obj compiles to multiple property accesses — making it syntactic sugar that can be surprisingly deep.