Essential 50+ JavaScript Interview Questions

1. What is JavaScript?

JavaScript is a lightweight, interpreted programming language used to create dynamic web content.

2. What are JavaScript data types?

Primitive: String, Number, Boolean, Undefined, Null, Symbol, BigInt
Non-Primitive: Object, Array, Function

let str = "Hello"; // String
let num = 42;      // Number
let bool = true;   // Boolean

3. Explain `var`, `let`, and `const`

var: Function-scoped, can be re-declared.
let: Block-scoped, cannot be re-declared.
const: Block-scoped, must be initialized and cannot be reassigned.

var a = 10;
let b = 20;
const c = 30;

4. What is hoisting?

Hoisting allows function and variable declarations to be moved to the top of their scope during compile time.

console.log(x); // undefined
var x = 10;

5. Difference between `==` and `===`

==: Abstract equality, checks value.
===: Strict equality, checks value and type.

console.log(5 == '5');  // true
console.log(5 === '5'); // false

6. What are closures in JavaScript?

Closures allow a function to access variables from its outer scope.

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}
const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

7. What is the DOM?

The DOM (Document Object Model) is an API that represents HTML as a tree structure.

8. Explain event delegation.

Event delegation uses a parent to handle events for its child elements, read this blog post for more reference.

document.getElementById('parent').addEventListener('click', (e) => {
  console.log('Clicked on', e.target);
});

9. What are promises?

Promises handle asynchronous operations and can be in states: pending, fulfilled, or rejected.

const promise = new Promise((resolve, reject) => {
  resolve("Success");
});
promise.then((res) => console.log(res));

10. Explain `async/await`.

async/await is a cleaner way to handle promises.

async function fetchData() {
  let data = await fetch('https://api.example.com');
  console.log(data);
}
fetchData();

11. What are arrow functions?

Arrow functions are a shorter syntax for functions.

const add = (a, b) => a + b;
console.log(add(5, 3)); // 8

12. What is the spread operator?

The spread operator (...) expands an array or object.

let arr = [1, 2, 3];
let newArr = [...arr, 4];
console.log(newArr); // [1, 2, 3, 4]

13. Difference between `undefined` and `null`

undefined: Variable declared but not initialized.
null: Explicitly set to no value.

14. What is `this` in JavaScript?

this refers to the context in which the function is executed.

15. Explain `call`, `apply`, and `bind`.

call: Invokes a function with arguments as a list.
apply: Invokes a function with arguments as an array.
bind: Returns a new function bound to a context.

function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}
const user = { name: "John" };
greet.call(user, "Hello");

16. Explain prototypes in JavaScript.

Prototypes are the mechanism by which objects inherit features.

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function () {
  return `Hello, ${this.name}`;
};
const john = new Person('John');
console.log(john.greet());

17. What are IIFEs?

Immediately Invoked Function Expressions execute immediately after definition.

(function () {
  console.log("IIFE called");
})();

18. Difference between `map`, `filter`, and `reduce`

map: Transforms elements.
filter: Filters elements.
reduce: Reduces to a single value.

let arr = [1, 2, 3];
let doubled = arr.map(x => x * 2); // [2, 4, 6]

19. What is the event loop?

The event loop manages the execution of asynchronous code in JavaScript.

20. What are modules in JavaScript?

Modules allow code reuse using export and import.

// module.js
export const greet = () => console.log("Hello");

// main.js
import { greet } from './module.js';
greet();

21. What is `strict mode` in JavaScript?

strict mode is a feature that enforces stricter parsing and error handling.

'use strict';
x = 10; // Error: x is not defined

22. What are higher-order functions?

Higher-order functions are functions that take other functions as arguments or return functions.

function higherOrder(fn) {
  return fn(5);
}
function addTwo(num) {
  return num + 2;
}
console.log(higherOrder(addTwo)); // 7

23. Explain debouncing and throttling.

Debouncing: Ensures a function runs after a delay, resetting if called again.
Throttling: Ensures a function runs at fixed intervals.

// Debouncing
function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

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

Shallow Copy: Copies only the first level.
Deep Copy: Recursively copies all levels.

let obj = { a: 1, b: { c: 2 } };
let shallowCopy = { ...obj };
let deepCopy = JSON.parse(JSON.stringify(obj));

25. Explain `setTimeout` and `setInterval`.

setTimeout: Runs code after a specified time.
setInterval: Repeats code execution at intervals.

setTimeout(() => console.log("Delayed"), 1000);
setInterval(() => console.log("Repeated"), 1000);

26. What is the difference between `Object.freeze` and `Object.seal`?

Object.freeze: Makes an object immutable.
Object.seal: Allows modifying properties but prevents adding or removing them.

let obj = { a: 1 };
Object.freeze(obj);
obj.a = 2; // Error

27. What are getters and setters in JavaScript?

Getters and setters allow controlled access to object properties.

