Skip to content

How to access object inside object in JavaScript

  • by

In JavaScript, you can access an object inside another object using dot notation or bracket notation. Dot notation involves chaining the property names together with dots, while bracket notation involves passing the name of the property as a string inside square brackets.

You can also use variables to access properties using bracket notation.

Dot notation

Dot notation is the most common way to access nested objects. It uses a dot (.) to separate the names of the nested objects. For example, to access the name property of the address object inside the user object, you would use the following code:

const name = user.address.name;

Bracket notation

Bracket notation is less common than dot notation, but it can be useful when you need to access a nested object by its index. For example, to access the second element of the addresses array inside the user object, you would use the following code:

const address = user.addresses[1];

Access object inside the object in JavaScript example

Simple example code.

const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'New York',
    state: 'NY'
  }
};

console.log(person.name); 
console.log(person['age']);
console.log(person.address['street']); 
console.log(person['address'].city); 
console.log(person['address']['state']); 

Output:

How to access object inside object in JavaScript

Also note that when using bracket notation, you can use variables to access properties dynamically, like this:

const property = 'name';
console.log(person[property]); // Output: John

Both dot notation and bracket notation are valid ways to access an object inside another object in JavaScript. Here is a comparison of the two notations:

Dot notationBracket notation
Uses a dot (.) to access a property of an objectUses square brackets [] to access a property of an object
Property names must be valid identifiers, i.e. they can’t contain spaces or special charactersProperty names can be any string, enclosed in quotes
Properties can’t start with a numberProperties can start with a number
Properties are case-sensitiveProperties are case-sensitive
Easier to read and write for simple propertiesCan be more flexible for dynamic properties or properties with special characters
Can’t be used to access properties with special characters or reserved words, such as “class” or “if”Can be used to access any property of an object

Do comment if you have any doubts or suggestions on this JS object topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading