Destructuring vs dot notation?

Use destructuring when you need multiple properties from the same object, especially in function parameters. For accessing a single property once, dot notation (obj.prop) is simpler and more readable.

Does destructuring clone the values?

No: it creates new variable bindings pointing to the same values. For primitives (strings, numbers) you get a copy. For objects/arrays, you get a reference to the same object. It's like const name = obj.name.

What if the source is null/undefined?

Destructuring null or undefined throws a TypeError. Use defaults or optional chaining: const { name } = obj ?? {}; or handle the null case before destructuring.

Can I destructure in a for loop?

Yes! for (const { name, age } of users) { } or for (const [index, value] of array.entries()) { }. Very common and readable.

JavaScript Destructuring

Extract values from arrays and objects into variables.

Module 4 · Data Structures

Destructuring unpacks values from arrays and properties from objects into separate variables in one line. Array destructuring matches by position, const [a, b] = list; object destructuring matches by name, const { name, age } = user. You can rename variables, skip items, set defaults, and destructure function parameters.

Step through this example in the visualizer

About this module

JavaScript's core data structures are arrays (ordered lists accessed by index) and objects (key-value records accessed by name). Almost all real-world data, such as a list of products, a user profile, or an API response, is some combination of the two, so creating, reading, updating, and looping over them is essential for any project.

This module covers array methods like map and filter, object property access, destructuring assignment, the spread operator, and JSON: the format every REST API speaks. Visual memory diagrams show how references and copies behave so you avoid common mutation bugs.

Why this matters

Destructuring appears everywhere in modern code: React props, hook return values, fetch response unpacking, and function parameters. It makes code shorter and signals exactly which fields matter.

Key topics covered

Array Destructuring
Object Destructuring
Defaults & Renaming
Nested Destructuring
In Function Parameters

Where you'll use it

Unpacking fields from an API response in one line
Swapping variables or skipping array elements with holes
Providing defaults when nested data may be missing
Cleaning up function signatures with object parameter destructuring

Array Destructuring

Extract array elements by position.

// Basic: extract by position:
const colors = ["red", "green", "blue"];
const [first, second, third] = colors;
// first = "red", second = "green", third = "blue"

// Skip elements with commas:
const [, , blue] = colors; // skip first two
// blue = "blue"

// Swap variables (no temp needed!):
let a = 1, b = 2;
[a, b] = [b, a];
// a = 2, b = 1

// Rest pattern: collect remaining:
const [head, ...tail] = [1, 2, 3, 4, 5];
// head = 1, tail = [2, 3, 4, 5]

// From function return values:
function getCoords() { return [10, 20]; }
const [x, y] = getCoords();
// x = 10, y = 20

Object Destructuring

Extract object properties by name.

// Basic: extract by property name:
const user = { name: "Alice", age: 25, city: "Tokyo" };
const { name, age, city } = user;
// name = "Alice", age = 25, city = "Tokyo"

// Order doesn't matter (it's by name, not position):
const { city, name } = user; // same result

// Only take what you need:
const { name } = user; // just name, ignore the rest

// Rest pattern: collect remaining properties:
const { name, ...rest } = user;
// name = "Alice", rest = { age: 25, city: "Tokyo" }

// From function returns:
function getUser() {
  return { id: 1, name: "Alice", role: "admin" };
}
const { id, role } = getUser();

Defaults & Renaming

Handle missing values and rename variables.

// Default values (when property is undefined):
const { name, age = 0, role = "viewer" } = { name: "Alice" };
// name = "Alice", age = 0, role = "viewer"

// Array defaults:
const [a = 1, b = 2, c = 3] = [10, 20];
// a = 10, b = 20, c = 3

// ⚠️ Only undefined triggers defaults (not null):
const { x = 5 } = { x: null };
// x = null (NOT 5)
const { y = 5 } = { y: undefined };
// y = 5 (default used)

Defaults activate only when the value is undefined: the same rule as function default parameters.

1 / 2

Nested Destructuring

Dig into deeply nested structures.

// Nested objects:
const response = {
  data: {
    user: { name: "Alice", address: { city: "Tokyo" } }
  },
  status: 200
};

const { data: { user: { name, address: { city } } } } = response;
// name = "Alice", city = "Tokyo"

// Nested arrays:
const matrix = [[1, 2], [3, 4], [5, 6]];
const [[a, b], [c, d]] = matrix;
// a = 1, b = 2, c = 3, d = 4

// Mixed (objects in arrays):
const people = [
  { name: "Alice", scores: [90, 85] },
  { name: "Bob", scores: [70, 95] },
];
const [{ name: firstName, scores: [first] }] = people;
// firstName = "Alice", first = 90

// ⚠️ Deep nesting reduces readability.
// Sometimes it's clearer to destructure in steps:
const { data } = response;
const { user } = data;
const { name } = user;

