Object Destructuring

Object destructuring is a powerful ES6 feature that allows you to extract multiple properties from an object and assign them to variables in a single, elegant statement. Instead of accessing properties one by one, destructuring provides a clean, readable syntax that makes your code more concise and maintainable. It's widely used in modern JavaScript and is essential for working with APIs, function parameters, and complex data structures. Let's master this essential modern JavaScript feature!

What Is Object Destructuring?

Object destructuring is a syntax that extracts (unpacks) properties from objects into distinct variables.

Destructuring is more elegant

Without Destructuring

// Without destructuring
let user = {
  name: "Alice",
  age: 25,
  email: "alice@test.com"
};

// Access properties one by one
let name = user.name;
let age = user.age;
let email = user.email;

console.log(name);   // "Alice"
console.log(age);    // 25
console.log(email);  // "alice@test.com"

// Repetitive and verbose

Output:

Not run yet...

With Destructuring

// With destructuring
let user = {
  name: "Alice",
  age: 25,
  email: "alice@test.com"
};

// Extract multiple properties at once
let { name, age, email } = user;

console.log(name);   // "Alice"
console.log(age);    // 25
console.log(email);  // "alice@test.com"

// Clean and concise!

Output:

Not run yet...

Benefits of destructuring:

Less code to write
More readable and self-documenting
Extract only the properties you need
Perfect for function parameters
Works with nested objects

Basic Destructuring

Simple Extraction

JAVASCRIPT

let person = {
  name: "Alice",
  age: 25,
  city: "NYC"
};

// Destructure properties
let { name, age, city } = person;

console.log(name);  // "Alice"
console.log(age);   // 25
console.log(city);  // "NYC"

// Extract only what you need
let product = {
  id: 1,
  name: "Laptop",
  price: 1000,
  category: "Electronics",
  inStock: true
};

// Only extract name and price
let { name: productName, price } = product;

console.log(productName);  // "Laptop"
console.log(price);        // 1000
// id, category, inStock are not extracted

Order Doesn't Matter

JAVASCRIPT

let user = {
  name: "Bob",
  email: "bob@test.com",
  age: 30
};

// Order doesn't matter - matches by property name
let { email, name, age } = user;

console.log(name);   // "Bob"
console.log(email);  // "bob@test.com"
console.log(age);    // 30

// This also works (different order)
let { age: userAge, email: userEmail, name: userName } = user;

console.log(userName);   // "Bob"
console.log(userEmail);  // "bob@test.com"
console.log(userAge);    // 30

Extracting Specific Properties

JAVASCRIPT

let config = {
  host: "localhost",
  port: 3000,
  database: "mydb",
  username: "admin",
  password: "secret123",
  timeout: 5000,
  retry: 3
};

// Extract only needed properties
let { host, port, database } = config;

console.log(host);      // "localhost"
console.log(port);      // 3000
console.log(database);  // "mydb"
// Other properties are ignored

// Useful in functions
function connect({ host, port, database }) {
  return `Connecting to ${database} at ${host}:${port}`;
}

console.log(connect(config));
// "Connecting to mydb at localhost:3000"

Renaming Variables

You can extract a property but assign it to a variable with a different name using the colon syntax.

JAVASCRIPT

let user = {
  name: "Alice",
  age: 25,
  email: "alice@test.com"
};

// Rename during destructuring: propertyName: newVariableName
let { name: userName, age: userAge, email: userEmail } = user;

console.log(userName);   // "Alice"
console.log(userAge);    // 25
console.log(userEmail);  // "alice@test.com"

// console.log(name);    // Error! 'name' is not defined
// console.log(age);     // Error! 'age' is not defined

// Practical example: avoiding naming conflicts
let product = {
  name: "Laptop",
  price: 1000
};

let user2 = {
  name: "Bob",
  id: 123
};

// Rename to avoid conflicts
let { name: productName, price } = product;
let { name: userName2, id: userId } = user2;

console.log(productName);  // "Laptop"
console.log(userName2);    // "Bob"
console.log(price);        // 1000
console.log(userId);       // 123

When to Rename

Common reasons to rename:

Avoiding naming conflicts with existing variables
Making variable names more descriptive
Following naming conventions (e.g., camelCase)
Clarifying context in complex code

JAVASCRIPT

// API response with generic names
let response = {
  data: {
    id: 1,
    value: "Important data"
  },
  status: 200,
  message: "Success"
};

// Rename for clarity
let { 
  data: responseData, 
  status: httpStatus, 
  message: statusMessage 
} = response;

console.log(responseData);    // { id: 1, value: "Important data" }
console.log(httpStatus);      // 200
console.log(statusMessage);   // "Success"

Default Values

You can provide default values that are used if the property doesn't exist or is undefined.

JAVASCRIPT

