What is the difference between dot notation and bracket notation?

The short answer

Both access object properties. Dot notation (obj.name) is cleaner and more common. Bracket notation (obj['name']) is needed when the property name is dynamic (stored in a variable), contains special characters, or is a number. Use dot notation by default and bracket notation when you have to.

Dot notation

Copy
const user = { name: 'John', age: 30 };
user.name; // "John"
user.age; // 30

Simple, clean, and the most common way to access properties.

Bracket notation

Copy
const user = { name: 'John', age: 30 };
user['name']; // "John"
user['age']; // 30

Same result, but you pass the property name as a string.

When you need bracket notation

Dynamic property names (variable):

Copy
const key = 'name';
user[key]; // "John"
user.key; // undefined — looks for a property literally called "key"

Property names with special characters:

Copy
const obj = { 'first-name': 'John', 'last name': 'Doe' };
obj['first-name']; // "John"
obj['last name']; // "Doe"
// obj.first-name — SyntaxError
// obj.last name — SyntaxError

Numeric property names:

Copy
const arr = { 0: 'first', 1: 'second' };
arr[0]; // "first"
// arr.0 — SyntaxError

Computed property names in object literals:

Copy
const field = 'email';
const user = {
  [field]: 'john@example.com', // bracket notation in object literal
};
user.email; // "john@example.com"

Why interviewers ask this

This is a fundamental JavaScript question. Interviewers ask it to see if you know when each is appropriate, especially the dynamic property access use case which comes up in real code all the time.