Dot notation vs bracket notation

Both read a property off an object. Dot notation needs the name written literally; bracket notation takes an expression that evaluates to the name.

const user = { name: "Mai", "favourite colour": "blue" };

user.name;                  // dot — name is a literal identifier
user["favourite colour"];   // bracket — required, the key has a space

When only brackets work

• The key is not a valid identifier: spaces, hyphens, or a leading digit.
• The key is in a variable — this is the common case:

const field = "name";
user.field;      // undefined — looks for a property literally called "field"
user[field];     // "Mai"

• The key is computed: data["item_" + id], or you are looping with Object.keys().
• The key is a Symbol.

When to prefer dots

Everything else. It is shorter, and because the name is static, editors and TypeScript can autocomplete it and catch typos. user["nmae"] is silently undefined; with a typed object, user.nmae is an error at compile time.

Two things worth knowing

Numeric-looking keys are coerced to strings, so obj[1] and obj["1"] are the same property. That is why array indices are really string keys underneath.

And optional chaining works with both, which is the safe way to reach into data you did not create:

response?.data?.items?.[0]?.name;

Note the ?. before the bracket — items?.[0], not items[0].

A security note

Never build a bracket key from unvalidated user input on an object you did not create with Object.create(null). Keys like __proto__ can reach the prototype chain, which is the basis of prototype-pollution bugs. Use a Map when keys come from outside.