let user = {
  name: "Alice",
  age: 25
};

// Provide default values
let { 
  name, 
  age, 
  email = "no-email@example.com",
  role = "user"
} = user;

console.log(name);   // "Alice"
console.log(age);    // 25
console.log(email);  // "no-email@example.com" (default used)
console.log(role);   // "user" (default used)

// Default values with undefined
let config = {
  host: "localhost",
  port: undefined,
  timeout: null
};

let { 
  host, 
  port = 3000,      // Used because port is undefined
  timeout = 5000    // NOT used because timeout is null (not undefined)
} = config;

console.log(host);     // "localhost"
console.log(port);     // 3000 (default)
console.log(timeout);  // null (not undefined, so default not used)

Combining Renaming and Default Values

JAVASCRIPT

let options = {
  title: "My App",
  width: 800
};

// Rename AND provide defaults
let { 
  title: appTitle = "Untitled",
  width: appWidth = 1000,
  height: appHeight = 600  // Not in object, use default
} = options;

console.log(appTitle);   // "My App"
console.log(appWidth);   // 800
console.log(appHeight);  // 600 (default)

// Practical example: API with optional fields
let apiResponse = {
  userId: 123,
  username: "alice"
  // email and avatar are missing
};

let {
  userId,
  username: name,
  email = "not-provided@example.com",
  avatar: profilePic = "/default-avatar.png"
} = apiResponse;

console.log(userId);      // 123
console.log(name);        // "alice"
console.log(email);       // "not-provided@example.com"
console.log(profilePic);  // "/default-avatar.png"

Nested Destructuring

You can destructure nested objects by mirroring the object structure in your destructuring pattern.

JAVASCRIPT

let user = {
  name: "Alice",
  age: 25,
  address: {
    street: "123 Main St",
    city: "NYC",
    zip: "10001",
    country: "USA"
  },
  contacts: {
    email: "alice@test.com",
    phone: "555-0123"
  }
};

// Destructure nested properties
let {
  name,
  address: { city, country },
  contacts: { email }
} = user;

console.log(name);     // "Alice"
console.log(city);     // "NYC"
console.log(country);  // "USA"
console.log(email);    // "alice@test.com"

// Note: 'address' and 'contacts' are NOT created as variables
// console.log(address);  // Error! Not defined

// To get both parent and nested properties
let {
  name: userName,
  address,  // Get the whole object
  address: { city: userCity }  // And specific nested property
} = user;

console.log(userName);  // "Alice"
console.log(address);   // { street: "123 Main St", ... }
console.log(userCity);  // "NYC"

Deep Nesting

JAVASCRIPT

let company = {
  name: "TechCorp",
  location: {
    headquarters: {
      address: {
        street: "456 Tech Ave",
        city: "San Francisco",
        state: "CA"
      }
    }
  },
  employees: {
    engineering: {
      frontend: {
        lead: "Alice",
        count: 10
      }
    }
  }
};

// Deep nested destructuring
let {
  name: companyName,
  location: {
    headquarters: {
      address: { city: hqCity }
    }
  },
  employees: {
    engineering: {
      frontend: { lead: frontendLead, count: frontendCount }
    }
  }
} = company;

console.log(companyName);     // "TechCorp"
console.log(hqCity);          // "San Francisco"
console.log(frontendLead);    // "Alice"
console.log(frontendCount);   // 10

Nested Destructuring with Defaults

JAVASCRIPT

let user = {
  name: "Bob",
  settings: {
    theme: "dark"
    // notifications is missing
  }
};

// Nested destructuring with defaults
let {
  name,
  settings: {
    theme = "light",
    notifications = true,
    language = "en"
  } = {}  // Default empty object if settings is undefined
} = user;

console.log(name);           // "Bob"
console.log(theme);          // "dark"
console.log(notifications);  // true (default)
console.log(language);       // "en" (default)

// Without the = {} default, destructuring undefined settings would error
let user2 = {
  name: "Charlie"
  // settings is completely missing
};

let {
  name: userName2,
  settings: {
    theme: userTheme = "light"
  } = {}  // IMPORTANT! Default to empty object
} = user2;

console.log(userName2);  // "Charlie"
console.log(userTheme);  // "light"

Rest Operator in Destructuring

The rest operator (...) collects remaining properties into a new object.

JAVASCRIPT

let user = {
  name: "Alice",
  age: 25,
  email: "alice@test.com",
  city: "NYC",
  country: "USA"
};

// Extract specific properties, rest goes to 'others'
let { name, age, ...others } = user;

console.log(name);    // "Alice"
console.log(age);     // 25
console.log(others);  // { email: "alice@test.com", city: "NYC", country: "USA" }

