🔍 Mastering JavaScript Object Properties: Dot Notation vs. Bracket Notation (With Emojis, Digits and More!)

You’ve probably used this:

myObject.name = "Ken";

That’s dot notation — the simplest way to access object properties. But here’s the thing:

❌ It only works for valid identifiers (letters, numbers, _, $). ❌ It can’t handle spaces, emojis, or special characters.

Say you try this:

myObject.special property ☺ = 'Oops!';

You’ll get a syntax error. Why? That property name has a space and an emoji.

Here’s the fix:

myObject['special property ☺'] = 'It works!';
console.log(myObject['special property ☺']); // Output: 'It works!'

Bracket notation accepts any string, making it perfect for:

You can do:

myObject[123] = 'hi!';

JavaScript converts the number 123 to the string '123', so this works:

console.log(myObject['123']); // hi!
console.log(myObject[123]);   // hi!

You can even use expressions:

myObject['12' + '3'];   // hi!
myObject[120 + 3];      // hi!
myObject[123.0];        // hi!

⚠️ Avoid leading zeros in number keys:

myObject[0123]; // Might behave strangely (octal!)

Dot Notation → For normal names like name, age, user_1.
Bracket Notation → For:
- Special characters (['hello world!'])
- Emojis (['💻'])
- All-digit names ([123])
- Dynamic expressions (['key' + 1])

Use dot notation for clean, predictable keys. Use bracket notation when things get fancy, weird, or dynamic.

Here are 3 review questions you can add at the end of your post:

📝 Review Questions

Why can’t you use dot notation to access a property like myObject["user name"]? (Hint: Think about valid identifiers.)

What will the following code output?

const obj = {};
obj[456] = 'Hello!';
console.log(obj['456']);

(Explain why.)

When should you choose bracket notation over dot notation in JavaScript? (List at least two cases.)