JavaScript Interview Questions - The Complete Simple Guide

JavaScript is one of the most asked languages in frontend interviews. This guide covers the 12 most important questions — explained simply, with real code examples.

Q1. What is the difference between var, let, and const?

All three are used to declare variables, but they behave differently.

• var — old way, function-scoped, causes bugs. Avoid it.

• let — block-scoped, value can be changed. Use when value needs to update.

• const — block-scoped, value cannot be reassigned. Use this by default.

let age = 25;
age = 26; // ✅ allowed

const name = "Raj";
name = "Amit"; // ❌ TypeError

Simple rule: Always start with const. Change to let only when needed.

Q2. What is a Closure?

A closure is when an inner function remembers variables from its outer function — even after the outer function has finished running.

Think of it like a backpack. The function carries its surrounding variables wherever it goes.

function makeCounter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const counter = makeCounter();

counter(); // 1
counter(); // 2
counter(); // 3

Closures are often used for data privacy and state management.

Q3. What is the difference between == and === ?

• == compares values after type conversion.

• === compares both value and type.

0 == false; // true

0 === false; // false

null == undefined; // true

null === undefined; // false

Best practice: Always use ===.

Q4. What is null vs undefined?

Both represent absence of value, but for different reasons.

• undefined means a variable has been declared but not assigned.

• null means you intentionally assigned an empty value.

let a;
console.log(a); // undefined

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

typeof a; // "undefined"
typeof b; // "object"

The typeof null behavior is a historical JavaScript bug that remains for compatibility.

Q5. What is the Event Loop?

JavaScript is single-threaded, meaning it executes one task at a time.

The Event Loop allows JavaScript to handle asynchronous operations efficiently.

Process:

1. Code runs in the Call Stack.

2. Async tasks are handled by browser APIs.

3. Completed callbacks enter a queue.

4. Event Loop pushes callbacks back to the Call Stack.

console.log("1");

setTimeout(() => console.log("3"), 0);

Promise.resolve().then(() => console.log("2"));

console.log("4");

Output:

1
4
2
3

Promises execute before setTimeout.

Q6. What is a Promise?

A Promise represents a future value.

States:

• Pending

• Fulfilled

• Rejected

fetch("https://api.example.com/user")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.log(err));

Promises help manage asynchronous code more effectively.

Q7. What is async / await?

async/await is syntactic sugar built on top of Promises.

It makes asynchronous code look synchronous and easier to read.

async function getUser() {
  try {
    const res = await fetch("/api/user");
    const data = await res.json();

    console.log(data);
  } catch (err) {
    console.log(err);
  }
}

Benefits:

• Cleaner code

• Better readability

• Easier error handling

Q8. What does "this" refer to?

The value of this depends on how a function is called.

const user = {
  name: "Dheeraj",

  greet() {
    console.log(this.name);
  }
};

user.greet();

Output:

Dheeraj

Arrow functions do not have their own this.

const user = {
  name: "Priya",

  greetArrow: () => {
    console.log(this.name);
  }
};

This usually produces undefined.

Q9. What is Destructuring?

Destructuring allows extracting values from objects and arrays easily.

Object destructuring:

const user = {
  name: "Raj",
  age: 25
};

const { name, age } = user;

console.log(name);
console.log(age);

Array destructuring:

const [first, second] = [10, 20];

console.log(first);
console.log(second);

It improves readability and reduces repetitive code.

Q10. What are map, filter, and reduce?

These are powerful array methods frequently used in modern JavaScript and React.

map()

Transforms every item.

const nums = [1, 2, 3];

const doubled = nums.map(num => num * 2);

console.log(doubled);

Output:

[2, 4, 6]

filter()

Keeps items matching a condition.

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

const result = nums.filter(num => num > 3);

console.log(result);

Output:

[4, 5]

reduce()

Combines values into a single result.

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

const sum = nums.reduce((acc, curr) => acc + curr, 0);

console.log(sum);

Output:

10

Q11. What is Debounce and Throttle?

Both improve application performance.

Debounce

Waits until the user stops triggering an event before executing.

Common use case: Search bars.

function debounce(fn, delay) {
  let timer;

  return (...args) => {
    clearTimeout(timer);

    timer = setTimeout(() => {
      fn(...args);
    }, delay);
  };
}

Throttle

Limits execution to once every fixed interval.

Common use case: Scroll events.

function throttle(fn, delay) {
  let last = 0;

  return (...args) => {
    const now = Date.now();

    if (now - last >= delay) {
      last = now;
      fn(...args);
    }
  };
}

Q12. What is a Higher-Order Function?

A Higher-Order Function is a function that:

• Takes another function as an argument

• Returns a function

Example:

function multiplyBy(factor) {
  return function (num) {
    return num * factor;
  };
}

const double = multiplyBy(2);

console.log(double(5));

Output:

10

Common Higher-Order Functions:

• map()

• filter()

• reduce()

• setTimeout()

• addEventListener()

Interview Day Tips

• Think out loud while solving problems.

• Ask clarifying questions before coding.

• Focus on readability over clever tricks.

• Explain trade-offs in your approach.

• Stay calm if you don't know an answer immediately.

Interviewers evaluate your problem-solving process, not just the final answer.

Conclusion

JavaScript interviews often focus on a few core concepts repeatedly. Understanding closures, promises, async/await, the event loop, array methods, and scope will help you answer a large percentage of frontend interview questions confidently.

Master these 12 topics, practice coding examples, and you'll be much better prepared for your next JavaScript interview.

Good luck and keep building! 🚀