// Practical: Separate known from unknown properties
let config = {
  host: "localhost",
  port: 3000,
  database: "mydb",
  ssl: true,
  timeout: 5000,
  retry: 3,
  verbose: false
};

let { host, port, database, ...advancedOptions } = config;

console.log("Connection:", { host, port, database });
console.log("Advanced:", advancedOptions);
// { ssl: true, timeout: 5000, retry: 3, verbose: false }

Rest Must Be Last

JAVASCRIPT

let obj = { a: 1, b: 2, c: 3, d: 4 };

// Correct: rest operator is last
let { a, ...rest } = obj;
console.log(a);     // 1
console.log(rest);  // { b: 2, c: 3, d: 4 }

// Also correct
let { a: first, b: second, ...remaining } = obj;
console.log(first);      // 1
console.log(second);     // 2
console.log(remaining);  // { c: 3, d: 4 }

// Error: rest must be last
// let { ...rest, a } = obj;  // SyntaxError!

Destructuring in Function Parameters

Destructuring is especially useful in function parameters, making function calls more readable and flexible.

JAVASCRIPT

// Without destructuring
function displayUser(user) {
  console.log(`Name: ${user.name}`);
  console.log(`Email: ${user.email}`);
  console.log(`Age: ${user.age}`);
}

// With destructuring
function displayUserBetter({ name, email, age }) {
  console.log(`Name: ${name}`);
  console.log(`Email: ${email}`);
  console.log(`Age: ${age}`);
}

let user = {
  name: "Alice",
  email: "alice@test.com",
  age: 25
};

displayUserBetter(user);

// With defaults
function createUser({ 
  name, 
  email, 
  role = "user",
  active = true 
}) {
  return {
    name,
    email,
    role,
    active,
    createdAt: new Date()
  };
}

let newUser = createUser({
  name: "Bob",
  email: "bob@test.com"
  // role and active use defaults
});

console.log(newUser);

Nested Destructuring in Parameters

JAVASCRIPT

// Extract nested properties directly
function displayAddress({ 
  name, 
  address: { city, country } 
}) {
  return `${name} lives in ${city}, ${country}`;
}

let person = {
  name: "Alice",
  address: {
    street: "123 Main St",
    city: "NYC",
    country: "USA"
  }
};

console.log(displayAddress(person));
// "Alice lives in NYC, USA"

// With defaults for missing nested properties
function getConfig({ 
  host = "localhost",
  settings: {
    theme = "light",
    notifications = true
  } = {}
}) {
  return { host, theme, notifications };
}

console.log(getConfig({ host: "example.com", settings: { theme: "dark" } }));
// { host: "example.com", theme: "dark", notifications: true }

console.log(getConfig({ host: "example.com" }));
// { host: "example.com", theme: "light", notifications: true }

Rest in Function Parameters

JAVASCRIPT

// Extract specific params, rest goes to options
function createProduct({ name, price, ...options }) {
  return {
    name,
    price,
    options  // Contains all other properties
  };
}

let product = createProduct({
  name: "Laptop",
  price: 1000,
  color: "silver",
  ram: "16GB",
  storage: "512GB"
});

console.log(product);
// {
//   name: "Laptop",
//   price: 1000,
//   options: { color: "silver", ram: "16GB", storage: "512GB" }
// }

Practical Examples

Example 1: API Response Handling

JAVASCRIPT

// Simulated API response
let apiResponse = {
  status: 200,
  data: {
    user: {
      id: 123,
      name: "Alice",
      email: "alice@test.com",
      profile: {
        avatar: "/avatar.jpg",
        bio: "Developer"
      }
    },
    token: "abc123xyz"
  },
  meta: {
    timestamp: Date.now(),
    version: "1.0"
  }
};

// Extract relevant data
function processResponse({
  status,
  data: {
    user: {
      id: userId,
      name: userName,
      email: userEmail,
      profile: { avatar, bio = "No bio" } = {}
    },
    token
  },
  meta: { timestamp } = {}
}) {
  return {
    success: status === 200,
    user: {
      id: userId,
      name: userName,
      email: userEmail,
      avatar,
      bio
    },
    token,
    receivedAt: new Date(timestamp).toLocaleString()
  };
}

let result = processResponse(apiResponse);
console.log(result);

Example 2: Configuration Handler

JAVASCRIPT

function initializeApp(config) {
  // Destructure with defaults
  let {
    server: {
      host = "localhost",
      port = 3000,
      ssl = false
    } = {},
    database: {
      type = "mongodb",
      host: dbHost = "localhost",
      name: dbName = "myapp"
    } = {},
    features: {
      auth = true,
      logging = true,
      cache = false
    } = {},
    ...otherSettings
  } = config;
  
  return {
    serverUrl: `${ssl ? 'https' : 'http'}://${host}:${port}`,
    databaseUrl: `${type}://${dbHost}/${dbName}`,
    enabledFeatures: {
      auth,
      logging,
      cache
    },
    additionalSettings: otherSettings
  };
}

