JS Objects Dot Notation vs Bracket Notation

Dot notation and bracket notation are two ways to access the same properties inside a JavaScript object. Neither is always better. The right choice depends on whether you know the property name ahead of time and what characters that name contains.

The Difference in One Table

The core rule is simple: if the property name is a fixed, valid JavaScript identifier, use dot notation. If it comes from a variable, contains special characters, or is computed at runtime, use bracket notation.

For a broader look at all the ways to read and update object properties, see the article on /javascript/accessing-object-properties-in-js-full-tutorial.

When Dot Notation Works (And When It Does Not)

Dot notation requires the property name to be a valid JavaScript identifier. That means no spaces, no dashes, no leading digits, and no special symbols other than the dollar sign and underscore:

javascript

const item = {
  name: "Widget",
  price: 19.99,
  "in-stock": true,
  "1yearWarranty": false,
  "$discount": 5
};

Dot notation works for valid identifiers like name, price, and $discount, since none of those keys contain a space, a dash, or a leading digit that would confuse the parser:

javascript

console.log(item.name);       // "Widget"
console.log(item.price);      // 19.99
console.log(item.$discount);  // 5

Properties with dashes or leading digits require bracket notation instead, because the dash would be parsed as subtraction and a leading digit would break the identifier entirely:

javascript

console.log(item["in-stock"]);       // true
console.log(item["1yearWarranty"]);  // false

Writing the dashed key with a dot would be parsed as subtraction instead of property access, since a dash between words always means subtraction outside of brackets. Writing the key that starts with a digit would be a syntax error, because identifiers can never start with a number.

When You Must Use Bracket Notation

Bracket notation is the only choice in these three situations:

1. The key is stored in a variable

javascript

const user = { name: "Riley", role: "admin" };
const selectedField = "role";
 
console.log(user[selectedField]); // "admin"
console.log(user.selectedField);  // undefined (looks for literal "selectedField")

This is the most common reason to use bracket notation. You cannot use a variable with dot notation because the text after the dot is always treated as a literal property name.

2. The key contains special characters

javascript

const data = {
  "created-at": "2026-01-15",
  "user id": 8802,
  "class": "premium"
};
 
console.log(data["created-at"]); // "2026-01-15"
console.log(data["user id"]);    // 8802

API responses and databases sometimes deliver keys with dashes, spaces, or reserved words like class. Bracket notation handles all of them.

3. The key is computed or dynamic

javascript

const scores = { round1: 85, round2: 92, round3: 78 };
 
for (let i = 1; i <= 3; i++) {
  console.log(scores["round" + i]);
}

The loop runs three times, and each pass builds a new key by joining the string "round" with the current loop count, so it prints one score per round:

text

85
92
78

Building a key from a string plus a loop variable, a concatenation, or a template literal all require bracket notation.

Where They Overlap

When the property name is a known string, both notations work:

javascript

const obj = { color: "red" };
 
console.log(obj.color);   // "red"
console.log(obj["color"]);// "red"

The result is identical. The only difference is style. Most teams default to dot notation for these cases because it is shorter and easier to scan. Some linters even enforce a preference.

Bracket notation with a string literal is useful mainly when teaching or when you want to make it visually obvious that the key is configurable.

Dynamic Property Access in Loops

Bracket notation really shows its value when iterating. You can use Object.keys() or for...in to loop through properties and access values dynamically. For more on iterating over objects, see the article on /javascript/looping-through-objects-in-javascript-complete-guide.

javascript

const settings = {
  theme: "dark",
  notifications: true,
  volume: 70
};
 
const keys = Object.keys(settings);
 
for (const key of keys) {
  console.log(key + ": " + settings[key]);
}

Object.keys() collects every property name into an array first, then the loop uses each name as a bracket key to read the matching value:

text

theme: dark
notifications: true
volume: 70

Inside the loop, key holds each property name as a string. Only bracket notation can use that variable to look up the value. Dot notation would look for a literal property called key on every iteration, which does not exist.

Common Mistake: Mixing the Wrong Notation with Variables

This is one of the most common bugs when learning objects:

javascript

const field = "username";
const account = { username: "alex99" };
 
// Wrong: dot notation with a variable
console.log(account.field);  // undefined
 
// Correct: bracket notation with a variable
console.log(account[field]); // "alex99"

Dot notation tries to read a property literally named field, which does not exist on account. Bracket notation evaluates the variable field to the string username, then accesses the correct property.

Which Style Do Most Codebases Prefer?

In practice, dot notation is the default. Most JavaScript style guides and linter rules say: use dot notation unless you have a reason to use bracket notation.

Good reasons to use bracket notation:

• The key is in a variable
• The key contains a dash, space, or special character
• The key is a reserved word like class or import
• The key is computed at runtime

Bad reasons to use bracket notation everywhere:

• "I want to be consistent" (dot notation is clearer for static names)
• "Bracket notation feels more powerful" (powerful is not the same as readable)

The Performance Question

You do not need to worry about performance here. Dot notation is marginally faster because the engine can resolve the property at parse time instead of runtime, but the difference is measured in nanoseconds. Code clarity matters far more.

javascript

// Both are fine. Dot notation is cleaner, not meaningfully faster.
console.log(data.name);
console.log(data["name"]);

Choose the notation that makes your intent clearest. If you find yourself writing the bracket form when you know the property name never changes, switch to the dot form instead.