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

const user = { name: 'John', age: 30 };

user.name; // "John"
user.age; // 30

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

Bracket notation

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):

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

Property names with special characters:

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:

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

Computed property names in object literals:

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.