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

1const user = { name: 'John', age: 30 };
2
3user.name; // "John"
4user.age; // 30

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

Bracket notation

1const user = { name: 'John', age: 30 };
2
3user['name']; // "John"
4user['age']; // 30

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

When you need bracket notation

Dynamic property names (variable):

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

Property names with special characters:

1const obj = { 'first-name': 'John', 'last name': 'Doe' };
2obj['first-name']; // "John"
3obj['last name']; // "Doe"
4// obj.first-name — SyntaxError
5// obj.last name — SyntaxError

Numeric property names:

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

Computed property names in object literals:

1const field = 'email';
2const user = {
3  [field]: 'john@example.com', // bracket notation in object literal
4};
5user.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.