Mastering JavaScript requires a deep understanding of its unique runtime environment, from the nuances of the Event Loop to the power of closures and prototypal inheritance.
JavaScript Interview Questions (Q&A + Deep Understanding)
SECTION 1: Core Fundamentals
1. What is JavaScript?
Answer:
JavaScript is a single-threaded, synchronous, interpreted language with asynchronous capabilities.
Key Concepts:
- Runs in browser + server (Node.js)
- Uses event loop for async behavior
- Prototype-based (not classical OOP)
2. What is the difference between `var`, `let`, and `const`?
| Feature | var | let | const |
|---|---|---|---|
| Scope | Function | Block | Block |
| Re-declare | ✅ | ❌ | ❌ |
| Reassign | ✅ | ✅ | ❌ |
| Hoisting | Yes (undefined) | Yes (TDZ) | Yes (TDZ) |
Why is `var` dangerous?
if (true) {
var x = 10;
}
console.log(x); // 10
- 👉 Because it ignores block scope → causes bugs
3. What is Hoisting?
Answer:
Hoisting means:
JavaScript moves declarations to the top before execution
Example:
console.log(a);
var a = 5;
- 👉 Internally becomes:
var a;
console.log(a); // undefined
a = 5;
What about `let` and `const`?
They are hoisted BUT:
They stay in Temporal Dead Zone (TDZ)
console.log(a); // error
let a = 10;
4. What is the Temporal Dead Zone (TDZ)?
Answer:
Time between:
- variable hoisting
- and initialization
- 👉 Accessing variable → ReferenceError
5. What is a Closure?
Answer:
A closure is:
A function that remembers variables from its outer scope
Example:
function outer() {
let count = 0;
return function inner() {
count++;
return count;
};
}
const fn = outer();
fn(); // 1
fn(); // 2
Why is closure important?
Used in:
- data privacy
- callbacks
- React hooks
- memoization
SECTION 2: Execution & Event Loop
6. What is the Event Loop?
Answer:
Event loop manages:
Execution of synchronous + asynchronous code
Execution Order:
- 1. Call Stack
2. Microtask Queue (Promises) 3. Macrotask Queue (setTimeout)
Example:
console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D");
Output:
A
D
C
B
Why does Promise run before setTimeout?
- 👉 Because:
- Promises → microtask queue
- setTimeout → macrotask queue
7. What is Call Stack?
Answer:
A stack that tracks function execution.
function a() {
b();
}
function b() {
console.log("Hello");
}
a();
Stack:
a → b → console.log
SECTION 3: Objects & Prototypes
8. What is Prototype?
Answer:
Every JavaScript object has:
Hidden link to another object (prototype)
Example:
const obj = {};
console.log(obj.__proto__);
Why important?
Used for:
- inheritance
- method sharing
- performance
9. Difference: `__proto__` vs `prototype`
| Feature | **proto** | prototype |
|---|---|---|
| Used by | Objects | Functions |
| Purpose | Link to parent | Define properties for instances |
10. What is Prototypal Inheritance?
const parent = {
greet() {
console.log("Hello");
}
};
const child = Object.create(parent);
child.greet(); // Hello
SECTION 4: Functions & Advanced Concepts
11. What is `this` keyword?
Answer:
this refers to:
The object calling the function
Cases:
| Scenario | this |
|---|---|
| Global | window |
| Method | object |
| Arrow function | lexical |
Example:
const obj = {
name: "JS",
fn() {
console.log(this.name);
}
};
obj.fn(); // JS
12. Arrow Function vs Normal Function
| Feature | Normal | Arrow |
|---|---|---|
| this | dynamic | lexical |
| arguments | available | not |
| constructor | yes | no |
13. What is Currying?
function add(a) {
return function (b) {
return a + b;
};
}
add(2)(3); // 5
14. What is Debouncing?
Answer:
Limits function execution after delay.
Example:
function debounce(fn, delay) {
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(fn, delay);
};
}
15. What is Throttling?
Limits execution to once per interval.
SECTION 5: Async JavaScript
16. What is Promise?
Answer:
Promise represents:
Future value (pending, fulfilled, rejected)
Example:
const p = new Promise((resolve, reject) => {
resolve("done");
});
17. What is async/await?
async function fn() {
const data = await fetchData();
}
Why use it?
- cleaner than
.then() - readable
- synchronous-like code
18. Difference: Promise vs Async/Await
| Feature | Promise | Async/Await |
|---|---|---|
| Syntax | chaining | cleaner |
| Error | .catch | try/catch |
SECTION 6: Important Edge Cases
19. What is `==` vs `===`?
| Operator | Behavior |
|---|---|
| `==` | loose equality |
| `===` | strict equality |
0 == false // true
0 === false // false
20. What is NaN?
typeof NaN === "number"; // true
- 👉 Special value meaning “Not a Number”
21. What is Event Delegation?
Answer:
Using parent to handle child events.
document.getElementById("parent")
.addEventListener("click", e => {
console.log(e.target);
});
22. What is Deep Copy vs Shallow Copy?
Shallow:
const a = { x: 1 };
const b = { ...a };
Deep:
JSON.parse(JSON.stringify(obj));
SECTION 7: Practical Coding Questions
23. Reverse a string
const reverse = str => str.split('').reverse().join('');
24. Check palindrome
const isPalindrome = str => {
return str === str.split('').reverse().join('');
};
25. Flatten array
const flatten = arr => arr.flat(Infinity);
26. Remove duplicates
const unique = arr => [...new Set(arr)];
FINAL INTERVIEW STRATEGY
🔑 How to Answer in Interview:
Always structure like:
1. Definition
2. Why needed
3. Example
4. Edge case
🔥 Most Asked Topics:
- closures
- event loop
- promises
- this keyword
- prototypes
- async/await
Final Mental Model
JavaScript =
Execution Context + Event Loop + Prototype System
Editorial Note
Riverpod provides high simplicity, high scalability, and high testability compared to generic Providers or heavy BLoC architectures.
Archive Directory arrow_outward