20 Tricky JavaScript Interview Questions with Detailed Code Explanations – Master JavaScript!

Overview

JavaScript is full of surprises! Whether you're preparing for an interview or sharpening your coding skills, understanding tricky JavaScript questions is crucial. In this article, we’ll explore 10 complex JavaScript questions that test your knowledge of type coercion, scope, execution context, and operators.

1. What is the output?

console.log([] + []);

Output:

"" (empty string)

Explanation:

- When using the + operator, JavaScript tries to convert arrays into strings. - Both [] are converted into empty strings "". - "" + "" results in an empty string.

2. What happens here?

console.log([] == false);

Output:

true

Explanation:

- The == operator performs type coercion. - [] is converted to an empty string "". - "" == false → false == false → true.

3. What does this return?

console.log(typeof NaN);

Output:

"number"

Explanation:

- NaN stands for "Not a Number". - Despite its name, JavaScript considers NaN a type of number.

4. What is the output?

console.log(null == undefined);

Output:

true

Explanation:

- The == operator treats null and undefined as equal. - However, null === undefined returns false because their types differ.

5. What will be printed?

console.log(0.1 + 0.2 === 0.3);

Output:

false

Explanation:

- JavaScript uses floating-point arithmetic, which leads to precision errors. - 0.1 + 0.2 evaluates to 0.30000000000000004. - Since 0.30000000000000004 !== 0.3, it returns false.

Fix:

console.log(Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON);

6. What does this log?

console.log({} + []);

Output:

"[object Object]"

Explanation:

- The + operator converts objects to strings. - {} becomes "[object Object]". - [] becomes an empty string "". - So, "[object Object]" + "" gives "[object Object]".

7. What is the output?

console.log(true + false);

Output:

1

Explanation:

- true is treated as 1. - false is treated as 0. - 1 + 0 results in 1.

8. What will this print?

console.log(typeof function(){});

Output:

"function"

Explanation:

- The typeof operator classifies functions separately as "function".

9. What is the output?

console.log(typeof([]));

Output:

"object"

Explanation:

- Arrays are technically objects in JavaScript. - To check for an array, use:

console.log(Array.isArray([])); // true

10. What is the result of this?

console.log(!!"false" == !!"true");

Output:

true

Explanation:

- !!"false" converts the string "false" to true. - !!"true" does the same. - Since both are true, the result is true.

Conclusion

JavaScript has many tricky behaviors due to automatic type coercion, scope handling, and execution order. Mastering these concepts will make your code more predictable and bug-free.

11. What is the output?

console.log(typeof null);

Output:

"object"

Explanation:

- In JavaScript, null is considered an object due to a historical bug. - Use null === null to check if a value is truly null.

12. What happens in this case?

console.log(1 < 2 < 3);  
console.log(3 > 2 > 1);

Output:

true  
false

Explanation:

- 1 < 2 evaluates to true, which is 1 in numeric conversion. - 1 < 3 is true, so the first statement is true. - 3 > 2 is true (1), but 1 > 1 is false.

13. What is the output?

let x = {};  
let y = x;  
console.log(x == y);  
console.log(x === y);

Output:

true  
true

Explanation:

- Objects are compared by reference, not value. - Since y references the same object as x, both comparisons return true.

14. What will be printed?

console.log([] == ![]);

Output:

true

Explanation:

- [] is converted to "" (empty string). - ![] converts to false, which is 0 in coercion. - "" == 0 evaluates to true.

15. What is logged here?

console.log(typeof NaN === 'number');

Output:

true

Explanation:

- JavaScript considers NaN as a type of number. - However, NaN is not equal to any number, including itself.

Check for NaN correctly:

console.log(Number.isNaN(NaN)); // true

16. What will be the result?

console.log({} == {});

Output:

false

Explanation:

- Objects are stored by reference. - Since two objects do not share the same reference, the comparison returns false.

17. How does this behave?

function foo() {  
   return {  
       message: "Hello"  
   };  
}  
console.log(foo());

Output:

{ message: "Hello" }

Explanation:

- The function returns an object correctly.

Now look at this:

function bar() {  
   return   
   {  
       message: "Hello"  
   };  
}  
console.log(bar());

Output:

undefined

Why?

- JavaScript automatically inserts a semicolon after return, breaking the expected return value.

18. What will this return?

console.log(typeof NaN === typeof Infinity);

Output:

true

Explanation:

- Both NaN and Infinity belong to the "number" type.

19. What does this log?

console.log([] + {});

Output:

"[object Object]"

Explanation:

- [] is coerced into an empty string "". - {} is coerced into "[object Object]". - Concatenation results in "" + "[object Object]".

20. What happens in this case?

console.log("5" - 1);

Output:

4

Explanation:

- The - operator triggers numeric conversion. - "5" becomes 5, and 5 - 1 gives 4.

Conclusion

JavaScript’s dynamic typing and automatic type coercion lead to surprising behaviors. Understanding these tricky cases helps avoid pitfalls in real-world projects.