// Minimal config
let minimalConfig = {
  server: { host: "example.com" }
};

console.log(initializeApp(minimalConfig));

// Full config
let fullConfig = {
  server: { host: "example.com", port: 8080, ssl: true },
  database: { type: "postgres", name: "production_db" },
  features: { auth: true, logging: true, cache: true },
  environment: "production",
  region: "us-east-1"
};

console.log(initializeApp(fullConfig));

Object Destructuring Practice

Experiment with object destructuring patterns

// Interactive Object Destructuring Practice

console.log("=== Basic Destructuring ===");

let person = {
  name: "Alice",
  age: 25,
  email: "alice@test.com"
};

let { name, age, email } = person;
console.log(name, age, email);

console.log("\n=== Renaming Variables ===");

let product = {
  name: "Laptop",
  price: 1000
};

let { name: productName, price } = product;
console.log("Product:", productName);
console.log("Price:", price);

console.log("\n=== Default Values ===");

let user = {
  username: "bob",
  age: 30
};

let { username, age: userAge, role = "user", active = true } = user;
console.log("Username:", username);
console.log("Age:", userAge);
console.log("Role:", role);  // Default
console.log("Active:", active);  // Default

console.log("\n=== Nested Destructuring ===");

let employee = {
  name: "Charlie",
  position: "Developer",
  address: {
    city: "NYC",
    country: "USA"
  },
  contact: {
    email: "charlie@test.com",
    phone: "555-0123"
  }
};

let {
  name: employeeName,
  address: { city, country },
  contact: { email: employeeEmail }
} = employee;

console.log("Name:", employeeName);
console.log("Location:", city, country);
console.log("Email:", employeeEmail);

console.log("\n=== Rest Operator ===");

let config = {
  host: "localhost",
  port: 3000,
  database: "mydb",
  ssl: true,
  timeout: 5000,
  retry: 3
};

let { host, port, database, ...advanced } = config;
console.log("Basic:", { host, port, database });
console.log("Advanced:", advanced);

console.log("\n=== Function Parameters ===");

function greetUser({ name, age = 0, city = "Unknown" }) {
  return `Hello ${name}, age ${age}, from ${city}`;
}

console.log(greetUser({ name: "Alice", age: 25, city: "NYC" }));
console.log(greetUser({ name: "Bob" }));  // Uses defaults

console.log("\n=== Practical Example ===");

let apiResponse = {
  status: 200,
  data: {
    id: 1,
    title: "Post Title",
    author: {
      name: "Diana",
      email: "diana@test.com"
    },
    tags: ["javascript", "tutorial"]
  },
  meta: {
    timestamp: Date.now()
  }
};

let {
  status,
  data: {
    title,
    author: { name: authorName },
    tags
  }
} = apiResponse;

console.log("Status:", status);
console.log("Title:", title);
console.log("Author:", authorName);
console.log("Tags:", tags.join(", "));

// Extract and format
function displayPost({
  data: {
    title,
    author: { name },
    tags = []
  }
}) {
  return `"${title}" by ${name} [${tags.join(", ")}]`;
}

console.log("\nFormatted:", displayPost(apiResponse));

Output:

Click "Run" to execute your code...

💡 Tip: Use console.log() to see your output in the console above.

Key Takeaways

Destructuring extracts properties: { name, age }
Order doesn't matter—matches by property name
Rename variables: { name: userName }
Provide defaults: { role = "user" }
Combine renaming and defaults: { name: userName = "Guest" }
Destructure nested objects by mirroring structure
Use rest operator to collect remaining properties: { a, ...rest }
Perfect for function parameters—cleaner and more flexible
Non-existent properties return undefined
Use = {} default for nested destructuring safety

What's Next?

You now understand object destructuring—a powerful ES6 feature that makes extracting values from objects clean and elegant! Destructuring is widely used in modern JavaScript and is essential for working with APIs, React, and complex data structures.

In the next lesson, we'll explore Object.keys, values, and entries—built-in methods for iterating over object properties. These methods enable powerful object manipulation and are essential for working with dynamic data!

💪 Practice Challenge:

Before moving on, try creating:

A function that uses destructuring to format user data for display
Extract nested API response data with defaults for missing fields
Use destructuring with rest operator to separate required from optional config
Create a function that destructures and validates form data
Build a configuration merger that uses destructuring and defaults

Test Your Understanding

Question 1 / 4

What does object destructuring do?

Score: 0 / 0

What Is Object Destructuring?

Object destructuring is a syntax that extracts (unpacks) properties from objects into distinct variables.

Destructuring is more elegant

Without Destructuring

