Destructuring in JavaScript

Analogy categoryAnalogies

1. Introduction

Destructuring is a JavaScript expression syntax that lets you unpack values from arrays or properties from objects into separate variables in a single, concise statement. Instead of writing multiple lines like const name = user.name; const age = user.age;, destructuring lets you extract everything you need in one line, making code shorter and often more readable.

🏏

Cricket analogy: Instead of separately checking runs, wickets, and overs, destructuring lets you read a scorecard line like '245/6 in 40 overs' and pull all three values out in one glance, just like const { runs, wickets, overs } = scorecard.

2. Syntax

javascript

// Object destructuring
const { name, age } = user;
const { name: userName } = user;         // renaming
const { country = "USA" } = user;         // default value

// Array destructuring
const [first, second] = list;
const [a, , c] = list;                    // skipping an element
const [head, ...tail] = list;             // rest pattern

// Destructuring function parameters
function greet({ name, greeting = "Hello" }) { /* ... */ }

3. Explanation

Object destructuring const { key } = obj extracts the property named key from obj into a variable also named key. You can rename the resulting variable with { key: newName }, and supply a fallback with { key = defaultValue } that is used only when the property is undefined (not merely falsy). Array destructuring const [a, b] = arr works positionally by index rather than by name, and elements can be skipped with an empty slot ([a, , c]) or gathered into an array with the rest pattern ([a, ...rest]).

🏏

Cricket analogy: Renaming a destructured field is like calling the 'playerOfMatch' entry mom in your own notes with { playerOfMatch: mom } = scorecard, while a default like { target = 999 } covers a rain-affected match with no DLS target set yet.

Destructuring is especially powerful in function parameters, letting a function accept a single options object while still exposing named, defaultable parameters inside the function body — a very common pattern in modern JavaScript APIs.

🏏

Cricket analogy: A bowling coach's function might accept one options object like { line, length, pace = 140 } so a fast bowler's drill can expose named, defaultable settings inside the function instead of listing four separate parameters.

Default values only kick in when the extracted value is strictly undefined. A property explicitly set to null, 0, or "" will NOT trigger the default — those are valid values, not "missing" ones.

4. Example

javascript

const user = { name: 'Bob', age: 30 };
const { name, age: userAge, country = 'USA' } = user;
console.log(name, userAge, country);

const numbers = [10, 20, 30, 40];
const [first, , third, ...rest] = numbers;
console.log(first, third, rest);

function greet({ name, greeting = 'Hello' }) {
  return `${greeting}, ${name}!`;
}
console.log(greet({ name: 'Carol' }));

5. Output

text

Bob 30 USA
10 30 [ 40 ]
Hello, Carol!

6. Key Takeaways

Object destructuring extracts properties by name; array destructuring extracts elements by position.
Use { key: newName } to rename a destructured object property.
Default values (= defaultValue) apply only when the value being extracted is undefined.
Use , empty slots to skip array elements, and ...rest to gather remaining elements/properties.
Destructuring function parameters is a common way to accept named, defaultable options in a single object argument.