Architecture Walkthrough

Object Destructuring

Object destructuring extracts named properties from an object and assigns them to variables in a single expression. The variable names on the left side of the assignment match the property names on the right. You can rename a property as you extract it using a colon ({ originalName: newName }), and you can provide a default value using an equals sign ({ prop = defaultValue }).

Both renaming and defaults can be combined in one expression: { prop: alias = defaultValue }. This is a common pattern when consuming API responses where a field might be absent or when building component APIs that accept an options object with optional fields.

Array Destructuring

Array destructuring extracts elements by position rather than by name. You can skip elements by leaving empty slots (const [first, , third] = arr), collect remaining elements with rest (const [head, ...tail] = arr), and assign defaults for positions that might be undefined. The classic variable swap pattern uses array destructuring: [a, b] = [b, a].

Array destructuring is particularly useful when a function returns multiple values as an array (a common convention in React hooks) because the caller can name the extracted values without being bound to property names defined by the function.

Destructuring in Function Parameters

Destructuring in function parameters allows you to extract specific fields from an argument object directly in the function signature rather than reading props.name, props.role, etc. inside the body. This makes the function's expected input explicit at a glance and reduces the amount of assignment boilerplate inside the function.

Nested destructuring in parameters can become unreadable when applied to deeply nested objects. The practical rule is to destructure one or two levels deep in the signature. If the data is more deeply nested, destructure inside the function body at each level where the data is used.

Key Code Explained

const user = { name: 'Ghazi', role: 'Engineer', address: { city: 'Lahore' } };

// Basic object destructuring
const { name, role } = user;

// Rename during destructuring
const { role: position } = user;
// position === 'Engineer', role is not declared

// Default value
const { team = 'No team assigned' } = user;
// team === 'No team assigned' because user.team is undefined

// Rename + default combined
const { team: dept = 'Engineering' } = user;

// Nested destructuring
const { address: { city } } = user;
// city === 'Lahore'

// Array destructuring: position-based
const scores = [98, 87, 76];
const [first, second] = scores;

// Skip elements and use rest
const [top, , third, ...rest] = scores;

// Variable swap (no temp variable needed)
let a = 1, b = 2;
[a, b] = [b, a]; // a === 2, b === 1

// Destructuring in function parameters
function renderCard({ name, role = 'Member', address: { city } }) {
  return `${name} (${role}) — ${city}`;
}
renderCard(user); // "Ghazi (Engineer) — Lahore"

The function parameter example is the most practical pattern. It makes the component API self-documenting: anyone reading the function signature immediately knows it expects name, role, and a nested address.city. The role = 'Member' default is visible right at the entry point rather than buried inside the function body.

Tradeoffs

What Interviewers Actually Check

• Whether you know the rename syntax ({ original: alias }) without confusing it with default values
• Whether you know defaults apply when the value is undefined, not just when the key is missing
• Whether you can write nested destructuring without losing readability
• Whether you can use destructuring in function parameters and explain why it is preferred
• Whether you know how to combine rest with destructuring to separate specific fields from the remainder

Follow-Up Questions

1. What happens if you try to destructure null or undefined directly?
2. If a property exists in the object but its value is undefined, does a destructuring default apply?
3. How would you destructure a function return value that is an array of two items, giving each item a meaningful name?
4. In TypeScript, how does destructuring interact with type inference and type annotations?
5. A teammate writes deeply nested destructuring for a seven-level object in the function signature. What feedback would you give?

Common Candidate Mistakes

• Trying to destructure a property that does not exist and getting undefined when they expected an error
• Confusing the rename colon ({ prop: alias }) with the default equals ({ prop = default }) and writing them in the wrong order when combining
• Attempting to destructure null or undefined and being surprised by the TypeError
• Writing deeply nested destructuring in a function signature that makes the code harder to read than just accessing the property directly
• Not knowing that a default value only applies when the extracted value is undefined, not when it is null or 0

Interview Readiness Checklist

Before you leave this question, make sure you can answer:

• Can you write object and array destructuring with renaming and default values?
• Can you destructure a nested object in a single expression?
• Can you use destructuring in a function parameter signature instead of reading props.x inside the body?
• Can you combine rest syntax with destructuring to extract some properties and collect the rest?
• Can you explain what happens when destructuring a missing property vs a property set to undefined?

Summary

Destructuring is a concise syntax for extracting values from objects and arrays into named variables. Object destructuring matches by property name and supports renaming, defaults, and nested extraction in a single expression. Array destructuring matches by position and supports skipping elements, rest collection, and the classic variable swap pattern.

The most practical use of destructuring in modern codebases is in function parameters, where it makes the expected input explicit without requiring callers to know internal property names. In React, destructuring props at the function signature level is the standard pattern.

The key behaviors to know for interviews are: defaults apply only when the value is undefined (not null or 0), renaming and defaults can be combined in one expression, and destructuring null or undefined throws a TypeError rather than returning undefined values.