// Without destructuring
let user = {
  name: "Alice",
  age: 25,
  email: "alice@test.com"
};

// Access properties one by one
let name = user.name;
let age = user.age;
let email = user.email;

console.log(name);   // "Alice"
console.log(age);    // 25
console.log(email);  // "alice@test.com"

// Repetitive and verbose

Output:

Not run yet...

With Destructuring

// With destructuring
let user = {
  name: "Alice",
  age: 25,
  email: "alice@test.com"
};

// Extract multiple properties at once
let { name, age, email } = user;

console.log(name);   // "Alice"
console.log(age);    // 25
console.log(email);  // "alice@test.com"

// Clean and concise!

Output:

Not run yet...

Benefits of destructuring:

Less code to write
More readable and self-documenting
Extract only the properties you need
Perfect for function parameters
Works with nested objects

Basic Destructuring

Simple Extraction

JAVASCRIPT

let person = {
  name: "Alice",
  age: 25,
  city: "NYC"
};

// Destructure properties
let { name, age, city } = person;

console.log(name);  // "Alice"
console.log(age);   // 25
console.log(city);  // "NYC"

// Extract only what you need
let product = {
  id: 1,
  name: "Laptop",
  price: 1000,
  category: "Electronics",
  inStock: true
};

// Only extract name and price
let { name: productName, price } = product;

console.log(productName);  // "Laptop"
console.log(price);        // 1000
// id, category, inStock are not extracted

Order Doesn't Matter

JAVASCRIPT

let user = {
  name: "Bob",
  email: "bob@test.com",
  age: 30
};

// Order doesn't matter - matches by property name
let { email, name, age } = user;

console.log(name);   // "Bob"
console.log(email);  // "bob@test.com"
console.log(age);    // 30

// This also works (different order)
let { age: userAge, email: userEmail, name: userName } = user;

console.log(userName);   // "Bob"
console.log(userEmail);  // "bob@test.com"
console.log(userAge);    // 30

Extracting Specific Properties

JAVASCRIPT

let config = {
  host: "localhost",
  port: 3000,
  database: "mydb",
  username: "admin",
  password: "secret123",
  timeout: 5000,
  retry: 3
};

// Extract only needed properties
let { host, port, database } = config;

console.log(host);      // "localhost"
console.log(port);      // 3000
console.log(database);  // "mydb"
// Other properties are ignored

// Useful in functions
function connect({ host, port, database }) {
  return `Connecting to ${database} at ${host}:${port}`;
}

console.log(connect(config));
// "Connecting to mydb at localhost:3000"

Renaming Variables

You can extract a property but assign it to a variable with a different name using the colon syntax.

JAVASCRIPT

let user = {
  name: "Alice",
  age: 25,
  email: "alice@test.com"
};

// Rename during destructuring: propertyName: newVariableName
let { name: userName, age: userAge, email: userEmail } = user;

console.log(userName);   // "Alice"
console.log(userAge);    // 25
console.log(userEmail);  // "alice@test.com"

// console.log(name);    // Error! 'name' is not defined
// console.log(age);     // Error! 'age' is not defined

// Practical example: avoiding naming conflicts
let product = {
  name: "Laptop",
  price: 1000
};

let user2 = {
  name: "Bob",
  id: 123
};

// Rename to avoid conflicts
let { name: productName, price } = product;
let { name: userName2, id: userId } = user2;

console.log(productName);  // "Laptop"
console.log(userName2);    // "Bob"
console.log(price);        // 1000
console.log(userId);       // 123

When to Rename

Common reasons to rename:

Avoiding naming conflicts with existing variables
Making variable names more descriptive
Following naming conventions (e.g., camelCase)
Clarifying context in complex code

JAVASCRIPT

// API response with generic names
let response = {
  data: {
    id: 1,
    value: "Important data"
  },
  status: 200,
  message: "Success"
};

// Rename for clarity
let { 
  data: responseData, 
  status: httpStatus, 
  message: statusMessage 
} = response;

console.log(responseData);    // { id: 1, value: "Important data" }
console.log(httpStatus);      // 200
console.log(statusMessage);   // "Success"

Default Values

You can provide default values that are used if the property doesn't exist or is undefined.

JAVASCRIPT

let user = {
  name: "Alice",
  age: 25
};

// Provide default values
let { 
  name, 
  age, 
  email = "no-email@example.com",
  role = "user"
} = user;

console.log(name);   // "Alice"
console.log(age);    // 25
console.log(email);  // "no-email@example.com" (default used)
console.log(role);   // "user" (default used)

// Default values with undefined
let config = {
  host: "localhost",
  port: undefined,
  timeout: null
};

let { 
  host, 
  port = 3000,      // Used because port is undefined
  timeout = 5000    // NOT used because timeout is null (not undefined)
} = config;

