JavaScript Tricky Questions You Must Master for Your Next Interview!
JavaScript may look friendly, but under the hood, it's full of quirks that even experienced developers get stumped by! Whether you're prepping for your next big tech interview or want to level up your JS brain, here are some tricky and mind-bending questions with real-world examples.
Let’s dive deep! ♂️
1. What is the result of [] + [] and why?
Answer: "" (an empty string)
console.log([] + []); // ""
Why?
When using + with arrays, JavaScript tries to convert both operands to strings and then concatenate them.
[].toString(); // ""
So essentially it becomes: "" + "" => ""
Mind blown? It gets crazier!
2. What is the output of [1,2,3] + [4,5,6]?
Answer: "1,2,34,5,6"
console.log([1,2,3] + [4,5,6]); // "1,2,34,5,6"
JavaScript converts both arrays to strings:
[1,2,3].toString(); // "1,2,3"
[4,5,6].toString(); // "4,5,6"
Then: "1,2,3" + "4,5,6" => "1,2,34,5,6"
Pro Tip: Always double-check data types before combining!
3. What does typeof NaN return?
Answer: "number"
console.log(typeof NaN); // "number"
Even though NaN stands for Not a Number, it's still considered a number type in JS.
Takeaway: Don’t rely solely on typeof for validation—use Number.isNaN().
️ 4. What will be the result of this code?
let a = [1, 2, 3];
a[10] = 99;
console.log(a.length); // ?
Answer: 11
Sparse arrays! JavaScript sets a[10], leaving holes (undefineds) in between.
// Array looks like:
[1, 2, 3, <7 empty items>, 99]
Trap: Don’t assume sequential indexes when working with arrays.
5. Is {} + [] the same as [] + {}?
console.log({} + []); // 0
console.log([] + {}); // "[object Object]"
Why?
In the first case, {} is treated as a block scope and +[] becomes 0.
+[] // 0
In the second case:
[] + {}
// "" + "[object Object]" => "[object Object]"
Lesson: Operator precedence + expression context = head-scratcher
6. What is the output of console.log(0.1 + 0.2 === 0.3)?
Answer: false
console.log(0.1 + 0.2 === 0.3); // false
Due to floating-point precision errors in JS:
0.1 + 0.2 = 0.30000000000000004
✅ Fix: Use a precision tolerance:
Math.abs((0.1 + 0.2) - 0.3) < Number.EPSILON
7. What does this return?
let foo = function() {};
console.log(foo.prototype);
Answer: {}
Every function (not arrow function) has a .prototype object, used for inheritance when using new.
But arrow functions don’t have .prototype:
const bar = () => {};
console.log(bar.prototype); // undefined
Note: This is crucial when working with constructors and classes!
8. What will let x = (1, 2, 3); return?
Answer: 3
let x = (1, 2, 3);
console.log(x); // 3
Comma operator evaluates each expression but returns only the last one.
Rare but useful in minified or inline expressions.
9. Why does this return 'object'?
console.log(typeof null); // "object"
Answer: This is a legacy bug from the early days of JS.
Internally, null was represented with a null pointer, which was 0—but the type tag system also used 0 for "object."
So...
Takeaway: Use value === null to check for null explicitly.
10. What does this return?
let a = {};
let b = { key: "b" };
let c = { key: "c" };
a[b] = 123;
a[c] = 456;
console.log(a[b]); // ??
Answer: 456
Why? JS converts object keys to strings. So:
b.toString() => "[object Object]"
c.toString() => "[object Object]"
So both a[b] and a[c] are actually a["[object Object]"].
Fix: Use Map if you want objects as keys:
let map = new Map();
map.set(b, 123);
map.set(c, 456);
console.log(map.get(b)); // 123
Wrapping Up…
Mastering these tricky questions gives you a huge edge in interviews!
✅ They test:
- Deep knowledge of JavaScript internals
- Awareness of quirks and bugs
- Practical debugging mindset