JavaScript interview questions, with clear answers

var is function-scoped and hoisted with the value undefined, so it can be used before the line that declares it, and it ignores block boundaries such as if and for. let and const are block-scoped; they're hoisted into a "temporal dead zone", so using them before their declaration throws a ReferenceError.

const can't be reassigned, but an object or array it holds can still be changed. Default to const, use let when you need to reassign, and avoid var.

A closure is a function that remembers the variables from the scope where it was created, even after that scope has finished running.

function makeCounter() {
  let count = 0
  return () => ++count
}

const next = makeCounter()
next()   // 1
next()   // 2

count stays alive because the returned function still refers to it. Closures power private state, callbacks and function factories.

Before code runs, declarations are processed and effectively moved to the top of their scope. Function declarations are hoisted completely, so you can call them before they appear. var declarations are hoisted but initialised to undefined. let, const and class are hoisted but not initialised, so touching them early throws an error.

console.log(a)   // undefined
var a = 1

console.log(b)   // ReferenceError
let b = 2

=== (strict equality) compares value and type, with no conversion. == converts types first, which produces surprises: 0 == '' is true, '1' == 1 is true and null == undefined is true.

Use === everywhere. The one common exception is x == null, a short way to check for both null and undefined.

this depends on how a function is called, not where it's written:

• As a method, obj.fn(): this is obj.
• As a plain call, fn(): undefined in strict mode (the global object otherwise).
• With new: the newly created object.
• With call, apply or bind: whatever you pass in.
• Arrow functions have no this of their own; they use the this of the surrounding code, which is why they're handy inside callbacks.

JavaScript runs on a single thread with one call stack. Slow operations — timers, network requests — are handed to the browser or Node.js, and their callbacks are queued when they finish. The event loop moves queued callbacks onto the stack whenever it's empty. Microtasks, such as promise callbacks, run before the next macrotask, such as a setTimeout callback.

console.log('A')
setTimeout(() => console.log('B'), 0)
Promise.resolve().then(() => console.log('C'))
console.log('D')
// A, D, C, B

A Promise represents a value that will be available later. It starts pending, then is either fulfilled with a value or rejected with an error. You react with .then(), .catch() and .finally(), chaining steps instead of nesting callbacks.

Useful helpers: Promise.all waits for all and fails as soon as one rejects; Promise.allSettled waits for all and reports each result; Promise.race settles with the first to finish; and Promise.any resolves with the first to succeed.

async makes a function return a Promise. await pauses that function until a Promise settles, without blocking the main thread, so asynchronous code reads like ordinary step-by-step code:

async function loadUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`)
    if (!res.ok) throw new Error(`HTTP ${res.status}`)
    return await res.json()
  } catch (err) {
    console.error('Could not load the user', err)
    return null
  }
}

Errors are handled with try and catch. To run independent requests in parallel, start them together and await Promise.all([...]) rather than awaiting each one in turn.

undefined means no value has been assigned: a declared variable without a value, a missing object property, or a function that returns nothing. null is a deliberate "no value" that you assign yourself.

typeof undefined is 'undefined', while typeof null is 'object' — a long-standing quirk of the language. The two are loosely equal (null == undefined) but not strictly equal.

Arrow functions are a shorter syntax, like const double = n => n * 2. More importantly, they don't have their own this, arguments or super — they use the ones from the surrounding scope — they can't be called with new, and they have no prototype. That makes them ideal for callbacks, and a poor choice for object methods that need this.

Every JavaScript object has an internal link to another object, its prototype. When you read a property the object doesn't have, JavaScript looks along this prototype chain until it finds it or reaches null.

Classes (class Dog extends Animal) are a cleaner syntax on top of the same mechanism: methods live on Animal.prototype, and every instance shares them through the chain instead of holding its own copy.

Instead of adding a listener to every child element, you add one listener to a common parent and use event.target to work out which child was clicked. It works because events bubble up the DOM.

document.querySelector('#list').addEventListener('click', (e) => {
  const item = e.target.closest('li')
  if (item) console.log('Clicked', item.dataset.id)
})

It saves memory, and it automatically covers elements added to the list later.

Both limit how often a function runs. Debouncing waits until the events have stopped for a set time and then runs once — good for search-as-you-type, where you call the API 300 ms after the user stops typing. Throttling runs the function at most once per interval while the events keep coming — good for scroll and resize handlers. Both protect the browser and the server from floods of calls.

All three take a callback and leave the original array unchanged. map transforms every element into a new array of the same length; filter keeps the elements for which the callback returns true; reduce combines all the elements into a single value.

const prices = [100, 250, 40]

prices.map(p => p * 1.18)              // add 18% tax
prices.filter(p => p > 50)             // [100, 250]
prices.reduce((sum, p) => sum + p, 0)  // 390

Both are written .... Spread expands an iterable or object: [...a, ...b] merges two arrays, and { ...user, name: 'Asha' } copies an object with one change (a shallow copy). Rest gathers the remaining items: function sum(...nums) collects the arguments into an array, and const { id, ...others } = user collects the other properties.

localStorage keeps data for a site with no expiry until it's cleared; sessionStorage keeps it only for the current tab's session. Both hold a few megabytes, can only be read by JavaScript and are never sent to the server automatically.

Cookies are small (about 4 KB), are sent with every request to their domain, can expire, and can be marked HttpOnly (unreadable by JavaScript) and Secure. That's why login sessions usually live in HttpOnly cookies rather than in localStorage.