console.log(host);     // "localhost"
console.log(port);     // 3000 (default)
console.log(timeout);  // null (not undefined, so default not used)

Combining Renaming and Default Values

JAVASCRIPT

let options = {
  title: "My App",
  width: 800
};

// Rename AND provide defaults
let { 
  title: appTitle = "Untitled",
  width: appWidth = 1000,
  height: appHeight = 600  // Not in object, use default
} = options;

console.log(appTitle);   // "My App"
console.log(appWidth);   // 800
console.log(appHeight);  // 600 (default)

// Practical example: API with optional fields
let apiResponse = {
  userId: 123,
  username: "alice"
  // email and avatar are missing
};

let {
  userId,
  username: name,
  email = "not-provided@example.com",
  avatar: profilePic = "/default-avatar.png"
} = apiResponse;

console.log(userId);      // 123
console.log(name);        // "alice"
console.log(email);       // "not-provided@example.com"
console.log(profilePic);  // "/default-avatar.png"

Nested Destructuring

You can destructure nested objects by mirroring the object structure in your destructuring pattern.

JAVASCRIPT

let user = {
  name: "Alice",
  age: 25,
  address: {
    street: "123 Main St",
    city: "NYC",
    zip: "10001",
    country: "USA"
  },
  contacts: {
    email: "alice@test.com",
    phone: "555-0123"
  }
};

// Destructure nested properties
let {
  name,
  address: { city, country },
  contacts: { email }
} = user;

console.log(name);     // "Alice"
console.log(city);     // "NYC"
console.log(country);  // "USA"
console.log(email);    // "alice@test.com"

// Note: 'address' and 'contacts' are NOT created as variables
// console.log(address);  // Error! Not defined

// To get both parent and nested properties
let {
  name: userName,
  address,  // Get the whole object
  address: { city: userCity }  // And specific nested property
} = user;

console.log(userName);  // "Alice"
console.log(address);   // { street: "123 Main St", ... }
console.log(userCity);  // "NYC"

Deep Nesting

JAVASCRIPT

let company = {
  name: "TechCorp",
  location: {
    headquarters: {
      address: {
        street: "456 Tech Ave",
        city: "San Francisco",
        state: "CA"
      }
    }
  },
  employees: {
    engineering: {
      frontend: {
        lead: "Alice",
        count: 10
      }
    }
  }
};

// Deep nested destructuring
let {
  name: companyName,
  location: {
    headquarters: {
      address: { city: hqCity }
    }
  },
  employees: {
    engineering: {
      frontend: { lead: frontendLead, count: frontendCount }
    }
  }
} = company;

console.log(companyName);     // "TechCorp"
console.log(hqCity);          // "San Francisco"
console.log(frontendLead);    // "Alice"
console.log(frontendCount);   // 10

Nested Destructuring with Defaults

JAVASCRIPT

let user = {
  name: "Bob",
  settings: {
    theme: "dark"
    // notifications is missing
  }
};

// Nested destructuring with defaults
let {
  name,
  settings: {
    theme = "light",
    notifications = true,
    language = "en"
  } = {}  // Default empty object if settings is undefined
} = user;

console.log(name);           // "Bob"
console.log(theme);          // "dark"
console.log(notifications);  // true (default)
console.log(language);       // "en" (default)

// Without the = {} default, destructuring undefined settings would error
let user2 = {
  name: "Charlie"
  // settings is completely missing
};

let {
  name: userName2,
  settings: {
    theme: userTheme = "light"
  } = {}  // IMPORTANT! Default to empty object
} = user2;

console.log(userName2);  // "Charlie"
console.log(userTheme);  // "light"

Rest Operator in Destructuring

The rest operator (...) collects remaining properties into a new object.

JAVASCRIPT

let user = {
  name: "Alice",
  age: 25,
  email: "alice@test.com",
  city: "NYC",
  country: "USA"
};

// Extract specific properties, rest goes to 'others'
let { name, age, ...others } = user;

console.log(name);    // "Alice"
console.log(age);     // 25
console.log(others);  // { email: "alice@test.com", city: "NYC", country: "USA" }

// Practical: Separate known from unknown properties
let config = {
  host: "localhost",
  port: 3000,
  database: "mydb",
  ssl: true,
  timeout: 5000,
  retry: 3,
  verbose: false
};

let { host, port, database, ...advancedOptions } = config;

console.log("Connection:", { host, port, database });
console.log("Advanced:", advancedOptions);
// { ssl: true, timeout: 5000, retry: 3, verbose: false }

Rest Must Be Last

JAVASCRIPT

let obj = { a: 1, b: 2, c: 3, d: 4 };

// Correct: rest operator is last
let { a, ...rest } = obj;
console.log(a);     // 1
console.log(rest);  // { b: 2, c: 3, d: 4 }

