JavaScript Object Destructuring: ES6 Syntax Guide

•

Updated October 12, 2026

Direct Answer & Overview

JavaScript object destructuring is an ECMAScript 2015 expression syntax that unpacks properties from objects directly into distinct standalone variables. It supports property renaming, nested extraction, and default fallback assignments.

#destructuring#objects#es6#syntax

JavaScript Source Code

example.js

const user = {
  name: "Suresh",
  age: 30
};

const { name, age } = user;

console.log(name);
console.log(age);

How does this JavaScript code work?

Object destructuring (`const { name, age } = user;`) extracts properties from an object and binds them to local variables with matching names. It streamlines parameter handling in functions and avoids redundant property access chains. Developers can also rename variables during destructuring using a colon (`const { name: userName } = user;`) or provide fallback defaults (`const { role = 'Guest' } = user;`).

What is the expected terminal output?

Executing this code in JS CodeLab produces the following stdout sequence in the developer console:

Console Standard Output

Suresh
30

Common mistakes to avoid

!Using square brackets [] instead of curly braces {} for object destructuring (square brackets destructure arrays).
!Destructuring properties from null or undefined, throwing an uncatchable TypeError: Cannot destructure property of null.
!Confusing the renaming syntax { original: newName } with property default assignment.
!Over-destructuring deeply nested objects, making code brittle when intermediate parent keys might be missing.

Frequently Asked Questions

Can you rename a variable during object destructuring?

Yes. Use the colon syntax: const { name: fullName } = user extracts the property 'name' and assigns it to a new local variable named 'fullName'.

Can you provide default values during destructuring?

Yes. Use equals syntax: const { role = 'Developer' } = user assigns 'Developer' if user.role is undefined.

What happens if you destructure a property that does not exist?

The newly created variable is assigned undefined, unless you provided an explicit default value in the destructuring pattern.

Comprehensive Tutorial

Want an in-depth understanding of this topic?

Read our complete, interactive tutorial covering memory management, edge cases, and best practices.

Read the full destructuring tutorial →

object basics →object spread →