Course: JavaScript Intermediate

Lesson 7: Destructuring Arrays and Objects

Level

Intermediate

Estimated Reading Time

10–15 minutes

Goal

By the end of this lesson, the learner will be able to:

• Use array destructuring to unpack values into named variables
• Use object destructuring to extract properties with renaming and default values
• Apply destructuring in function parameters and API response handling

Frontend Development Context

Destructuring is one of the most practical additions to modern JavaScript. When you receive data from an API, a function call, or a React hook, it almost always comes as an object or array. Destructuring lets you pull out exactly the values you need with clean, readable syntax — no more chaining multiple property accesses on the same object.

React developers use destructuring constantly. Function components destructure their props, useState returns an array that you destructure, and API responses are objects that you unpack with destructuring. Learning destructuring well makes framework code much easier to read and write.

Explanation

Array destructuring uses square brackets on the left side of an assignment to unpack array elements into variables in order. The variable names are up to you — positions matter, not names. You can skip elements with empty commas, and you can provide default values.

Object destructuring uses curly braces on the left side to extract properties by name. The variable name must match the property name by default. You can rename a property using a colon (name: displayName), and you can provide a default value using =.

Destructuring can be used in function parameters to automatically unpack an object or array that a function receives. This is especially common in React, where components receive a props object and destructure it right in the parameter list.

Destructuring can also be nested. If an object contains another object or array as a property, you can destructure both levels in one expression. This is powerful but should be kept shallow — deeply nested destructuring can become hard to read.

Destructuring does not modify the original object or array. It simply creates new variables bound to the values extracted from the source.

Code Example

This example shows array destructuring, object destructuring with renaming and defaults, and destructuring in a function parameter.

// Array destructuring — position determines the variable
const scores = [95, 82, 74];
const [first, second, third] = scores;
console.log(first);  // 95
console.log(second); // 82

// Skip an element
const [top, , bottom] = scores;
console.log(bottom); // 74

// Object destructuring — name must match the property
const user = { name: "Alex", role: "admin", score: 240 };
const { name, role } = user;
console.log(name); // "Alex"
console.log(role); // "admin"

// Renaming and default values
const { name: displayName, badge = "none" } = user;
console.log(displayName); // "Alex"
console.log(badge);       // "none" — property doesn't exist, default is used

// Destructuring in a function parameter
function renderCard({ name, role, score = 0 }) {
  return `${name} (${role}) — Score: ${score}`;
}
console.log(renderCard(user)); // "Alex (admin) — Score: 240"

Code Explanation

const [first, second, third] = scores unpacks the array by position. first gets index 0, second gets index 1, and third gets index 2. The variable names are arbitrary — position is what matters.

const [top, , bottom] = scores skips the second element with an empty slot. You do not need a variable for every position — just leave a gap in the pattern.

const { name, role } = user unpacks the name and role properties from user into variables of the same names. The variable name now holds "Alex" without needing to write user.name.

const { name: displayName, badge = "none" } = user shows two advanced features: renaming (name is extracted but stored as displayName) and default values (badge does not exist on user, so it defaults to "none").

The renderCard function destructures its parameter directly in the function signature. Callers pass the full user object, and the function pulls out only what it needs. The score = 0 provides a default in case the property is absent.

Pattern Highlights

✅ Positive Pattern: Destructure function parameters when a function only needs a few properties from a larger object. It makes the function signature self-documenting — you can see exactly which properties are required.

⚠️ Neutral Note: Renaming during destructuring (name: displayName) is useful when a property name conflicts with an existing variable, but it adds visual complexity. Use it only when needed.

❌ Negative Pattern: Avoid deeply nested destructuring in a single expression. const { a: { b: { c } } } = data is hard to read. Unpack one level at a time if the structure is complex.

Common Mistakes

Mistake 1: Treating object destructuring like array destructuring (names vs positions)

Trying to use positional destructuring on an object.

const user = { name: "Sam", role: "editor" };
const [name, role] = user; // TypeError: user is not iterable

Objects are not iterable. Object destructuring uses curly braces and property names: const { name, role } = user.

Mistake 2: Forgetting that destructuring a missing property gives undefined

Expecting a missing property to throw an error instead of silently returning undefined.

const settings = { theme: "dark" };
const { theme, fontSize } = settings;
console.log(fontSize); // undefined — no error, but likely a bug if you rely on it

If a property might be missing, provide a default value: const { fontSize = 16 } = settings.

Mistake 3: Confusing the rename syntax with the default value syntax

Mixing up : (rename) and = (default).

const { name = "displayName" } = user; // sets default, does NOT rename
const { name: "displayName" } = user;  // SyntaxError — right side must be an identifier

To rename: const { name: displayName } = user. To set a default: const { name = "Unknown" } = user. They can be combined: const { name: displayName = "Unknown" } = user.

Quick Recap

• Array destructuring unpacks values by position using square brackets: const [a, b] = arr
• Object destructuring unpacks values by property name using curly braces: const { name, role } = user
• You can rename a destructured property using : and provide defaults using =
• Destructuring can be used directly in function parameters to unpack the argument object inline