DEV Community

Kush Bhandari
Kush Bhandari

Posted on

Understanding Object Keys in JavaScript (Interview Trap Question)

I was recently asked an interesting JavaScript question in an interview:

let obj = {};
let a = { a: 10 };
let b = { b: 20 };

obj[a] = 10;
obj[b] = 20;

console.log(obj[a]);
Enter fullscreen mode Exit fullscreen mode

πŸ€” What will be the output?

πŸ‘‰ Output: 20

πŸ” Why does this happen?

In JavaScript, object keys can only be of type string or symbol.

When you use an object as a key:

obj[a] = 10;
Enter fullscreen mode Exit fullscreen mode

JavaScript internally converts the key to a string using .toString():

a.toString() // "[object Object]"
b.toString() // "[object Object]"
Enter fullscreen mode Exit fullscreen mode

So effectively, your code becomes:

obj["[object Object]"] = 10;
obj["[object Object]"] = 20;
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ The second assignment overwrites the first one.

So:

console.log(obj[a]); // 20
Enter fullscreen mode Exit fullscreen mode

πŸ“Œ Follow-up Question 1: How to fix this issue?

βœ… Option 1: Use Map (Recommended)

If you want to use objects as keys, use Map:

const map = new Map();

map.set(a, 10);
map.set(b, 20);

console.log(map.get(a)); // 10
console.log(map.get(b)); // 20
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Map preserves reference identity, so a and b are treated as different keys.


⚠️ Option 2: Convert keys to unique strings (Not ideal)

let obj = {};

let a = JSON.stringify({ a: 10 });
let b = JSON.stringify({ b: 20 });

obj[a] = 10;
obj[b] = 20;

console.log(obj[a]); // 10
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ This works, but:

  • It’s fragile
  • Depends on consistent serialization
  • Not suitable for complex objects

⚠️ Option 3: Use Symbol

let obj = {};

let a = Symbol("a");
let b = Symbol("b");

obj[a] = 10;
obj[b] = 20;

console.log(obj[a]); // 10
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Symbols are always unique:

Symbol("a") === Symbol("a") // false
Enter fullscreen mode Exit fullscreen mode

πŸ“Œ Follow-up Question 2: What is the data type of object keys?

In JavaScript:

  • Object keys are always:

    • string
    • symbol

Even if you use:

obj[1] = "value";
obj[true] = "value";
obj[null] = "value";
Enter fullscreen mode Exit fullscreen mode

They are converted to strings:

obj["1"]
obj["true"]
obj["null"]
Enter fullscreen mode Exit fullscreen mode

πŸš€ When should you use Map instead of Object?

Use Map when:

  • Keys are objects or functions
  • You need preserved insertion order
  • You want better performance for frequent add/remove
  • You need strict key equality (no coercion)

⚑ Bonus: Key Differences (Object vs Map)

Feature Object Map
Key Types String, Symbol Any type
Key Conversion Yes (to string) No
Order Guarantee Not reliable Preserved
Performance Good Better for dynamic use
Iteration Limited Built-in methods

🧠 Final Takeaway

  • Objects coerce keys to strings, which can cause collisions.
  • This is why both a and b became "[object Object]".
  • To safely use non-string keys, always prefer Map.

This is a classic interview question designed to test:

  • JavaScript coercion rules
  • Object internals
  • Practical knowledge of Map

Top comments (0)