JavaScript Nested Objects

by

JavaScript objects allow you to store related information using properties and values. Sometimes, an object needs to contain more complex information, such as a student’s address, an employee’s contact details, or a product’s specifications.

In these situations, you can create a nested object. A nested object is an object stored as a property inside another object.

In this tutorial, you will learn how nested objects work, how to create and access them, how to update their properties, and how to handle missing nested properties.

What Is a Nested Object in JavaScript?

A nested object is an object that exists inside another object as a property value.

For example, a student may have a name, age, and address. The address itself can contain a city, state, and country.

const student = {
    name: "Rahul",
    age: 21,
    address: {
        city: "Hyderabad",
        state: "Telangana",
        country: "India"
    }
};

console.log(student);

Output:

{
    name: "Rahul",
    age: 21,
    address: {
        city: "Hyderabad",
        state: "Telangana",
        country: "India"
    }
}

In this example, student is the outer object, and address is a nested object.

The address property contains another object with three properties: city, state, and country.

If you are new to objects, first learn how to create JavaScript objects.

How to Create Nested Objects

You can create a nested object by assigning an object as the value of another object’s property.

Creating a Simple Nested Object

const employee = {
    name: "Anjali",
    department: "IT",
    contact: {
        email: "anjali@example.com",
        phone: "9876543210"
    }
};

console.log(employee);

Output:

{
    name: "Anjali",
    department: "IT",
    contact: {
        email: "anjali@example.com",
        phone: "9876543210"
    }
}

Here, employee contains three properties: name, department, and contact. The contact property stores another object.

Nested objects help organize related information into meaningful groups rather than placing every property at the same level.

Creating Multiple Nested Objects

An object can contain multiple nested objects.

const employee = {
    name: "Anjali",

    address: {
        city: "Hyderabad",
        state: "Telangana"
    },

    job: {
        title: "Software Developer",
        salary: 45000
    }
};

console.log(employee.address.city);
console.log(employee.job.title);

Output:

Hyderabad
Software Developer

The address and job properties each contain a separate nested object.

This structure is useful when different groups of information belong to the same employee.

How to Access Nested Object Properties

You can access nested properties using dot notation or bracket notation.

Accessing Properties Using Dot Notation

Dot notation uses a dot between each property name.

const student = {
    name: "Rahul",
    address: {
        city: "Hyderabad",
        state: "Telangana"
    }
};

console.log(student.name);
console.log(student.address.city);
console.log(student.address.state);

Output:

Rahul
Hyderabad
Telangana

The expression student.address.city works in the following order:

  • student accesses the outer object.
  • address accesses the nested object.
  • city accesses the property inside that nested object.

For more examples, see JavaScript dot notation.

Accessing Properties Using Bracket Notation

Bracket notation uses square brackets to access object properties.

const student = {
    name: "Rahul",
    address: {
        city: "Hyderabad",
        state: "Telangana"
    }
};

console.log(student["address"]["city"]);
console.log(student["address"]["state"]);

Output:

Hyderabad
Telangana

You can also combine dot notation and bracket notation.

console.log(student.address["city"]);
console.log(student["address"].state);

Output:

Hyderabad
Telangana

Bracket notation is especially useful when a property name contains spaces or is stored in a variable. Learn more in the JavaScript bracket notation tutorial.

Accessing Deeply Nested Objects

An object can contain another object, which can contain yet another object. This creates multiple levels of nesting.

const company = {
    name: "Tech Solutions",

    employee: {
        name: "Anjali",

        contact: {
            email: "anjali@example.com",

            address: {
                city: "Hyderabad",
                country: "India"
            }
        }
    }
};

console.log(company.employee.contact.email);
console.log(company.employee.contact.address.city);

Output:

anjali@example.com
Hyderabad

In this example, company.employee.contact.address.city accesses the city property through several levels of nested objects.

Although deep nesting is possible, avoid making objects unnecessarily complicated. Clear structures are easier to understand and maintain.

How to Add Properties to Nested Objects

You can add a new property to a nested object using dot notation or bracket notation.

const student = {
    name: "Rahul",
    address: {
        city: "Hyderabad"
    }
};

student.address.state = "Telangana";
student.address.country = "India";

console.log(student.address);

Output:

{
    city: "Hyderabad",
    state: "Telangana",
    country: "India"
}

The new properties are added to the nested address object, not to the outer student object.

You can also add a new nested object to an existing object.

const student = {
    name: "Rahul"
};

student.contact = {
    email: "rahul@example.com",
    phone: "9876543210"
};

console.log(student.contact.email);

Output:

rahul@example.com

How to Update Nested Object Properties

To update a nested property, access it through the object hierarchy and assign a new value.

const student = {
    name: "Rahul",
    address: {
        city: "Hyderabad",
        state: "Andhra Pradesh"
    }
};

student.address.state = "Telangana";

console.log(student.address.state);

Output:

Telangana

The state property is updated inside the nested address object.

You can also update properties at deeper levels.

const company = {
    employee: {
        name: "Anjali",
        contact: {
            email: "old@example.com"
        }
    }
};

company.employee.contact.email = "new@example.com";

console.log(company.employee.contact.email);

Output:

new@example.com

For more details about changing object data, see the tutorial on JavaScript object properties.

How to Delete Nested Object Properties