In Function Parameters

Destructure arguments directly in the function signature.

// Object parameter destructuring:
function greet({ name, greeting = "Hello" }) {
  return `${greeting}, ${name}!`;
}
greet({ name: "Alice" });           // "Hello, Alice!"
greet({ name: "Bob", greeting: "Hi" }); // "Hi, Bob!"

// Array parameter destructuring:
function sum([a, b, c = 0]) {
  return a + b + c;
}
sum([1, 2]);    // 3
sum([1, 2, 3]); // 6

// Rest in parameters:
function first({ name, ...rest }) {
  console.log(name);  // main value
  console.log(rest);  // everything else
}

// React component pattern:
function UserCard({ name, email, avatar = "/default.png" }) {
  // Direct access to props without props.name, props.email
}

// With TypeScript:
// function process({ id, data }: { id: number; data: string }) {}

// Default the whole parameter to {}:
function configure({ debug = false, timeout = 3000 } = {}) {
  return { debug, timeout };
}
configure();              // works! { debug: false, timeout: 3000 }
configure({ debug: true }); // { debug: true, timeout: 3000 }

FAQ

Common questions about destructuring.

// Basic: extract by position: const colors = ["red", "green", "blue"]; const [first, second, third] = colors; // first = "red", second = "green", third = "blue" // Skip elements with commas: const [, , blue] = colors; // skip first two // blue = "blue" // Swap variables (no temp needed!): let a = 1, b = 2; [a, b] = [b, a]; // a = 2, b = 1 // Rest pattern: collect remaining: const [head, ...tail] = [1, 2, 3, 4, 5]; // head = 1, tail = [2, 3, 4, 5] // From function return values: function getCoords() { return [10, 20]; } const [x, y] = getCoords(); // x = 10, y = 20

// Basic: extract by property name: const user = { name: "Alice", age: 25, city: "Tokyo" }; const { name, age, city } = user; // name = "Alice", age = 25, city = "Tokyo" // Order doesn't matter (it's by name, not position): const { city, name } = user; // same result // Only take what you need: const { name } = user; // just name, ignore the rest // Rest pattern: collect remaining properties: const { name, ...rest } = user; // name = "Alice", rest = { age: 25, city: "Tokyo" } // From function returns: function getUser() { return { id: 1, name: "Alice", role: "admin" }; } const { id, role } = getUser();

// Default values (when property is undefined): const { name, age = 0, role = "viewer" } = { name: "Alice" }; // name = "Alice", age = 0, role = "viewer" // Array defaults: const [a = 1, b = 2, c = 3] = [10, 20]; // a = 10, b = 20, c = 3 // ⚠️ Only undefined triggers defaults (not null): const { x = 5 } = { x: null }; // x = null (NOT 5) const { y = 5 } = { y: undefined }; // y = 5 (default used)

// Nested objects: const response = { data: { user: { name: "Alice", address: { city: "Tokyo" } } }, status: 200 }; const { data: { user: { name, address: { city } } } } = response; // name = "Alice", city = "Tokyo" // Nested arrays: const matrix = [[1, 2], [3, 4], [5, 6]]; const [[a, b], [c, d]] = matrix; // a = 1, b = 2, c = 3, d = 4 // Mixed (objects in arrays): const people = [ { name: "Alice", scores: [90, 85] }, { name: "Bob", scores: [70, 95] }, ]; const [{ name: firstName, scores: [first] }] = people; // firstName = "Alice", first = 90 // ⚠️ Deep nesting reduces readability. // Sometimes it's clearer to destructure in steps: const { data } = response; const { user } = data; const { name } = user;

// Object parameter destructuring: function greet({ name, greeting = "Hello" }) { return `${greeting}, ${name}!`; } greet({ name: "Alice" }); // "Hello, Alice!" greet({ name: "Bob", greeting: "Hi" }); // "Hi, Bob!" // Array parameter destructuring: function sum([a, b, c = 0]) { return a + b + c; } sum([1, 2]); // 3 sum([1, 2, 3]); // 6 // Rest in parameters: function first({ name, ...rest }) { console.log(name); // main value console.log(rest); // everything else } // React component pattern: function UserCard({ name, email, avatar = "/default.png" }) { // Direct access to props without props.name, props.email } // With TypeScript: // function process({ id, data }: { id: number; data: string }) {} // Default the whole parameter to {}: function configure({ debug = false, timeout = 3000 } = {}) { return { debug, timeout }; } configure(); // works! { debug: false, timeout: 3000 } configure({ debug: true }); // { debug: true, timeout: 3000 }

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

Array Destructuring

Object Destructuring

Defaults & Renaming

Nested Destructuring

In Function Parameters

FAQ

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

Array Destructuring

Object Destructuring

Defaults & Renaming

Nested Destructuring

In Function Parameters

FAQ