// Also correct
let { a: first, b: second, ...remaining } = obj;
console.log(first);      // 1
console.log(second);     // 2
console.log(remaining);  // { c: 3, d: 4 }

// Error: rest must be last
// let { ...rest, a } = obj;  // SyntaxError!

Destructuring in Function Parameters

Destructuring is especially useful in function parameters, making function calls more readable and flexible.

JAVASCRIPT

// Without destructuring
function displayUser(user) {
  console.log(`Name: ${user.name}`);
  console.log(`Email: ${user.email}`);
  console.log(`Age: ${user.age}`);
}

// With destructuring
function displayUserBetter({ name, email, age }) {
  console.log(`Name: ${name}`);
  console.log(`Email: ${email}`);
  console.log(`Age: ${age}`);
}

let user = {
  name: "Alice",
  email: "alice@test.com",
  age: 25
};

displayUserBetter(user);

// With defaults
function createUser({ 
  name, 
  email, 
  role = "user",
  active = true 
}) {
  return {
    name,
    email,
    role,
    active,
    createdAt: new Date()
  };
}

let newUser = createUser({
  name: "Bob",
  email: "bob@test.com"
  // role and active use defaults
});

console.log(newUser);

Nested Destructuring in Parameters

JAVASCRIPT

// Extract nested properties directly
function displayAddress({ 
  name, 
  address: { city, country } 
}) {
  return `${name} lives in ${city}, ${country}`;
}

let person = {
  name: "Alice",
  address: {
    street: "123 Main St",
    city: "NYC",
    country: "USA"
  }
};

console.log(displayAddress(person));
// "Alice lives in NYC, USA"

// With defaults for missing nested properties
function getConfig({ 
  host = "localhost",
  settings: {
    theme = "light",
    notifications = true
  } = {}
}) {
  return { host, theme, notifications };
}

console.log(getConfig({ host: "example.com", settings: { theme: "dark" } }));
// { host: "example.com", theme: "dark", notifications: true }

console.log(getConfig({ host: "example.com" }));
// { host: "example.com", theme: "light", notifications: true }

Rest in Function Parameters

JAVASCRIPT

// Extract specific params, rest goes to options
function createProduct({ name, price, ...options }) {
  return {
    name,
    price,
    options  // Contains all other properties
  };
}

let product = createProduct({
  name: "Laptop",
  price: 1000,
  color: "silver",
  ram: "16GB",
  storage: "512GB"
});

console.log(product);
// {
//   name: "Laptop",
//   price: 1000,
//   options: { color: "silver", ram: "16GB", storage: "512GB" }
// }

Practical Examples

Example 1: API Response Handling

JAVASCRIPT

// Simulated API response
let apiResponse = {
  status: 200,
  data: {
    user: {
      id: 123,
      name: "Alice",
      email: "alice@test.com",
      profile: {
        avatar: "/avatar.jpg",
        bio: "Developer"
      }
    },
    token: "abc123xyz"
  },
  meta: {
    timestamp: Date.now(),
    version: "1.0"
  }
};

// Extract relevant data
function processResponse({
  status,
  data: {
    user: {
      id: userId,
      name: userName,
      email: userEmail,
      profile: { avatar, bio = "No bio" } = {}
    },
    token
  },
  meta: { timestamp } = {}
}) {
  return {
    success: status === 200,
    user: {
      id: userId,
      name: userName,
      email: userEmail,
      avatar,
      bio
    },
    token,
    receivedAt: new Date(timestamp).toLocaleString()
  };
}

let result = processResponse(apiResponse);
console.log(result);

Example 2: Configuration Handler

JAVASCRIPT

function initializeApp(config) {
  // Destructure with defaults
  let {
    server: {
      host = "localhost",
      port = 3000,
      ssl = false
    } = {},
    database: {
      type = "mongodb",
      host: dbHost = "localhost",
      name: dbName = "myapp"
    } = {},
    features: {
      auth = true,
      logging = true,
      cache = false
    } = {},
    ...otherSettings
  } = config;
  
  return {
    serverUrl: `${ssl ? 'https' : 'http'}://${host}:${port}`,
    databaseUrl: `${type}://${dbHost}/${dbName}`,
    enabledFeatures: {
      auth,
      logging,
      cache
    },
    additionalSettings: otherSettings
  };
}

// Minimal config
let minimalConfig = {
  server: { host: "example.com" }
};

console.log(initializeApp(minimalConfig));

// Full config
let fullConfig = {
  server: { host: "example.com", port: 8080, ssl: true },
  database: { type: "postgres", name: "production_db" },
  features: { auth: true, logging: true, cache: true },
  environment: "production",
  region: "us-east-1"
};

console.log(initializeApp(fullConfig));

