Question 1

What is the difference between let and var?

Accepted Answer

The core difference is scope and hoisting. `var` is function-scoped and gets hoisted, while `let` is block-scoped and stays where you put it.

Think of `var` like a loud speaker in a room. Once you turn it on, everyone in the entire room (the function) can hear it, even if you're standing in a tiny corner (a loop or an if-block). But `let` is like a private whisper. It only exists inside the specific box or 'lunchbox' where it was created. If you define a `let` variable inside a for-loop, it doesn't leak out to the rest of your code.

Most tutorials get this wrong by just saying 'one is old, one is new'. The real pain is when `var` causes bugs because it lets you use a variable before it's even declared.

Check this out:

```javascript
function scopeTest() {
  if (true) {
    var loudSpeaker = 'I am everywhere!';
    let privateWhisper = 'I am hidden';
  }
  console.log(loudSpeaker); // Works! 'I am everywhere!'
  console.log(privateWhisper); // ReferenceError: privateWhisper is not defined
}
```

And then there's hoisting. With `var`, JavaScript moves the declaration to the top. It's like moving furniture into a new house before you even arrive. With `let`, you can't touch the variable until the code actually hits that line.

One big trap? Using `var` in loops with asynchronous code. You'll end up with the final value of the loop for every single iteration because they all share that one 'loud speaker'. Switch to `let` and each iteration gets its own fresh, isolated environment. It's the difference between a shared messy desk and giving every worker their own organized workstation.

Question 2

What is the difference between microtasks and macrotasks in the Event Loop?

Accepted Answer

In JavaScript, the Event Loop handles asynchronous callbacks by dividing them into two queues:Microtask Queue: Promises (.then, .catch, .finally), queueMicrotask(), and MutationObserver. These are executed immediately after the currently running script and before rendering or any macrotask.Macrotask (Task) Queue: setTimeout, setInterval, setImmediate, I/O events, and UI rendering.

Question 3

What is the difference between == and === in JavaScript?

Accepted Answer

== checks value equality with type coercion—it converts types before comparing. === checks both value and type without conversion. '5' == 5 is true, but '5' === 5 is false. Using === is safer and avoids unexpected bugs.

Question 4

What is type coercion in JavaScript?

Accepted Answer

Type coercion is JavaScript's automatic conversion of one data type to another during comparisons or operations. It can lead to surprising results and is one reason === is preferred over ==.

Question 5

What is closure in JavaScript?

Accepted Answer

A closure is a function that remembers the variables from its outer scope even after the outer function has finished executing. It's like a backpack—the inner function carries its environment with it wherever it goes.

Question 6

Where are closures commonly used in real projects?

Accepted Answer

Closures are used in callbacks, event handlers, factory functions, and module patterns. For example, a counter function that keeps its own private count without exposing it globally.

Question 7

What is event delegation in JavaScript?

Accepted Answer

Event delegation attaches a single event listener to a parent element to handle events from its children. Instead of adding listeners to every button, you listen once on the container. It's like having one receptionist for an entire office floor instead of one per room.

Question 8

What is event bubbling and how does it relate to delegation?

Accepted Answer

Event bubbling means an event triggered on a child element travels up to its parents. Delegation works because of bubbling—the parent catches events that bubble up from children. You can stop bubbling using event.stopPropagation() when needed.

📥 Export Flashcards

Deck Completed!