Accessing JavaScript Object Properties Using Dot Notation

JavaScript objects store related information as properties and can also contain methods that perform actions. To work with an object’s data, you need to know how to access its properties.

Dot notation is one of the most common ways to access object properties in JavaScript. It uses a dot (.) between the object name and the property name.

In this tutorial, you will learn how dot notation works, how to access different property values, and what happens when a property does not exist.

What Is Dot Notation in JavaScript?

Dot notation is a way to access an object’s property by writing the object name, followed by a dot and the property name.

The syntax is:

objectName.propertyName;

For example:

const student = {
    name: "Rahul",
    age: 21,
    course: "JavaScript"
};

console.log(student.name);
console.log(student.age);
console.log(student.course);

Output:

Rahul
21
JavaScript

In this example, student.name accesses the name property, student.age accesses the age property, and student.course accesses the course property.

If you are new to objects, start with creating JavaScript objects to understand how object properties are defined.

How to Access Object Properties Using Dot Notation

You can use dot notation to access any existing property whose name is a valid identifier.

Accessing String Properties

String properties store text values.

const person = {
    firstName: "Anjali",
    lastName: "Sharma",
    city: "Hyderabad"
};

console.log(person.firstName);
console.log(person.lastName);
console.log(person.city);

Output:

Anjali
Sharma
Hyderabad

Each expression returns the value stored in the specified property.

Accessing Number Properties

Number properties store numeric values, such as age, price, or quantity.

const product = {
    name: "Laptop",
    price: 55000,
    quantity: 2
};

console.log(product.price);
console.log(product.quantity);

Output:

55000
2

You can also use these values in calculations.

const product = {
    price: 55000,
    quantity: 2
};

const totalPrice = product.price * product.quantity;

console.log(totalPrice);

Output:

110000

This example accesses two object properties and multiplies their values.

Accessing Boolean Properties

Boolean properties contain either true or false.

const user = {
    name: "Rahul",
    isLoggedIn: true,
    isAdmin: false
};

console.log(user.isLoggedIn);
console.log(user.isAdmin);

Output:

true
false

Boolean properties are often used to represent states, such as whether a user is logged in or whether a product is available.

Accessing Nested Object Properties

An object can contain another object as a property. This is called a nested object.

You can access nested properties by chaining dot notation.

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

Here, student.address accesses the nested object, while student.address.city accesses the city property inside it.

You can use the same approach for objects with multiple nesting levels.

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

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

Output:

anjali@example.com

When working with nested data, make sure each intermediate property exists before accessing a deeper property. Otherwise, JavaScript may throw a TypeError.

Accessing Object Methods Using Dot Notation

Dot notation can also access methods because methods are functions stored as object properties. Add parentheses () to call the method.

const user = {
    name: "Rahul",

    greet() {
        return "Hello, " + this.name;
    }
};

console.log(user.greet());

Output:

Hello, Rahul

In this example, user.greet refers to the method, while user.greet() executes it.

You can learn more about defining and using functions in the JavaScript functions tutorial.

What Happens When a Property Does Not Exist?

If you access a property that does not exist on an object, JavaScript normally returns undefined.

const student = {
    name: "Rahul",
    age: 21
};

console.log(student.name);
console.log(student.course);

Output:

Rahul
undefined

The name property exists, so JavaScript returns "Rahul". The course property does not exist, so JavaScript returns undefined.

You can check whether a property exists before using it.

const student = {
    name: "Rahul",
    age: 21
};

if ("course" in student) {
    console.log(student.course);
} else {
    console.log("Course property does not exist.");
}

Output:

Course property does not exist.

The in operator checks whether a property exists on the object or anywhere in its prototype chain.

Can Dot Notation Access Property Names With Spaces?

No. Dot notation cannot directly access property names that contain spaces or other characters that are not valid in identifier names.

For example:

const student = {
    name: "Rahul",
    "favorite subject": "JavaScript"
};

console.log(student.name);

To access "favorite subject", use bracket notation:

console.log(student["favorite subject"]);

Output:

JavaScript

Dot notation is suitable for property names such as name, age, and firstName. Bracket notation is needed for names such as "favorite subject" or when the property name is stored in a variable.

Read about JavaScript data types to understand the different kinds of values that object properties can store.

Dot Notation vs. Bracket Notation

JavaScript supports both dot notation and bracket notation for accessing object properties.

Feature	Dot Notation	Bracket Notation
Syntax	student.name	student["name"]
Property name	Written directly after the dot	Written inside brackets
Dynamic property names	Not supported directly	Supported
Property names with spaces	Not supported directly	Supported
Ease of reading	Usually simpler	Useful for flexible access

Consider this example:

const student = {
    name: "Rahul",
    age: 21
};

const property = "age";

console.log(student.name);
console.log(student[property]);

Output:

Rahul
21

Use dot notation when you know the property name. Use bracket notation when you need to access a property dynamically.

Common Mistakes When Using Dot Notation

Using Quotes Around a Dot-Notation Property

Incorrect:

console.log(student."name");

Correct:

console.log(student.name);

Do not place quotation marks around the property name when using dot notation.

Using Parentheses Instead of a Dot

Incorrect:

console.log(student(name));

Correct:

console.log(student.name);

Parentheses are used to call functions, not to access ordinary object properties.

Accessing a Property on an Undefined Value

Consider this example:

const student = {};

console.log(student.address.city);

This throws a TypeError because student.address is undefined, and JavaScript cannot access city on an undefined value.

You can use optional chaining to avoid this error when a nested property might be missing.

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

Output:

undefined

Optional chaining (?.) stops the property access and returns undefined if the value immediately before it is null or undefined.

Practical Example of Dot Notation

The following example combines several properties in a product object.

const product = {
    name: "Wireless Mouse",
    price: 799,
    brand: "Logitech",
    inStock: true
};

console.log("Product: " + product.name);
console.log("Price: ₹" + product.price);
console.log("Brand: " + product.brand);
console.log("Available: " + product.inStock);

Output:

Product: Wireless Mouse
Price: ₹799
Brand: Logitech
Available: true

This approach is useful in e-commerce applications, dashboards, and other JavaScript projects where information is stored in objects.

Frequently Asked Questions

What is dot notation in JavaScript?

Dot notation is a way to access an object’s property using the syntax objectName.propertyName.

How do you access an object property in JavaScript?

Write the object name, a dot, and the property name. For example, student.name returns the value of the name property.

Can dot notation access nested object properties?

Yes. You can chain property names, such as student.address.city, to access a property inside a nested object.

What happens if a property does not exist?

JavaScript normally returns undefined when you access a missing property on an existing object.

Can dot notation access a property stored in a variable?

Not directly. Use bracket notation, such as student[propertyName], when the property name is stored in a variable.

Can dot notation be used to call object methods?

Yes. Use the object name, a dot, the method name, and parentheses. For example, user.greet() calls the greet method.

Is dot notation better than bracket notation?

Dot notation is usually easier to read when the property name is known and is a valid identifier. Bracket notation is necessary for dynamic property names and names containing spaces.

What to Learn Next

After learning how to access object properties with dot notation, continue with JavaScript bracket notation to learn how to access properties dynamically and work with property names that contain spaces.