Nested Objects in JavaScript

In this tutorial, you will learn what a nested object is, how to create one in JavaScript, and how to read its properties with destructuring assignment, dot notation, and bracket notation.

Create Nested Objects in JavaScript

A nested object is an object stored as a property of another object. That property can contain another object, an array, or both. For example, an employee record can group salary history and address details under their own properties. The quoted year keys below are strings, so bracket notation reads them.

const employeeInfo = {
  employeeName: 'John Doe',
  employeeId: 27,
  salary: {
    '2018-19': '400000 INR',
    '2019-20': '500000 INR',
    '2020-21': '650000 INR'
  },
  address: {
    locality: {
      address1: '1600 Pebble Road',
      address2: 'Nearby XYZ Bank'
    },
    city: 'Mumbai',
    state: 'Maharashtra',
    country: 'India'
  }
};

const { salary } = employeeInfo;
const { address: { locality } = {} } = employeeInfo;

console.log(salary['2020-21']);
console.log(locality.address1);
console.log(employeeInfo.address.city);
console.log(employeeInfo['address']['country']);
console.log(employeeInfo.contact?.email);

650000 INR
1600 Pebble Road
Mumbai
India
undefined

The first line reads the value for the '2020-21' salary key. The next three lines read address1, city, and country from progressively nested objects. The last line evaluates optional chaining on contact, which is not defined on this record, and prints undefined.

You can add further levels by assigning an object to a property, then placing the next related value inside it. Keep each level focused on a useful grouping: here, address groups location details and locality groups the street addresses. This structure also makes the path to a value visible in the code, such as employeeInfo.address.locality.address1.

Destructuring assignment copies selected properties into variables. In this example, salary refers to the salary object, while the nested pattern assigns the locality object to a variable with the same name. The default {} applies when address is undefined, so the extracted locality is then undefined. That default handles an absent address property; it does not protect against address being null, because JavaScript cannot read a nested property from null.

Use dot notation for property names that are valid JavaScript identifiers, as in employeeInfo.address.city. Bracket notation accepts a string or a variable as the key, so it works for names such as '2019-20' that cannot be written after a dot. A variable key is useful when the property to read is chosen at runtime: const year = '2020-21'; employeeInfo.salary[year]. Both forms can be chained to read deeper properties. See MDN’s documentation for destructuring assignment and property accessors.

Direct chaining such as employeeInfo.contact.email throws a TypeError when contact is undefined or null. Optional chaining (?.) stops when it reaches a nullish intermediate value and returns undefined, as shown by employeeInfo.contact?.email. Use it when an intermediate property may be absent; it does not create that property or supply a fallback. To display a fallback value instead, combine optional chaining with nullish coalescing, as in employeeInfo.contact?.email ?? 'No email provided'. This keeps the original record unchanged while giving the consuming code a value to display.