JavaScriptObjectsBeginner

Object destructuring

Extracts properties into variables with optional renaming/defaults.

Review the syntaxStudy the examplesOpen the coding app
const { a, b: renamed, c = defaultValue } = obj;
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Extracts properties into variables with optional renaming/defaults.

Object destructuring is an ECMAScript 2015 (ES6) syntax that allows for the extraction of properties from objects into distinct variables using a notation that mirrors object literal construction. Technically, it performs a series of 'Get' operations on the source object. If a targeted property does not exist, the variable is assigned 'undefined' unless a default value is specified. While highly expressive, developers should be aware that destructuring null or undefined values will throw a TypeError because these values are not object-coercible. Performance is generally comparable to standard dot notation in modern engines like V8, though excessive use of the rest operator (...rest) can incur overhead as it creates a shallow copy of the remaining properties. Note that object destructuring is an ES6 feature and is not supported in Internet Explorer.

Quick reference

Syntax

const { a, b: renamed, c = defaultValue } = obj;

See it in practice

Examples

1

Basic Destructuring with Renaming and Defaults

const user = { id: 42, isVerified: true };
const { id, isVerified: active, email = 'guest@example.com' } = user;
console.log(id);
console.log(active);
console.log(email);
Output:
42 true 'guest@example.com'

Extracts 'id', renames 'isVerified' to 'active', and provides a default value for 'email' since it is missing in the source object.

2

Nested Object Destructuring

const profile = { name: 'John', settings: { theme: 'dark', notifications: true } };
const { settings: { theme } } = profile;
console.log(theme);
Output:
'dark'

Demonstrates how to reach into nested object structures to extract specific deeply-held properties in one line.

3

Function Parameter Destructuring

const options = { title: 'My App', width: 800 };
function displayConfig({ title, width, height = 600 }) {
  return title + ' is ' + width + 'x' + height;
}
console.log(displayConfig(options));
Output:
'My App is 800x600'

Commonly used in frameworks like React to extract props directly in the function signature, allowing for default values.

Debug faster

Common Errors

1

TypeError

Cause: Attempting to destructure null or undefined values.

Fix: Use an empty object fallback (obj || {}) or verify the object exists before destructuring.

const { name } = null;
2

SyntaxError

Cause: Omitting parentheses when destructuring into variables that have already been declared.

Fix: Wrap the entire assignment expression in parentheses so the engine does not interpret the curly braces as a block statement.

let x; { x } = { x: 10 }; // Error
({ x } = { x: 10 }); // Fixed

Runtime support

Compatibility

Node.js, BrowserAll modern browsers, IE not supportedES6 (2015)

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Extracts properties into variables with optional renaming/defaults.

TypeError: Use an empty object fallback (obj || {}) or verify the object exists before destructuring. SyntaxError: Wrap the entire assignment expression in parentheses so the engine does not interpret the curly braces as a block statement.