30 Tricky JavaScript Output Questions with Answers to Boost Your Interview Prep!

Introduction

If you’re preparing for a developer job interview, practicing JavaScript output questions is one of the smartest ways to boost your confidence. These questions go beyond basic syntax—they challenge your understanding of the language’s hidden behaviors, type coercion rules, closure patterns, event loop execution, and prototype quirks. In this article, we’ve compiled 30 tricky JavaScript output questions with answers and explanations covering beginner, intermediate, and advanced levels. By the end, you’ll be ready to tackle the kind of challenges that often catch even experienced developers off guard.

Beginner → Advanced Output Questions

1. Variable Hoisting Surprise

console.log(a);
var a = 5;

Output:

undefined

Explanation:
var declarations are hoisted but not initialized, so a exists but holds undefined until the assignment.

2. Hoisting with let

console.log(b);
let b = 10;

Output:

ReferenceError: Cannot access 'b' before initialization

Explanation:
let variables are also hoisted, but kept in the Temporal Dead Zone until the actual declaration.

3. var Inside Loop

for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}

Output:

3
3
3

Explanation:
var is function-scoped, so all callbacks share the same i value, which is 3 by the time they run.

4. Fixing var Issue with let

for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}

Output:

0
1
2

Explanation:
let creates a new binding for i in each iteration, preserving its value for each callback.

5. Type Coercion Trick

console.log([] + []);

Output:

""

Explanation:
Empty arrays convert to empty strings in string context. "" + "" is "".

6. Array + Object

console.log([] + {});

Output:

"[object Object]"

Explanation:
[] becomes "", {} becomes "[object Object]". Concatenation results in that string.

7. Object + Array

console.log({} + []);

Output:

0

Explanation:
In expression context, {} is a block, leaving +[], which converts to 0.

8. Weird Equality

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

Output:

true

Explanation:
![] → false → 0, [] → "" → 0. 0 == 0 is true.

9. Double Equals vs Triple Equals

console.log(null == undefined);
console.log(null === undefined);

Output:

true
false

Explanation:
Loose equality considers them equal; strict equality checks types too.

10. NaN Quirk

console.log(NaN === NaN);

Output:

false

Explanation:
NaN is never equal to itself.

11. Truthy/Falsy Test

if ([] && {}) {
    console.log("Yes");
}

Output:

Yes

Explanation:
Empty arrays and objects are truthy in JS.

12. this in Arrow Function

const obj = {
    value: 10,
    arrow: () => console.log(this.value)
};
obj.arrow();

Output:

undefined

Explanation:
Arrow functions capture this from their outer scope, not the object.

13. this in Method

const obj = {
    value: 20,
    method() {
        console.log(this.value);
    }
};
obj.method();

Output:

20

Explanation:
Regular methods get this from the object calling them.

14. Losing this

const obj = {
    value: 30,
    method() {
        console.log(this.value);
    }
};
const fn = obj.method;
fn();

Output:

undefined

Explanation:
When detached, a method loses its this context.

15. setTimeout Order

console.log("A");
setTimeout(() => console.log("B"), 0);
console.log("C");

Output:

A
C
B

Explanation:
setTimeout callbacks run after the current call stack.

16. Promise Before Timeout

console.log("Start");
Promise.resolve().then(() => console.log("Promise"));
setTimeout(() => console.log("Timeout"), 0);
console.log("End");

Output:

Start
End
Promise
Timeout

Explanation:
Promises (microtasks) run before timeouts (macrotasks).

17. Destructuring with Defaults

let [x = 5] = [undefined];
console.log(x);

Output:

5

Explanation:
Defaults apply only to undefined.

18. Null vs Undefined in Destructuring

let [y = 5] = [null];
console.log(y);

Output:

null

Explanation:
null doesn’t trigger default values.

19. Object Property Order

const obj = { 2: "a", 1: "b", name: "c" };
console.log(Object.keys(obj));

Output:

["1", "2", "name"]

Explanation:
Numeric keys are sorted; string keys follow insertion order.

20. Spread Operator Overwrite

const a = { x: 1, y: 2 };
const b = { y: 3, z: 4 };
console.log({ ...a, ...b });

Output:

{ x: 1, y: 3, z: 4 }

Explanation:
Later properties overwrite earlier ones.

21. Map vs Object Keys

const map = new Map();
map.set("1", "str");
map.set(1, "num");
console.log(map.get("1"));

Output:

str

Explanation:
Map distinguishes between "1" and 1.

22. 0 and -0

console.log(0 === -0);
console.log(Object.is(0, -0));

Output:

true
false

Explanation:
=== sees them as equal; Object.is doesn’t.

23. Floating Point Rounding

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

Output:

false

Explanation:
Floating-point math causes precision errors.

24. Default Params and Undefined

function test(a = 10) {
    console.log(a);
}
test(undefined);

Output:

10

Explanation:
Defaults only trigger for undefined.

25. Default Params and Null

function test(a = 10) {
    console.log(a);
}
test(null);

Output:

null

Explanation:
null is a valid value.

26. Function Hoisting

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

Output:

Hello

Explanation:
Function declarations are hoisted with their definitions.

27. Function Expression Hoisting

bar();
var bar = function () {
    console.log("Hi");
};

Output:

TypeError: bar is not a function

Explanation:
Variable is hoisted but assigned later, so it’s undefined when called.

28. Generator Function

function* gen() {
    yield 1;
    yield 2;
}
const g = gen();
console.log(g.next().value);

Output:

1

Explanation:
yield pauses and returns a value.

29. Modifying Prototype

Array.prototype.sayHi = function () {
    return "Hi";
};
console.log([1, 2].sayHi());

Output:

Hi

Explanation:
Added methods to prototypes apply to all instances.

30. WeakMap GC

let obj = {};
const wm = new WeakMap();
wm.set(obj, "value");
obj = null;

Output:

(No visible output)

Explanation:
WeakMap keys are weakly held, so they can be garbage collected when not referenced.

Most Important React Interview Questions with Answers!

Conclusion

Mastering JavaScript output questions isn’t about memorizing answers—it’s about training your brain to think like the JavaScript engine. The examples above cover everything from fundamental language features to advanced quirks found in real-world code. Whether you’re facing a technical interview or simply want to deepen your understanding, practicing these questions will make you more confident, accurate, and efficient as a developer. Keep experimenting, keep testing, and remember: in JavaScript, the “obvious” answer isn’t always the right one.