Object Destructuring Practice

Experiment with object destructuring patterns

// Interactive Object Destructuring Practice

console.log("=== Basic Destructuring ===");

let person = {
  name: "Alice",
  age: 25,
  email: "alice@test.com"
};

let { name, age, email } = person;
console.log(name, age, email);

console.log("\n=== Renaming Variables ===");

let product = {
  name: "Laptop",
  price: 1000
};

let { name: productName, price } = product;
console.log("Product:", productName);
console.log("Price:", price);

console.log("\n=== Default Values ===");

let user = {
  username: "bob",
  age: 30
};

console.log("\n=== Nested Destructuring ===");

let employee = {
  name: "Charlie",
  position: "Developer",
  address: {
    city: "NYC",
    country: "USA"
  },
  contact: {
    email: "charlie@test.com",
    phone: "555-0123"
  }
};

let {
  name: employeeName,
  address: { city, country },
  contact: { email: employeeEmail }
} = employee;

console.log("Name:", employeeName);
console.log("Location:", city, country);
console.log("Email:", employeeEmail);

console.log("\n=== Rest Operator ===");

let config = {
  host: "localhost",
  port: 3000,
  database: "mydb",
  ssl: true,
  timeout: 5000,
  retry: 3
};

let { host, port, database, ...advanced } = config;
console.log("Basic:", { host, port, database });
console.log("Advanced:", advanced);

console.log("\n=== Function Parameters ===");

function greetUser({ name, age = 0, city = "Unknown" }) {
  return `Hello ${name}, age ${age}, from ${city}`;
}

console.log(greetUser({ name: "Alice", age: 25, city: "NYC" }));
console.log(greetUser({ name: "Bob" }));  // Uses defaults

console.log("\n=== Practical Example ===");

let {
  status,
  data: {
    title,
    author: { name: authorName },
    tags
  }
} = apiResponse;

console.log("Status:", status);
console.log("Title:", title);
console.log("Author:", authorName);
console.log("Tags:", tags.join(", "));

// Extract and format
function displayPost({
  data: {
    title,
    author: { name },
    tags = []
  }
}) {
  return `"${title}" by ${name} [${tags.join(", ")}]`;
}

console.log("\nFormatted:", displayPost(apiResponse));

Output:

Click "Run" to execute your code...

💡 Tip: Use console.log() to see your output in the console above.

Key Takeaways

Destructuring extracts properties: { name, age }
Order doesn't matter—matches by property name
Rename variables: { name: userName }
Provide defaults: { role = "user" }
Combine renaming and defaults: { name: userName = "Guest" }
Destructure nested objects by mirroring structure
Use rest operator to collect remaining properties: { a, ...rest }
Perfect for function parameters—cleaner and more flexible
Non-existent properties return undefined
Use = {} default for nested destructuring safety

What's Next?

💪 Practice Challenge:

Before moving on, try creating:

A function that uses destructuring to format user data for display
Extract nested API response data with defaults for missing fields
Use destructuring with rest operator to separate required from optional config
Create a function that destructures and validates form data
Build a configuration merger that uses destructuring and defaults

Test Your Understanding

Question 1 / 4

What does object destructuring do?

Score: 0 / 0

What Is Object Destructuring?

Without Destructuring

With Destructuring

Basic Destructuring

Simple Extraction

Order Doesn't Matter

Extracting Specific Properties

Renaming Variables

When to Rename

Default Values

Combining Renaming and Default Values

Nested Destructuring

Deep Nesting

Nested Destructuring with Defaults

Rest Operator in Destructuring

Rest Must Be Last

Destructuring in Function Parameters

Nested Destructuring in Parameters

Rest in Function Parameters

Practical Examples

Example 1: API Response Handling

Example 2: Configuration Handler

Object Destructuring Practice

Key Takeaways

What's Next?

Test Your Understanding

What does object destructuring do?

Mastering JavaScript object destructuring! 📦

Continue Learning JavaScript

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

JavaScript Tutorials

Object Destructuring

What Is Object Destructuring?

Without Destructuring

With Destructuring

Basic Destructuring

Simple Extraction

Order Doesn't Matter

Extracting Specific Properties

Renaming Variables

When to Rename

Default Values

Combining Renaming and Default Values

Nested Destructuring

Deep Nesting

Nested Destructuring with Defaults

Rest Operator in Destructuring

Rest Must Be Last

Destructuring in Function Parameters

Nested Destructuring in Parameters

Rest in Function Parameters

Practical Examples

Example 1: API Response Handling

Example 2: Configuration Handler

Object Destructuring Practice

Key Takeaways

What's Next?

Test Your Understanding

What does object destructuring do?

Mastering JavaScript object destructuring! 📦

Continue Learning JavaScript

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

JavaScript Tutorials