Most Important JavaScript Output-Based Interview Questions and Answer

Explore Important JavaScript output-based interview questions with code snippets and explanations. Master hoisting, closures, scope, event loop, etc.
SDE Dev


I’ve faced many of these in real interviews, and now I’m sharing the most important ones with you — explained in easy words. So, If you're preparing for a JavaScript interview, output-based questions are a must-practice.

These types of questions test how well you understand how JavaScript works under the hood—things like hoisting, closures, promises, and scope.

1.  Hoisting and var

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

Output: undefined
Why:  JavaScript moves all var declarations to the top of their scope — this is called hoisting. But only the declaration is hoisted, not the value.
It's like the code becomes:
var a;
console.log(a); // undefined
a = 10;

So, when you log a, it exists but has no value yet.

2.  Function Hoisting

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

Output: Hello
Why: Function declarations (not expressions) are hoisted completely, including their body. That means you can use the function before it appears in the code.

Behind the scenes:

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

So, foo() works fine even before the function line.

3.  var in Loops with setTimeout

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

Output:

3  
3  
3

Why:

var is function-scoped, so all three callbacks share the same variable i. After the loop, i becomes 3. Then all timeouts run and print the same value: 3.

👉 Use let instead if you want different values.

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Output: 0 1 2

4. Closures in Loops

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

Output:

0  
1  
2

Why:  Here, an IIFE ((function(x){...})(i)) is used. It captures the current value of i as x, so each callback has its own copy.

This is how closure helps remember x.

5.  this in Regular Functions

const obj = {
  name: "Grok",
  sayName: function () {
    console.log(this.name);
  },
};
obj.sayName();

Output: Grok
Why: When a method is called using obj.sayName(), the this inside points to obj. So this.name becomes "Grok".

6.  Arrow Function this

const obj = {
  name: "Grok",
  sayName: () => {
    console.log(this.name);
  },
};
obj.sayName();

Output: undefined
Why: Arrow functions don’t get their own this. They use the this from their outer scope — usually the global object. In that case, this.name is undefined.

7. Event Loop: Promises vs setTimeout

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

Output:

Start  
End  
Promise  
Timeout

Why: JavaScript handles async code with the event loop:

  • console.log runs first

  • Promise.then() is a microtask — it runs before setTimeout

  • setTimeout is a macrotask

So:
→ Start
→ End
→ Promise
→ Timeout

8. Variable Shadowing

var x = 10;
function test() {
  var x = 20;
  console.log(x);
}
test();

Output: 20
Why: The inner variable x in the function hides the outer x. This is called shadowing — the local variable is used instead.

9.  Block Scope with let and const

{
  let x = 10;
  const y = 20;
}
console.log(x, y);

Output: ReferenceError
Why: let and const are block-scoped. They're only available inside the { }. Outside the block, they don’t exist.

10. Closures (Counter Example)

function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}
const counter = outer();
counter(); // 1
counter(); // 2

Output:

1  
2

Why: The inner() function still has access to count, even after outer() is done. This is a closure — when a function “remembers” variables from where it was created.

11.  Prototype & Inheritance

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function () {
  console.log("Hello, " + this.name);
};
const person = new Person("Alice");
person.greet();

Output: Hello, Alice
Why: Methods on the prototype are shared across all objects created using new Person(). this.name refers to the person’s name.

12. Strict Mode

"use strict";
x = 10;
console.log(x);

Output: ReferenceError
Why:  In strict mode, you must declare variables using let, const, or var. Without that, JavaScript throws an error.

13.  Default Parameters

function greet(name = "Guest") {
  console.log("Hello, " + name);
}
greet();        // Hello, Guest
greet("Alice"); // Hello, Alice

Why: If no value is passed, "Guest" is used as default. This helps avoid undefined values.

14. Array Mutation with const

const arr = [1, 2, 3];
arr.push(4);
console.log(arr);

Output: [1, 2, 3, 4]
Why:  const means you can’t reassign the variable (arr = []), but you can change the contents of the array.

15.  Destructuring Assignment

const obj = { a: 1, b: 2 };
const { a, b } = obj;
console.log(a, b);

Output: 1 2
Why: Destructuring pulls values directly from the object and stores them in variables.

16.  Promise Chaining

Promise.resolve(1)
  .then((val) => val + 1)
  .then((val) => console.log(val));

Output: 2
Why: Each .then() passes the result to the next one.
 So: 1 → .then(val + 1) → 2 → print 2

17.  IIFE Scope

(function () {
  var x = 10;
})();
console.log(x);

Output: ReferenceError
Why: IIFE creates a new scope. Variables inside it are not visible outside.

18.  Type Coercion

console.log("5" + 3); // "53"
console.log("5" - 3); // 2

Why:

  • "5" + 3 → string + number → converts 3 to "3" → "53"

  • "5" - 3 → string becomes number → 5 - 3 → 2

19. Object Property Keys

const obj = { "1": "one", 1: "number one" };
console.log(obj[1]);

Output: number one
Why: All object keys are strings. So "1" and 1 refer to the same key. The last one (1: "number one") replaces the first.

20.  Async/Await

async function test() {
  let promise = new Promise((resolve) => {
    setTimeout(() => resolve("Done"), 1000);
  });
  let result = await promise;
  console.log(result);
}
test();

Output: Done (after 1 second)
Why: The await pauses the function until the promise finishes. After 1 second, it prints "Done".

Also Read

FAQ (Simple Answers)

What are output-based questions in JavaScript?
You’re given some code and asked what it prints (the output). It checks your logic and knowledge of JS internals.

Why do interviewers ask these?
Because it shows if you understand how JS really works — like scopes, closures, and async code.

How can I practice them?
Try to predict output, then run and debug it. Use tools like in your console.

Should I memorize answers?
No. Try to understand the why behind each output.