What is the difference between dot notation and bracket notation?

beginner

Re-explain

Dot notation reads a property whose name is a valid identifier, while bracket notation takes any string or a variable as the key.

Use dot notation, as in obj.name, whenever the key is fixed and a valid identifier. It is shorter and easier to read. Use bracket notation, as in obj["full name"], when the key has spaces or special characters. A key that starts with a digit needs it too.

Brackets also take an expression, so obj[key] reads whatever property the variable key names at runtime. That makes bracket notation the only choice for dynamic keys, such as when looping over property names.

const obj = { name: "John", "full name": "John Doe" };
obj.name;           // Dot notation
obj["full name"];   // Bracket notation
obj[variable];      // Dynamic access

Rewriting in plainer words…

This answer doesn't lend itself to a diagram - it reads best . No credits were charged.

Why there's no diagram: “”

The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓

The diagram below the answer is the concept . Jump to it ↓

Tailored explanation · switch back to · ·

What should the new diagram focus on?

Guided practice for JavaScript One question at a time. Answer out loud, get graded, see what you missed.

How well did you know this?

AI:

Saved in this browser - sign in to keep your review list.

How should your speech become text?

Listening… your words appear above as you speak - tap Stop when you're done.

Recording · cr - tap Stop & transcribe when you're done.

Transcribing with AI…

Voice:

Keep going - a few more words and AI can grade it.

Interview lens How interviewers actually use this question

Likely follow-ups

What does obj.key return when you meant the property named by the variable key? It reads a property literally named "key", usually undefined. A strong answer says obj[key] evaluates the variable first.
What happens to the key when you write obj[1] or obj[true]? Keys that aren't symbols become strings, so obj[1] and obj["1"] reach the same property. Array indices follow the same rule.
How do you read a property whose key is a Symbol? Only brackets work, as in obj[sym]. obj.sym looks up the string key "sym", which is a different property.
How do you use a variable as a key when creating an object literal? Computed property names, { [key]: value }, apply the bracket idea when the object is created. They arrived in ES2015.
How do you read obj.a[key] safely when obj.a might be undefined? Optional chaining works with brackets too. obj.a?.[key] returns undefined instead of throwing a TypeError.

What you can say

Both read a property, but dot notation only takes a fixed name that is a valid identifier, while bracket notation takes any string or an expression as the key.
When the key is known and simple, like obj.name, I use dot notation because it's shorter and easier to read.
I switch to brackets when the key has a space or a special character, like obj["full name"], or when it starts with a digit.
The bigger reason is dynamic keys. JavaScript evaluates whatever is inside the brackets, so obj[key] reads the property the variable key names at runtime.
That makes brackets the only option when you loop over property names and read each one.
Dot notation can't handle dynamic keys or odd names, and brackets are noisier to read, so I default to dots and use brackets only when the key forces it.

Weak answers to avoid

Says they are interchangeable They reach the same property, but only brackets handle dynamic keys or names with spaces. Say when each one is required, not just that both work.
Thinks obj.key reads the variable key Dot notation takes the name literally, so obj.key looks for a property called "key". Show that obj[key] evaluates the variable first.
Drops the quotes inside brackets obj[name] reads the variable name, not the key "name", and throws a ReferenceError if name isn't declared. Quote literal keys.
Only mentions spaces and special characters It misses dynamic keys, the most common reason to use brackets. Mention reading obj[key] while looping over property names.

Interview lens

Likely follow-ups, what you can say, and the weak answers to avoid.

Want a quick review of the fundamentals? See the JavaScript cheatsheet.

← Back to all JavaScript questions

Pro · $10/mo

110 of 126 JavaScript answers are in Pro.

Full answers, code samples, and AI explanations that go simpler or deeper. Cancel anytime.

Full answers + code
AI explanations, simpler or deeper
1,000 AI credits / month
Cancel anytime

Get Pro → See plans & pricing →