Learn how to unpack properties from objects into variables using destructuring in JavaScript.

Object Destructuring

When you want to pull properties out of an object and use them as variables, the traditional way looks like this:

const user = { name: "Ali", age: 22, city: "Lahore" };

const name = user.name;
const age = user.age;
const city = user.city;

It works — but it is repetitive. You are writing user.name, user.age, user.city just to give names to things you already know exist.

Object destructuring lets you do this in one clean line:

const user = { name: "Ali", age: 22, city: "Lahore" };

const { name, age, city } = user;

console.log(name); // Ali
console.log(age);  // 22
console.log(city); // Lahore

The curly braces on the left mirror the structure of the object on the right. Properties are unpacked by name — not by position like array destructuring.

Basic Syntax

const { key1, key2 } = object;

The variable names on the left must match the key names in the object. JavaScript looks up each key and assigns its value.

const product = {
  name: "Laptop",
  price: 120000,
  inStock: true
};

const { name, price, inStock } = product;

console.log(name);    // Laptop
console.log(price);   // 120000
console.log(inStock); // true

Renaming Variables

Sometimes the key name from the object is not the name you want to use in your code. Use a colon to rename it:

const { originalKey: newName } = object;

const user = { name: "Ali", age: 22 };

const { name: username, age: userAge } = user;

console.log(username); // Ali
console.log(userAge);  // 22
console.log(name);     // ReferenceError — name does not exist, username does

The original key name is mapped to a new variable called username. The original key name is no longer available as a variable.

Real use — avoiding naming conflicts:

const product = { name: "Laptop", price: 120000 };
const category = { name: "Electronics", tax: 0.17 };

const { name: productName } = product;
const { name: categoryName } = category;

console.log(productName);  // Laptop
console.log(categoryName); // Electronics

Default Values

If a key does not exist in the object, the variable becomes undefined. Provide a default to use instead.

const user = { name: "Ali", age: 22 };

const { name, age, city = "Unknown" } = user;

console.log(name); // Ali
console.log(age);  // 22
console.log(city); // Unknown — key did not exist, default used

Combine renaming and defaults:

const { name: username = "Guest", role: userRole = "viewer" } = user;

console.log(username); // Ali — existed, used the value
console.log(userRole); // viewer — did not exist, used default

Rest in Object Destructuring

Use ... to collect remaining properties into a new object.

const user = { name: "Ali", age: 22, city: "Lahore", role: "admin" };

const { name, age, ...rest } = user;

console.log(name); // Ali
console.log(age);  // 22
console.log(rest); // { city: "Lahore", role: "admin" }

Real use — separating known properties from unknown ones:

const config = {
  host: "localhost",
  port: 3000,
  debug: true,
  timeout: 5000,
  retries: 3
};

const { host, port, ...options } = config;

console.log(host);    // localhost
console.log(port);    // 3000
console.log(options); // { debug: true, timeout: 5000, retries: 3 }

Nested Object Destructuring

You can destructure nested objects by mirroring their structure.

const user = {
  name: "Ali",
  address: {
    city: "Lahore",
    country: "Pakistan"
  }
};

const { name, address: { city, country } } = user;

console.log(name);    // Ali
console.log(city);    // Lahore
console.log(country); // Pakistan
console.log(address); // ReferenceError — address is not a variable here

address is used as a path to reach into — it does not become a variable itself. Only city and country are created.

If you want both the nested values and the parent object:

const { name, address, address: { city, country } } = user;

console.log(address); // { city: "Lahore", country: "Pakistan" }
console.log(city);    // Lahore

Destructuring in Function Parameters

This is one of the most common places you will see object destructuring — pulling out exactly the properties you need directly in the function signature.

// Without destructuring — repetitive
function displayUser(user) {
  console.log(`${user.name} is ${user.age} from ${user.city}`);
}

// With destructuring — clean and direct
function displayUser({ name, age, city }) {
  console.log(`${name} is ${age} from ${city}`);
}

displayUser({ name: "Ali", age: 22, city: "Lahore" });
// Ali is 22 from Lahore

With defaults in parameters:

function createProfile({ name, age, role = "user", isVerified = false }) {
  console.log(`${name} (${age}) — ${role} — verified: ${isVerified}`);
}

createProfile({ name: "Ali", age: 22 });
// Ali (22) — user — verified: false

createProfile({ name: "Sara", age: 25, role: "admin", isVerified: true });
// Sara (25) — admin — verified: true

This pattern is used everywhere in React — every component receives a props object and destructures what it needs right in the parameter.

Destructuring in Loops

Combine for...of with destructuring to get clean access to object properties in each iteration.

const students = [
  { name: "Ali",  score: 88 },
  { name: "Sara", score: 45 },
  { name: "Zara", score: 92 },
];

for (const { name, score } of students) {
  const grade = score >= 50 ? "Pass" : "Fail";
  console.log(`${name}: ${score} — ${grade}`);
}

// Ali: 88 — Pass
// Sara: 45 — Fail
// Zara: 92 — Pass

Much cleaner than student.name and student.score on every line.

Destructuring with `Object.entries()`

Combine destructuring with Object.entries() to get both key and value cleanly:

const prices = { laptop: 120000, mouse: 1500, keyboard: 4500 };

for (const [product, price] of Object.entries(prices)) {
  console.log(`${product}: Rs. ${price}`);
}

// laptop: Rs. 120000
// mouse: Rs. 1500
// keyboard: Rs. 4500

A Real Example — API Response

When data comes from an API it is usually a deeply nested object. Destructuring makes working with it clean and readable.

const apiResponse = {
  status: 200,
  data: {
    user: {
      id: 1,
      name: "Ali",
      email: "ali@example.com",
      stats: {
        posts: 42,
        followers: 1200
      }
    }
  }
};

const {
  status,
  data: {
    user: {
      name,
      email,
      stats: { posts, followers }
    }
  }
} = apiResponse;

console.log(status);    // 200
console.log(name);      // Ali
console.log(email);     // ali@example.com
console.log(posts);     // 42
console.log(followers); // 1200

One destructuring block — everything you need pulled out with meaningful names, no chaining like apiResponse.data.user.stats.followers.

Deep destructuring like this is powerful but can get hard to read when taken too far. If the nesting gets beyond three levels, consider destructuring in stages — one level at a time — for better readability.

Summary

Object destructuring unpacks properties into variables by name
Syntax mirrors the object structure — const { key1, key2 } = object
Rename with a colon — const { originalKey: newName } = object
Provide defaults with = — const { key = defaultValue } = object
Use ...rest to collect remaining properties into a new object
Nest destructuring to reach into nested objects — const { outer: { inner } } = object
Destructure in function parameters to pull out only what you need
Destructure in for...of loops for clean access to object properties
Combine renaming and defaults — const { key: name = "default" } = object

Object Destructuring

On this page