Top 30 JavaScript Interview Questions & Answers

1. What is JavaScript?

JavaScript is a high-level, interpreted language used to create dynamic and interactive web content. Runs in browsers and on servers via Node.js.

console.log("Hello, JavaScript!");

2. Difference between var, let, and const

• var: function-scoped, can be redeclared

• let: block-scoped, can be updated but not redeclared

• const: block-scoped, cannot be updated

var x = 10;
let y = 20;
const z = 30;

3. Data types in JavaScript

• Primitive: string, number, boolean, undefined, null, symbol, bigint

• Non-primitive: object, array, function

4. undefined vs null

• undefined: variable declared but not assigned

• null: explicit empty value

let a;
console.log(a); // undefined
let b = null;
console.log(b); // null

5. typeof operator

Returns the type of a variable:

console.log(typeof 42); // number
console.log(typeof "Hello"); // string

6. Template literals

Allows embedded expressions and multi-line strings:

let name = "Alice";
console.log(`Hello, ${name}!`);

7. Difference between == and ===

• ==: value comparison (with type coercion)

• ===: strict comparison (no type coercion)

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

8. Is JavaScript dynamically typed?

Yes. Variables can hold any type and types are checked at runtime.

let x = 10;
x = "Hello"; // valid

9. What is NaN?

Represents "Not-a-Number", usually from invalid math operations.

console.log(0/0); // NaN

10. What is console.log() used for?

For debugging and printing values to the console.

Medium Questions (11–20)

11. Explain closures

A closure remembers variables from its outer scope even after the outer function finishes.

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

12. Higher-order functions

Functions that take another function as an argument or return one.

function greet(fn) {
  fn("Alice");
}
greet(name => console.log(`Hello, ${name}`));

13. Difference between call(), apply(), bind()

• call: calls function with this and arguments separately

• apply: calls function with this and arguments as array

• bind: returns new function with bound this

function greet(message) {
  console.log(`${message}, ${this.name}`);
}
const person = { name: "Alice" };
greet.call(person, "Hi");   // Hi, Alice
greet.apply(person, ["Hello"]); // Hello, Alice
const bound = greet.bind(person);
bound("Hey"); // Hey, Alice

14. Event loop

JavaScript is single-threaded. The event loop manages async callbacks.

console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
console.log("End");
// Output: Start, End, Timeout

15. Difference between for...in and for...of

• for...in: iterates over keys

• for...of: iterates over values

let arr = [10,20];
for (let index in arr) console.log(index); // 0,1
for (let value of arr) console.log(value); // 10,20

16. Destructuring assignment

Unpacks arrays or objects into variables.

const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name, age); // Alice 25

17. Spread operator

Expands iterable elements into individual elements.

const arr = [1,2,3];
const arr2 = [...arr,4,5];
console.log(arr2); // [1,2,3,4,5]

18. Promises

Represent eventual completion/failure of async operations.

const p = new Promise((resolve, reject) => resolve("Done"));
p.then(console.log); // Done

19. Async/Await

Simplifies working with promises.

async function fetchData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const data = await res.json();
  console.log(data);
}
fetchData();

20. Memoization

Caches function results to optimize performance.

const memo = {};
function addTo256(n) {
  if(memo[n]) return memo[n];
  return memo[n] = n + 256;
}
console.log(addTo256(10)); // 266

Difficult Questions (21–30)

21. Currying

Converts a function with multiple arguments into nested single-argument functions.

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

22. Prototype vs __proto__

• prototype: object assigned to a function for inheritance

• __proto__: actual object reference for an instance

23. new keyword

Creates a new object, sets prototype, binds this, returns object.

function Person(name) { this.name = name; }
const alice = new Person("Alice");

24. Shallow vs deep copy

• Shallow: copies reference only

• Deep: copies all nested objects

const obj = { a: { b: 1 } };
const shallow = {...obj};
const deep = JSON.parse(JSON.stringify(obj));

25. WeakMap & WeakSet

Objects are garbage-collected if no other reference exists.

const wm = new WeakMap();
let obj = {};
wm.set(obj, "value");
obj = null; // object eligible for GC

26. Debouncing vs Throttling

• Debounce: triggers function after delay of inactivity

• Throttle: triggers function at intervals

27. Event delegation

Attaching a single event listener to a parent for child elements.

document.getElementById('parent').addEventListener('click', e => {
  if(e.target && e.target.nodeName == "BUTTON") console.log(e.target.id);
});

28. Generator functions

Functions that can pause execution using yield.

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

29. Proxy

Intercept fundamental operations on objects.

const obj = {};
const proxy = new Proxy(obj, {
  set(target, prop, value) {
    console.log(`${prop} set to ${value}`);
    target[prop] = value;
  }
});
proxy.a = 10; // a set to 10

30. Memory leaks

Caused by closures, forgotten timers, detached DOM nodes.

let el = document.getElementById('btn');
function attach() { el.onclick = () => console.log('clicked'); }
attach();
// If el is removed without clearing handler -> memory leak