Some links in this article are affiliate links. We earn a commission at no extra cost to you when you purchase through them. Full disclosure.

These are the JavaScript questions that come up in almost every frontend interview. Know these cold.

1. What’s the difference between var, let, and const?

• var — function-scoped, hoisted, can be redeclared
• let — block-scoped, not hoisted (TDZ), can be reassigned
• const — block-scoped, not hoisted (TDZ), cannot be reassigned (but objects/arrays can be mutated)

var x = 1;   // avoid in modern code
let y = 2;   // use when value changes
const z = 3; // use by default

2. What is hoisting?

Variable and function declarations are moved to the top of their scope during compilation. But only the declaration, not the assignment.

console.log(a); // undefined (var is hoisted)
console.log(b); // ReferenceError (let is in TDZ)
var a = 1;
let b = 2;

3. Explain closures

A closure is a function that remembers the variables from its outer scope even after the outer function has returned.

function counter() {
  let count = 0;
  return function() {
    return ++count;
  };
}
const inc = counter();
inc(); // 1
inc(); // 2

4. What’s the difference between == and ===?

• == does type coercion: '1' == 1 is true
• === checks type and value: '1' === 1 is false

Always use === unless you have a specific reason not to.

5. What is the event loop?

JavaScript is single-threaded. The event loop handles async operations:

1. Execute synchronous code (call stack)
2. Check microtask queue (Promises, queueMicrotask)
3. Check macrotask queue (setTimeout, setInterval, I/O)
4. Repeat

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
// Output: 1, 4, 3, 2

6. What’s the difference between null and undefined?

• undefined — variable declared but not assigned, or missing function parameter
• null — intentionally empty value, assigned by the developer

let a;        // undefined
let b = null; // null
typeof a;     // "undefined"
typeof b;     // "object" (this is a known JS bug)

7. Explain this in JavaScript

this depends on how a function is called:

• Global: window (browser) or undefined (strict mode)
• Object method: the object
• Arrow function: inherits from enclosing scope
• Constructor: the new instance
• call/apply/bind: whatever you pass

const obj = {
  name: 'Alice',
  greet() { console.log(this.name); },        // 'Alice'
  greetArrow: () => { console.log(this.name); } // undefined (inherits outer this)
};

8. What are Promises?

A Promise represents a value that might be available now, later, or never. Three states: pending, fulfilled, rejected.

const p = new Promise((resolve, reject) => {
  setTimeout(() => resolve('done'), 1000);
});

p.then(val => console.log(val));  // 'done' after 1s

9. async/await vs .then()

Same thing, different syntax. async/await is syntactic sugar over Promises.

// .then()
fetch('/api').then(res => res.json()).then(data => console.log(data));

// async/await
const res = await fetch('/api');
const data = await res.json();
console.log(data);

10. What is destructuring?

Extracting values from objects or arrays into variables.

const { name, age } = { name: 'Alice', age: 30 };
const [first, second] = [1, 2, 3];

11. Spread vs Rest operator

Same syntax (...), different context:

// Spread: expands
const arr = [...arr1, ...arr2];
const obj = { ...obj1, newProp: true };

// Rest: collects
function sum(...numbers) { return numbers.reduce((a, b) => a + b); }

12. What is the prototype chain?

Every object has a __proto__ that points to its prototype. Property lookups walk up the chain until found or null.

const arr = [1, 2, 3];
// arr → Array.prototype → Object.prototype → null
arr.hasOwnProperty('length'); // found on arr
arr.toString();               // found on Array.prototype

13. What are higher-order functions?

Functions that take functions as arguments or return functions.

// Takes a function
[1, 2, 3].map(x => x * 2);

// Returns a function
function multiply(a) {
  return function(b) { return a * b; };
}
const double = multiply(2);
double(5); // 10

14. Explain map, filter, reduce

const nums = [1, 2, 3, 4, 5];

nums.map(n => n * 2);           // [2, 4, 6, 8, 10] — transform each
nums.filter(n => n > 3);        // [4, 5] — keep matching
nums.reduce((sum, n) => sum + n, 0); // 15 — accumulate to single value

15. What is debouncing vs throttling?

• Debounce: Wait until user stops doing something, then execute once. (Search input)
• Throttle: Execute at most once per interval. (Scroll handler)

// Debounce: fires 300ms after last keystroke
function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}

16. What is event delegation?

Instead of adding listeners to every child, add one to the parent:

// ❌ Listener on every button
document.querySelectorAll('button').forEach(btn => btn.addEventListener('click', handler));

// ✅ One listener on parent
document.getElementById('container').addEventListener('click', (e) => {
  if (e.target.matches('button')) handler(e);
});

17. What are generators?

Functions that can pause and resume, yielding multiple values:

function* range(start, end) {
  for (let i = start; i <= end; i++) yield i;
}
for (const n of range(1, 5)) console.log(n); // 1, 2, 3, 4, 5

18. What is the difference between deep copy and shallow copy?

const obj = { a: 1, b: { c: 2 } };

// Shallow: nested objects are still references
const shallow = { ...obj };
shallow.b.c = 99; // also changes obj.b.c!

// Deep: completely independent
const deep = structuredClone(obj);
deep.b.c = 99; // obj.b.c unchanged

19. What are WeakMap and WeakSet?

Like Map/Set but keys are weakly held — they don’t prevent garbage collection. Useful for caching without memory leaks.

const cache = new WeakMap();
function process(obj) {
  if (cache.has(obj)) return cache.get(obj);
  const result = expensiveOperation(obj);
  cache.set(obj, result);
  return result;
}

20. What is optional chaining and nullish coalescing?

// Optional chaining: safe property access
const city = user?.address?.city; // undefined if any part is null/undefined

// Nullish coalescing: default for null/undefined only
const name = user.name ?? 'Anonymous'; // only if null/undefined, not '' or 0

How to use this list

Don’t memorize answers word-for-word. Understand the concepts and be able to explain them in your own words with examples. Interviewers can tell the difference.

Related resources

• JavaScript array methods cheat sheet
• JavaScript complete guide

Related: What is TypeScript · React Interview Questions · Behavioral Interview Developer · Node Interview Questions

Prep faster: Pluralsight has dedicated JavaScript interview prep courses with hands-on exercises. Start a free 10-day trial.