let obj = {
  _name: "John",
  get name() {
    return this._name;
  },
  set name(value) {
    this._name = value;
  },
};
obj.name = "Doe";
console.log(obj.name); // "Doe"

28. What are JavaScript generators?

Generators are functions that can pause and resume execution using yield.

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}
const gen = generator();
console.log(gen.next().value); // 1

29. What is the difference between synchronous and asynchronous code?

Synchronous: Code executes sequentially.
Asynchronous: Code execution is non-blocking.

30. What is the `Fetch API`?

The Fetch API allows making HTTP requests.

fetch('https://api.example.com')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

31. Explain `localStorage` and `sessionStorage`.

localStorage: Stores data with no expiration.
sessionStorage: Stores data for the session.

localStorage.setItem("name", "John");
console.log(localStorage.getItem("name"));

32. What are JavaScript classes?

Classes are syntactic sugar over prototypes for creating objects.

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}`;
  }
}
const john = new Person("John");
console.log(john.greet());

33. What are the differences between `forEach` and `map`?

forEach: Iterates over elements without returning a new array.
map: Iterates over elements and returns a new array.

let arr = [1, 2, 3];
arr.forEach(num => console.log(num)); // No new array
let doubled = arr.map(num => num * 2); // [2, 4, 6]

34. Explain `try...catch` in JavaScript.

try...catch handles exceptions.

try {
  throw new Error("Something went wrong");
} catch (error) {
  console.error(error.message);
}

35. What is the `EventEmitter` in JavaScript?

EventEmitter allows emitting and listening for custom events (Node.js).

const EventEmitter = require('events');
const emitter = new EventEmitter();
emitter.on('event', () => console.log('Event triggered'));
emitter.emit('event');

36. What are WeakMap and WeakSet?

WeakMap: Holds weakly referenced key-value pairs.
WeakSet: Holds weakly referenced objects.

let obj = {};
let weakMap = new WeakMap();
weakMap.set(obj, "value");

37. What is memoization?

Memoization optimizes function calls by caching results.

function memoize(fn) {
  let cache = {};
  return function (key) {
    if (cache[key]) return cache[key];
    cache[key] = fn(key);
    return cache[key];
  };
}

38. What is the difference between `apply`, `call`, and `bind`?

apply: Invokes with an array of arguments.
call: Invokes with arguments as a list.
bind: Returns a new function bound to a context.

function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}
const user = { name: "Alice" };
greet.apply(user, ["Hello"]);
greet.call(user, "Hi");

39. Explain polyfills in JavaScript.

Polyfills are code snippets that add modern features to older environments.

40. What is a service worker?

A service worker is a script that runs in the background and helps enable features like offline caching.

navigator.serviceWorker.register('/sw.js').then(() => {
  console.log('Service Worker Registered');
});

41. What is the Event Loop in JavaScript?

The Event Loop is a mechanism that handles the execution of asynchronous code. It checks the call stack and the task queue to decide what code to execute next.

Code Example:

console.log('Start'); 

setTimeout(() => console.log('Timeout'), 0);

Promise.resolve().then(() => console.log('Promise'));

console.log('End');

Output:

Start
End
Promise
Timeout

Explanation:

The call stack executes Start and End.
The promise is a microtask, so it runs before the timeout (a macrotask).

42. What is the difference between `setImmediate` and `process.nextTick` in Node.js?

process.nextTick: Executes the callback immediately after the current operation, before any I/O events.
setImmediate: Executes the callback on the next iteration of the event loop.

Code Example:

console.log('Start');

process.nextTick(() => console.log('Next Tick'));
setImmediate(() => console.log('Immediate'));

console.log('End');

Output:

Start
End
Next Tick
Immediate

43. What is Prototypal Inheritance in JavaScript?

Prototypal inheritance allows objects to inherit properties and methods from another object using the prototype chain.

Code Example:

const parent = {
  greet: function() {
    console.log(`Hello, ${this.name}`);
  }
};

const child = Object.create(parent);
child.name = 'John';
child.greet(); // Hello, John

44. What is the difference between `proto` and `prototype`?

__proto__: Refers to the prototype of an object instance.
prototype: Refers to the prototype of a function (used when creating objects via constructors).

Code Example:

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  return `Hello, ${this.name}`;
};

const john = new Person('John');
console.log(john.__proto__ === Person.prototype); // true

45. How do you use closures to implement private variables?

Closures can create private variables by encapsulating data within a function scope.

Code Example:

function Counter() {
  let count = 0; // Private variable

  return {
    increment: function() {
      count++;
      return count;
    },
    decrement: function() {
      count--;
      return count;
    }
  };
}

const counter = Counter();
console.log(counter.increment()); // 1
console.log(counter.decrement()); // 0
console.log(counter.count); // undefined (private)

46. What is the difference between shallow copy and deep copy in JavaScript?

Shallow Copy: Copies the first level of properties; nested objects are referenced.
Deep Copy: Recursively copies all levels of properties.

Code Example:

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

// Shallow Copy
const shallowCopy = { ...obj };
shallowCopy.b.c = 42;
console.log(obj.b.c); // 42

// Deep Copy
const deepCopy = JSON.parse(JSON.stringify(obj));
deepCopy.b.c = 99;
console.log(obj.b.c); // 42

47. How would you implement a debounce function in JavaScript?

A debounce function ensures that a function is executed only after a specified delay, even if it is called repeatedly.

Code Example:

function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

const log = debounce((msg) => console.log(msg), 500);
log('Hello'); // Executes after 500ms if not called again

48. How would you implement a throttle function in JavaScript?

A throttle function ensures that a function is executed at most once in a specified interval, even if called repeatedly.

Code Example:

function throttle(func, interval) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= interval) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}

const log = throttle((msg) => console.log(msg), 1000);
log('Hello'); // Executes immediately
log('Hello again'); // Ignored if within 1 second

49. How do you implement memoization in JavaScript?

Memoization is a caching technique to store the results of expensive function calls.

Code Example:

function memoize(fn) {
  const cache = {};
  return function (n) {
    if (cache[n]) {
      return cache[n];
    }
    cache[n] = fn(n);
    return cache[n];
  };
}

const factorial = memoize((n) => (n <= 1 ? 1 : n * factorial(n - 1)));

console.log(factorial(5)); // 120
console.log(factorial(5)); // Retrieved from cache: 120

50. What are WeakMap and WeakSet?

WeakMap: Holds key-value pairs where keys are weakly referenced.
WeakSet: Stores objects weakly, preventing memory leaks.

Code Example:

const weakMap = new WeakMap();
const obj = {};
weakMap.set(obj, 'value');
console.log(weakMap.get(obj)); // value

const weakSet = new WeakSet();
weakSet.add(obj);
console.log(weakSet.has(obj)); // true

Top 50+ Essential JavaScript Interview Questions You Need to Know

Top JavaScript Interview Questions for Those with 2+ Years Experience

1. What is JavaScript?

2. What are JavaScript data types?

3. Explain var, let, and const

4. What is hoisting?

5. Difference between == and ===

6. What are closures in JavaScript?

7. What is the DOM?

8. Explain event delegation.

9. What are promises?

10. Explain async/await.

11. What are arrow functions?

12. What is the spread operator?

13. Difference between undefined and null

14. What is this in JavaScript?

15. Explain call, apply, and bind.

16. Explain prototypes in JavaScript.

17. What are IIFEs?

18. Difference between map, filter, and reduce

19. What is the event loop?

20. What are modules in JavaScript?

21. What is strict mode in JavaScript?

22. What are higher-order functions?

23. Explain debouncing and throttling.

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

25. Explain setTimeout and setInterval.

26. What is the difference between Object.freeze and Object.seal?

27. What are getters and setters in JavaScript?

28. What are JavaScript generators?

29. What is the difference between synchronous and asynchronous code?

30. What is the Fetch API?

31. Explain localStorage and sessionStorage.

32. What are JavaScript classes?

33. What are the differences between forEach and map?

34. Explain try...catch in JavaScript.

35. What is the EventEmitter in JavaScript?

36. What are WeakMap and WeakSet?

37. What is memoization?

38. What is the difference between apply, call, and bind?

39. Explain polyfills in JavaScript.

40. What is a service worker?

41. What is the Event Loop in JavaScript?

42. What is the difference between setImmediate and process.nextTick in Node.js?

43. What is Prototypal Inheritance in JavaScript?

44. What is the difference between __proto__ and prototype?

45. How do you use closures to implement private variables?

46. What is the difference between shallow copy and deep copy in JavaScript?

47. How would you implement a debounce function in JavaScript?

48. How would you implement a throttle function in JavaScript?

49. How do you implement memoization in JavaScript?

50. What are WeakMap and WeakSet?

Did you find this article valuable?

3. Explain `var`, `let`, and `const`

5. Difference between `==` and `===`

10. Explain `async/await`.

13. Difference between `undefined` and `null`

14. What is `this` in JavaScript?

15. Explain `call`, `apply`, and `bind`.

18. Difference between `map`, `filter`, and `reduce`

21. What is `strict mode` in JavaScript?

25. Explain `setTimeout` and `setInterval`.

26. What is the difference between `Object.freeze` and `Object.seal`?

30. What is the `Fetch API`?

31. Explain `localStorage` and `sessionStorage`.

33. What are the differences between `forEach` and `map`?

34. Explain `try...catch` in JavaScript.

35. What is the `EventEmitter` in JavaScript?

38. What is the difference between `apply`, `call`, and `bind`?

42. What is the difference between `setImmediate` and `process.nextTick` in Node.js?

44. What is the difference between `proto` and `prototype`?