Crack the JavaScript Interview: 20 Core Concepts Explained Like a Chat Over Coffee

Skip the dry documentation. Here is your friendly, bite-sized guide to passing your next frontend interview without stress.
If you've been interviewing for frontend developer roles lately, you know the drill. You spent years building polished user interfaces and shipping clean code, but suddenly you're asked to explain prototype chains or microtask priority off the top of your head.
Instead of reading formal documentation filled with dense academic phrasing, let's go through the 20 most essential JavaScript interview questions in simple, plain language.

1. What's the difference between var, let, and const? Think of var as the old-school way we used to declare variables. It's function-scoped and gets hoisted (meaning JS moves the declaration to the top). The problem? It lets you re-declare variables in the same scope, leading to weird bugs. let and const were introduced in ES6: let is block-scoped (lives inside {}) and allows re-assignment.

const is also block-scoped, but once assigned, you can't re-assign it. (Note: Object properties inside a const can still be updated!)

1. How does Hoisting actually work? JavaScript reads your code twice before running it. In the first pass, it takes variable and function declarations and conceptually moves them to the top of their scope. Functions are fully hoisted, so you can call them before they appear in the file.

var is hoisted with a default value of undefined.

let and const are hoisted too, but kept in a "Temporal Dead Zone" (TDZ) until the engine hits their line of code.

1. What's the difference between == and ===? == (Loose Equality): Checks value after attempting type coercion. For example, '5' == 5 returns true.

=== (Strict Equality): Checks both value AND type without converting anything. So '5' === 5 returns false.

1. Can you explain Closures like I'm 5? A closure happens when an inner function remembers variables from its outer (parent) function, even after that parent function has finished executing. function makeCounter() { let count = 0; return function() { count++; return count; }; } const counter = makeCounter(); console.log(counter()); // 1 console.log(counter()); // 2
2. What is the Event Loop? JavaScript is single-threaded - it can only do one task at a time. The event loop coordinates async operations: Call Stack: Executes synchronous code.

Web APIs: Handles timers, requests, and events in the background.

Callback Queue: Holds callbacks ready to run.

Event Loop: Checks if the Call Stack is empty and moves queued tasks onto it.

1. Microtasks vs. Macrotasks: What runs first? When asynchronous code completes, it goes into one of two queues: Microtask Queue: Promises (.then(), async/await).

Macrotask Queue: setTimeout, setInterval.

Microtasks always take priority over macrotasks!

1. What does the this keyword refer to? this refers to the execution context: Global scope: Points to window (or undefined in strict mode).

Object method: Points to the object calling the method.

Arrow Functions: Inherit this lexically from the surrounding code.

1. What are call, apply, and bind? All three let you explicitly set this: call(): Runs immediately, arguments passed individually.

apply(): Runs immediately, arguments passed as an array.

bind(): Returns a new function with this permanently bound.

1. What is Prototype / Prototypal Inheritance? In JS, objects inherit properties and methods from other objects through the prototype chain. If a property isn't on the object itself, JS traverses up proto until it finds it or hits null.
2. What are Promises? A Promise represents a future value. It prevents callback hell and exists in 3 states: Pending, Fulfilled, or Rejected.
3. How does async/await work? It is syntactic sugar over Promises. async makes a function return a Promise, and await pauses execution until that Promise resolves.
4. Deep Copy vs. Shallow Copy Shallow Copy: Copies outer properties; nested objects remain linked by reference ({...obj}).

Deep Copy: Recursively copies all levels, creating total independence (structuredClone(obj)).

1. What is Debouncing and Throttling? Debouncing: Delays execution until user stops action (e.g., typing in search).

Throttling: Limits execution rate (e.g., once every 200ms on scroll).

1. What are Higher-Order Functions? Functions that either take other functions as parameters (.map(), .filter()) or return a function.
2. Map vs. Set vs. Object Object: Key-value pairs (string keys).

Map: Key-value pairs allowing any data type as keys.

Set: Collection of unique values (no duplicates).

1. Event Bubbling vs Capturing Capturing: Event travels from window down to element.

Bubbling: Event travels from element up through parents.

1. What is Event Delegation? Attaching a single event listener to a parent container to manage events on all existing and future child elements using e.target.
2. Object.freeze() vs Object.seal() freeze(): Completely immutable (no edits, additions, or deletions).

seal(): Can update existing values, but cannot add or remove properties.

1. Rest vs Spread Operators (...) Spread: Unpacks values into individual elements ([...arr]).

Rest: Gathers individual values into an array (function(...args)).

1. What is a Pure Function? A function that always produces the exact same output for the same inputs and causes no side effects outside its scope. Final Thought Interviews are less about memorizing definitions word-for-word and more about showing that you understand how the engine operates under the hood. When you can articulate concepts like closures, event loops, and variable scopes in simple language, interviewers know you truly understand your craft. If you found this guide helpful, consider clapping 👏 and saving it for quick reference before your next tech screen! 🚀