Use the delete operator to remove a property from a nested object.

const student = {
    name: "Rahul",
    address: {
        city: "Hyderabad",
        state: "Telangana",
        country: "India"
    }
};

delete student.address.state;

console.log(student.address);

Output:

{
    city: "Hyderabad",
    country: "India"
}

Only the state property is deleted. The other properties remain unchanged.

You can also delete an entire nested object property.

const student = {
    name: "Rahul",
    address: {
        city: "Hyderabad",
        state: "Telangana"
    }
};

delete student.address;

console.log(student);

Output:

{
    name: "Rahul"
}

After deleting address, the nested object is no longer accessible through student.address.

Using Optional Chaining With Nested Objects

Sometimes, a nested property may not exist. Trying to access a property through an undefined or null value can cause a TypeError.

Consider this example:

const student = {
    name: "Rahul"
};

console.log(student.address.city);

This code throws a TypeError because student.address is undefined.

You can use optional chaining (?.) to safely access a property when an intermediate value might be missing.

const student = {
    name: "Rahul"
};

console.log(student.address?.city);

Output:

undefined

Optional chaining stops the property access if the value immediately before ?. is null or undefined.

For deeply nested properties, you can use optional chaining at multiple levels.

const company = {
    employee: {
        name: "Anjali"
    }
};

console.log(company.employee.contact?.email);
console.log(company.employee.contact?.address?.city);

Output:

undefined
undefined

This makes optional chaining useful when working with data received from APIs, where some properties may be missing.

Nested Objects and Arrays

JavaScript objects can contain arrays, and arrays can contain objects. This structure is common when working with lists of users, products, or employees.

const company = {
    name: "Tech Solutions",

    employees: [
        {
            name: "Anjali",
            role: "Developer"
        },
        {
            name: "Rahul",
            role: "Data Analyst"
        }
    ]
};

console.log(company.employees[0].name);
console.log(company.employees[1].role);

Output:

Anjali
Data Analyst

The expression company.employees[0].name accesses the first employee object and then retrieves its name property.

If you need a refresher, read about JavaScript arrays and how arrays store multiple values.

Practical Example of Nested Objects

The following example shows how nested objects can be used to represent a product with pricing and manufacturer information.

const product = {
    name: "Laptop",

    specifications: {
        brand: "Dell",
        processor: "Intel Core i5",
        ram: "16GB"
    },

    pricing: {
        price: 55000,
        currency: "INR"
    }
};

console.log("Product:", product.name);
console.log("Brand:", product.specifications.brand);
console.log("Processor:", product.specifications.processor);
console.log("RAM:", product.specifications.ram);
console.log("Price:", product.pricing.price);
console.log("Currency:", product.pricing.currency);

Output:

Product: Laptop
Brand: Dell
Processor: Intel Core i5
RAM: 16GB
Price: 55000
Currency: INR

The product’s information is grouped into meaningful sections: specifications and pricing. This makes the object easier to read and manage.

Common Mistakes When Working With Nested Objects

Accessing a Property That Does Not Exist

If a property does not exist, JavaScript may return undefined. If you try to access another property through that undefined value, a TypeError can occur.

const user = {
    name: "Rahul"
};

console.log(user.address.city);

Use optional chaining when the nested property may be missing:

console.log(user.address?.city);

Confusing the Outer and Nested Objects

Consider this example:

const student = {
    name: "Rahul",
    address: {
        city: "Hyderabad"
    }
};

student.city = "Vijayawada";

console.log(student.city);
console.log(student.address.city);

Output:

Vijayawada
Hyderabad

The first assignment creates a new city property on the outer object. It does not update student.address.city.

To update the nested property, use:

student.address.city = "Vijayawada";

Modifying a Nested Object Through a Shared Reference

Objects are reference values. If two variables refer to the same nested object, changing that nested object through one reference is visible through the other.

const student = {
    name: "Rahul",
    address: {
        city: "Hyderabad"
    }
};

const addressReference = student.address;

addressReference.city = "Vijayawada";

console.log(student.address.city);

Output:

Vijayawada

The addressReference variable refers to the same object as student.address, so the change is visible through both references.

Frequently Asked Questions

What is a nested object in JavaScript?

A nested object is an object stored as a property inside another object. For example, an employee object may contain an address object with city and state properties.

How do you access a nested object property?

Use dot notation or bracket notation to follow the object hierarchy. For example, student.address.city accesses the city stored inside the student’s address object.

Can a JavaScript object contain multiple nested objects?

Yes. An object can contain multiple nested objects, each storing a different group of related information.

Can nested objects contain arrays?

Yes. Objects can contain arrays, and those arrays can contain other objects. This is common in API responses and application data.

How do you update a nested object property?

Use the full property path and assign a new value, such as student.address.city = "Vijayawada".

How do you delete a nested object property?

Use the delete operator with the nested property path, such as delete student.address.state.

How do you safely access a missing nested property?

Use optional chaining (?.), such as student.address?.city, to avoid a TypeError when an intermediate value is null or undefined.

What to Learn Next

After learning nested objects, continue with JavaScript object methods to understand how functions work inside objects and how the this keyword accesses an object’s properties.

1 thought on “JavaScript Nested Objects”

  1. Pingback: JavaScript Object Methods - Web4learners

Comments are closed.