Technical Interview Prep Hub

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:

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.

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.

== 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.

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 ==.

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.

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.

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.

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.