JavaScript Dot Notation and Bracket Notation

JavaScript objects store related information using properties and values. To access these properties, JavaScript provides two common techniques: dot notation and bracket notation.

Both techniques allow you to read object properties, but they work differently. Dot notation is straightforward when you know the property name, while bracket notation is useful when property names contain spaces or are stored in variables.

In this tutorial, you will learn how both notations work, when to use each one, and how to avoid common mistakes.

What Is Dot Notation in JavaScript?

Dot notation is a way to access an object property by placing a dot (.) between the object name 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

Here, student.name accesses the name property, student.age accesses the age property, and student.course accesses the course property.

If you are learning objects for the first time, start with creating JavaScript objects to understand how properties are defined.

Rules for Using Dot Notation

Dot notation is simple to use, but the property name must be a valid identifier.

Consider the following example:

const employee = {
    firstName: "Anjali",
    salary: 30000,
    department: "IT"
};

console.log(employee.firstName);
console.log(employee.salary);
console.log(employee.department);

Output:

Anjali
30000
IT

You do not need quotation marks around a property name when using dot notation.

The following property names work with dot notation:

• name
• firstName
• age
• totalPrice
• _id

However, dot notation cannot directly access property names containing spaces or other characters that are not allowed in JavaScript identifiers.

For example:

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

console.log(student.name);

Output:

Rahul

To access "favorite subject", you must use bracket notation.

What Is Bracket Notation in JavaScript?

Bracket notation accesses an object property by placing the property name or an expression inside square brackets ([]).

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

Bracket notation can access the same properties as dot notation. Its main advantage is that it supports property names that are not valid identifiers and property names determined at runtime.

Accessing Properties With Spaces

Bracket notation is required when a property name contains spaces.

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

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

Output:

JavaScript
Hyderabad

The property name must be written as a string inside the brackets.

This is one of the main situations where bracket notation is more useful than dot notation.

Using Variables With Bracket Notation

One of the most important features of bracket notation is that it allows you to access properties dynamically using variables.

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

const propertyName = "course";

console.log(student[propertyName]);

Output:

JavaScript

JavaScript evaluates propertyName, gets the string "course", and uses it to access the corresponding property.

Compare that with dot notation:

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

const propertyName = "age";

console.log(student.propertyName);
console.log(student[propertyName]);

Output:

undefined
21

student.propertyName looks for a property literally named propertyName. Meanwhile, student[propertyName] looks for the property whose name is stored in the variable, which is age.

This is particularly useful when working with user input, form fields, and dynamic application data.

Using Expressions With Bracket Notation

Bracket notation can use expressions that evaluate to property names.

const scores = {
    score1: 80,
    score2: 90,
    score3: 95
};

const number = 2;

console.log(scores["score" + number]);

Output:

90

The expression "score" + number evaluates to "score2". JavaScript then accesses the score2 property.

This technique is helpful when property names follow a predictable pattern.

Accessing Nested Objects

Both dot notation and bracket notation can access nested 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 both notations in the same expression.

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

Output:

Hyderabad
Telangana

Choose the notation that makes your code easiest to understand. When working with nested arrays and objects, remember that each level must exist before you access a deeper property.

Accessing Object Methods

Methods are functions stored as object properties. You can use either notation to call a method.

const user = {
    name: "Rahul",

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

console.log(user.greet());
console.log(user["greet"]());

Output:

Hello, Rahul
Hello, Rahul

Both expressions call the same method. The parentheses () execute the function.

Learn more about functions in the JavaScript functions tutorial.

Adding and Updating Properties

You can use both dot notation and bracket notation to add new properties or update existing ones.

const product = {
    name: "Laptop",
    price: 50000
};

// Update an existing property
product.price = 45000;

// Add a new property using bracket notation
product["brand"] = "Dell";

console.log(product);

Output:

{
    name: 'Laptop',
    price: 45000,
    brand: 'Dell'
}

Dot notation and bracket notation can both modify objects. The difference is how the property name is specified.

For more information about the values stored in objects, explore JavaScript data types.

Difference Between Dot Notation and Bracket Notation

Feature	Dot Notation	Bracket Notation
Syntax	student.name	student["name"]
Known property names	Supported	Supported
Property names with spaces	Not supported directly	Supported
Dynamic property names	Not supported directly	Supported
Variables as property names	Not supported directly	Supported
Expressions as property names	Not supported directly	Supported
Readability	Usually simpler	More flexible

When Should You Use Dot Notation?

Use dot notation when the property name is known and is a valid identifier.

const car = {
    brand: "Toyota",
    model: "Corolla"
};

console.log(car.brand);
console.log(car.model);

Dot notation is generally the clearest option for ordinary property access.

When Should You Use Bracket Notation?

Use bracket notation when the property name contains spaces, is stored in a variable, or is calculated from an expression.

const product = {
    name: "Laptop",
    price: 50000,
    "stock status": "Available"
};

const selectedProperty = "price";

console.log(product[selectedProperty]);
console.log(product["stock status"]);

Output:

50000
Available

Bracket notation is especially useful when property names are determined dynamically.

Common Mistakes to Avoid

Using a Variable With Dot Notation

Incorrect for dynamic access:

const property = "name";
console.log(student.property);

Correct:

console.log(student[property]);

Using Dot Notation for Property Names With Spaces

Incorrect:

console.log(student.favorite subject);

Correct:

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

Forgetting Quotes Around a String Property Name

Incorrect:

console.log(student[name]);

If name is not a defined variable, this may throw a ReferenceError.

Correct:

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

When using a variable, however, do not add quotes around the variable itself:

const property = "name";

console.log(student[property]);

Accessing a Missing Nested Property

Accessing a deeper property when an intermediate value is undefined or null can throw a TypeError.

You can use optional chaining when a nested property may not exist:

const student = {};

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

Output:

undefined

Optional chaining prevents this particular error by stopping the access when student.address is undefined or null.

Frequently Asked Questions

Can dot notation and bracket notation access the same property?

Yes. Both student.name and student["name"] access the name property.

Which notation is better for beginners?

Dot notation is usually easier to read when the property name is known. Bracket notation is useful for dynamic property access and property names containing spaces.

Why does student.propertyName return undefined?

It returns undefined if the object does not contain a property literally named propertyName. To use a variable’s value as the property name, write student[propertyName].

Can bracket notation use numbers?

Yes. JavaScript converts numeric property keys to strings for ordinary objects.

const data = {
    1: "First",
    2: "Second"
};

console.log(data[1]);

Output:

First

Can I use both notations in the same expression?

Yes. You can combine them when accessing nested objects, such as student.address["city"].

Does changing a property create a new object?

No. Assigning a property on an existing mutable object changes that object. It does not automatically create a separate object.

What to Learn Next

Continue learning JavaScript objects by exploring adding, updating, and deleting object properties, followed by object methods and the this keyword. These concepts will help you work with object data in practical JavaScript applications.