JavaScript Interview Questions and Answers

JavaScript has seven primitive types and one non-primitive type:

• Primitives: string, number, bigint, boolean, undefined, null and symbol
• Non-primitive: object, which includes arrays, functions, dates and everything else

Primitives are immutable and compared by value. Objects are compared by reference: two objects with the same contents are still different objects.

You can check a type with typeof. Watch for two famous surprises: typeof null is "object", a bug from the first version of JavaScript that was never fixed, and arrays also report "object".

console.log(typeof 42);
console.log(typeof "hi");
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);
console.log(typeof 10n);
console.log(typeof Symbol("id"));
console.log(typeof []);
console.log(typeof function () {});

number
string
boolean
undefined
object
bigint
symbol
object
function

To check for an array, use Array.isArray(value). To check for null, use value === null.

Likely follow-up: How would you reliably check if a value is a plain object?

All three declare variables, but they differ in scope, hoisting and reassignment:

• var is function-scoped. It ignores blocks like if and for, and it can be redeclared.
• let is block-scoped and can be reassigned.
• const is block-scoped and can't be reassigned. It must be given a value straight away.

const makes the binding constant, not the value. You can still change the contents of a const object or array.

function scopes() {
  if (true) {
    var a = 1;
    let b = 2;
    const c = 3;
  }
  console.log(a);
  console.log(typeof b);
  console.log(typeof c);
}
scopes();

const user = { name: "Priya" };
user.name = "Rahul";
console.log(user.name);

1
undefined
undefined
Rahul

a leaks out of the if block because var only respects function scope. b and c don't exist outside the block.

Likely follow-up: Why does const allow you to push into an array?

A closure is a function together with the variables from the scope where it was created. The function keeps access to those variables even after the outer function has finished running.

Closures are how JavaScript gives you private state: the variable can only be reached through the functions that closed over it.

function createCounter() {
  let count = 0;
  return {
    increment() {
      count++;
      return count;
    },
    get() {
      return count;
    },
  };
}

const counter = createCounter();
counter.increment();
counter.increment();
console.log(counter.get());
console.log(counter.count);

2
undefined

count lives on after createCounter returns, but nothing outside can read or change it directly. That's why counter.count is undefined.

Closures are everywhere: event handlers, setTimeout callbacks, React hooks, and helpers like debounce and once.

Likely follow-up: Can closures cause memory leaks?

This is one of the most asked output questions. Each setTimeout callback runs after the loop has finished.

• With var, there is one i for the whole function. When the callbacks run, it's already 3.
• With let, each loop iteration gets its own new binding of j, so each callback remembers its own value.

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log("var:", i), 0);
}

for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log("let:", j), 0);
}

var: 3
var: 3
var: 3
let: 0
let: 1
let: 2

Before let existed, the fix was an IIFE that captured the value: (function (i) { setTimeout(() => console.log(i)); })(i).

Likely follow-up: How would you fix the var version without using let?

Every JavaScript object has a hidden link to another object, its prototype. When you read a property that the object doesn't have, JavaScript looks it up on the prototype, then that object's prototype, and so on. This is the prototype chain, and it ends at null.

That's how all arrays get map and filter: they live once on Array.prototype, not on every array.

const animal = {
  eats: true,
  describe() {
    return `${this.name} eats: ${this.eats}`;
  },
};

const dog = Object.create(animal);
dog.name = "Bruno";

console.log(dog.describe());
console.log(Object.getPrototypeOf(dog) === animal);
console.log(dog.hasOwnProperty("eats"));
console.log("eats" in dog);

Bruno eats: true
true
false
true

hasOwnProperty only checks the object itself, while in also searches the prototype chain.

Likely follow-up: What is the difference between __proto__ and prototype?

Classes are cleaner syntax over prototypes, not a new inheritance system. class gives you:

• a constructor for setting up new objects
• methods that are stored on the prototype and shared by all instances
• extends and super for inheritance
• getters and setters, static members, and truly private fields with #

class Employee {
  #salary;
  constructor(name, salary) {
    this.name = name;
    this.#salary = salary;
  }
  describe() {
    return `${this.name} works here`;
  }
  get annualSalary() {
    return this.#salary * 12;
  }
}

class Manager extends Employee {
  constructor(name, salary, teamSize) {
    super(name, salary);
    this.teamSize = teamSize;
  }
  describe() {
    return `${super.describe()} and leads ${this.teamSize} people`;
  }
}

const manager = new Manager("Neha", 100000, 6);
console.log(manager.describe());
console.log(manager.annualSalary);
console.log(typeof Manager);
console.log(Object.getPrototypeOf(Manager.prototype) === Employee.prototype);

Neha works here and leads 6 people
1200000
function
true

typeof Manager is "function", which shows a class is still a constructor function underneath. In a subclass, you must call super() before using this.

Likely follow-up: What happens if you use this before calling super() in a subclass?

JavaScript runs on a single thread, so it can only do one thing at a time. The event loop is how it still handles timers, network requests and clicks without freezing:

• The call stack runs your synchronous code.
• Slow work (timers, fetch, file reads) is handed to the browser or Node.js, which runs it in the background.
• When that work finishes, its callback waits in a queue.
• Whenever the call stack is empty, the event loop moves the next callback onto the stack.

There are two queues. Microtasks (promise callbacks, queueMicrotask) run as soon as the current code finishes, before anything else. Macrotasks (setTimeout, I/O, events) run one per loop turn.

console.log("1: start");
setTimeout(() => console.log("4: timeout"), 0);
Promise.resolve().then(() => console.log("3: promise"));
console.log("2: end");

1: start
2: end
3: promise
4: timeout

Even with a delay of 0, the timeout runs last, because promise callbacks are microtasks and always go first.

Likely follow-up: What happens to the page if a single task runs for five seconds?

A Promise is an object representing a value that will be available later. It's always in one of three states:

• pending: still waiting
• fulfilled: finished successfully, with a value
• rejected: failed, with a reason (usually an Error)

Once a promise is fulfilled or rejected it is settled, and it can never change again. You react to it with .then() for success, .catch() for errors and .finally() for code that runs either way.

function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) resolve({ id, name: "Asha" });
      else reject(new Error("Invalid id"));
    }, 100);
  });
}

fetchUser(1)
  .then((user) => console.log("Got", user.name))
  .catch((error) => console.log("Failed:", error.message));

fetchUser(-1)
  .then((user) => console.log("Got", user.name))
  .catch((error) => console.log("Failed:", error.message))
  .finally(() => console.log("Done"));

Got Asha
Failed: Invalid id
Done

Promises replaced deeply nested callbacks ("callback hell"): .then() returns a new promise, so steps can be chained in a flat line.

Likely follow-up: What happens if you forget to return a promise inside .then()?

Both use ..., but they do opposite jobs:

• Spread expands an array or object into individual elements: in function calls, array literals and object literals.
• Rest collects several elements into one array or object: in function parameters and destructuring.

A simple way to tell them apart: spread is on the right side, giving values out; rest is on the left, gathering values in.

function total(...prices) {
  return prices.reduce((sum, price) => sum + price, 0);
}

const cart = [299, 149];
console.log(total(...cart, 199));

const [first, ...others] = ["js", "react", "sql"];
console.log(first, others.length);

const defaults = { theme: "dark", lang: "en" };
console.log(JSON.stringify({ ...defaults, lang: "hi" }));

647
js 2
{"theme":"dark","lang":"hi"}

With object spread, later properties win, which makes it perfect for "defaults plus overrides".

Likely follow-up: Does object spread make a deep copy?

Destructuring pulls values out of arrays or objects into variables in one step. It supports:

• renaming: { city: location }
• default values: { error = "none" }, used when the value is undefined
• nesting: reaching into objects inside objects
• swapping variables without a temporary one

const response = { data: { user: { name: "Asha", city: "Pune" } }, status: 200 };

const {
  data: {
    user: { name, city: location },
  },
  status,
  error = "none",
} = response;
console.log(name, location, status, error);

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b);

function greet({ name = "Guest", greeting = "Hello" } = {}) {
  return `${greeting}, ${name}`;
}
console.log(greet());
console.log(greet({ name: "Ravi" }));

Asha Pune 200 none
2 1
Hello, Guest
Hello, Ravi

The = {} in greet matters: without it, calling greet() with no argument would throw, because you can't destructure undefined.

Likely follow-up: Do default values apply when a property is null?

The shortest answer converts the string to an array, reverses it and joins it back. Interviewers often then ask you to do it without built-in helpers, so know the loop version too.

const reverse = (text) => [...text].reverse().join("");

function reverseWithLoop(text) {
  let result = "";
  for (let i = text.length - 1; i >= 0; i--) {
    result += text[i];
  }
  return result;
}

console.log(reverse("CareerKit"));
console.log(reverseWithLoop("hello"));
console.log(reverse("नमस्ते").length === "नमस्ते".length);

tiKreeraC
olleh
true

Using spread ([...text]) instead of text.split("") splits by Unicode characters, so emoji aren't broken in half. Time complexity is O(n) for both versions.

Likely follow-up: How would you reverse the order of words in a sentence instead?

A palindrome reads the same backwards. A robust answer first normalises the input (lowercase, keep only letters and digits), then compares characters from both ends with two pointers, which avoids creating a reversed copy.

function isPalindrome(text) {
  const clean = text.toLowerCase().replace(/[^a-z0-9]/g, "");
  let left = 0;
  let right = clean.length - 1;
  while (left < right) {
    if (clean[left] !== clean[right]) return false;
    left++;
    right--;
  }
  return true;
}

console.log(isPalindrome("madam"));
console.log(isPalindrome("A man, a plan, a canal: Panama"));
console.log(isPalindrome("CareerKit"));
console.log(isPalindrome(""));

true
true
false
true

Time O(n), extra space O(n) for the cleaned string (O(1) if you skip invalid characters with the pointers instead).

Likely follow-up: How would you check if a number is a palindrome without converting it to a string?