JavaScript Destructuring — Object & Array Patterns with Examples | TryJS

Learn JavaScript object and array destructuring with runnable examples. Nested destructuring, defaults, rest patterns, and renaming — all explained.

Overview

Destructuring is a syntax that lets you pull values out of objects and arrays into standalone variables in a single statement. It replaces a pile of manual assignments with one line, supports default values, renaming, nested access, and rest patterns. Destructuring is the idiomatic way to unpack function arguments, React props, and API responses in modern JavaScript.

How It Works

Object destructuring

const { a, b } = obj pulls obj.a and obj.b into local variables. Use { a: x } to rename, { a = 1 } for defaults, and { a, ...rest } to collect remaining keys.

Array destructuring

const [first, second] = arr binds by index. Use [, , third] to skip elements and [first, ...rest] to capture the tail.

Nested destructuring with defaults

You can destructure nested objects and provide defaults at every level: const { a: { b = 1 } = {} } = obj. The inner default only applies when a is undefined — not null or 0.

Function parameter destructuring

Destructure directly in the parameter list: function greet({ name, age = 18 }) { ... }. This is how React components receive props and how most modern APIs are consumed.

Common Mistakes

• Forgetting that defaults only fire on undefined — null, 0, and empty string all bypass the default.
• Trying to destructure a null/undefined value without a fallback default, causing a TypeError.
• Using array destructuring on an object (or vice versa) — they are not interchangeable.
• Renaming with the wrong syntax: { a as b } is invalid; the correct form is { a: b }.

When to Use It

Use destructuring whenever you'd otherwise write three or more manual property assignments, or whenever a function takes more than one or two arguments — named-parameter-style destructuring is much clearer than positional arguments.

Runnable Example

// Object destructuring with rename, defaults, and rest
const user = { name: "Alice", age: 30, city: "NYC" };
const { name: userName, age, country = "USA", ...rest } = user;
console.log(userName, age, country, rest);

// Array destructuring with skip and rest
const [first, , third, ...others] = [1, 2, 3, 4, 5, 6];
console.log(first, third, others);

// Nested destructuring with safe default
const response = { data: { user: { id: 42 } } };
const { data: { user: { id, role = "guest" } = {} } = {} } = response;
console.log(id, role);

// Function parameter destructuring
function formatUser({ name, age = 0, admin = false }) {
  return `${name} (${age}) ${admin ? "[admin]" : ""}`;
}
console.log(formatUser({ name: "Bob", admin: true }));

Open this example in the TryJS playground to edit and run the code instantly in your browser — no signup needed.

Frequently Asked Questions

What is destructuring in JavaScript?

Destructuring is syntax that unpacks values from objects or arrays into variables in one statement. Instead of const name = user.name; const age = user.age; you write const { name, age } = user;

How do I set default values when destructuring?

Use = inside the destructuring pattern: const { name = 'Guest' } = user. The default only applies if the property is undefined — null will not trigger it.

Can I destructure nested objects?

Yes: const { address: { city } } = user extracts user.address.city. Be careful: if address is undefined this throws. Guard with = {}: const { address: { city } = {} } = user.

How do I rename a variable while destructuring?

Use a colon: const { name: userName } = user. This reads 'take the name property and store it as userName in local scope'.