Top 20 JavaScriptInterview Questions & Answers (2025)

var is function-scoped, gets hoisted with a value of undefined, and can be re-declared. let and const are block-scoped (within {}), are hoisted but not initialised (temporal dead zone), and cannot be re-declared. const additionally prevents reassignment of the variable binding — though the object it points to can still be mutated.

Hoisting is JavaScript's behaviour of moving variable and function declarations to the top of their scope during compilation, before code executes. Function declarations are fully hoisted (callable before they appear). var variables are hoisted and initialised to undefined. let and const are hoisted but remain uninitialised (accessing them before declaration throws a ReferenceError — the temporal dead zone).

A closure is a function that retains access to its outer (enclosing) function's variables even after that outer function has finished executing. JavaScript creates closures every time a function is created. They're used for data privacy (module pattern), factory functions, memoization, and in callbacks/event handlers where you need to 'remember' surrounding context.

JavaScript is single-threaded. The event loop continuously checks: if the call stack is empty, it takes the first task from the callback queue (or microtask queue first) and pushes it onto the stack. Microtasks (Promise callbacks, queueMicrotask) run before macrotasks (setTimeout, setInterval). This is why a resolved Promise callback runs before a setTimeout(fn, 0) callback.

== is the loose equality operator and performs type coercion before comparing — 0 == '0' is true. === is the strict equality operator and returns false if the types differ — 0 === '0' is false. Always prefer === to avoid subtle bugs from unexpected type coercions. The only common exception is null == undefined (both are true with ==).

A Promise represents the eventual result of an asynchronous operation. It has three states: pending, fulfilled (resolved with a value), or rejected (with a reason). You chain .then() for the success case, .catch() for errors, and .finally() to run code regardless. Promise.all() runs multiple promises in parallel; Promise.race() resolves/rejects as soon as one settles.

async/await is syntactic sugar over Promises that lets you write asynchronous code that reads like synchronous code. An async function always returns a Promise. await pauses execution of the async function until the Promise resolves, then returns the resolved value. Use try/catch around await for error handling. It doesn't replace Promises — it's built on top of them.

undefined means a variable has been declared but not assigned a value (also the default return value of functions). null is an intentional assignment meaning 'no value' — you explicitly set something to null to indicate emptiness. typeof undefined === 'undefined' but typeof null === 'object' (a long-standing JS quirk). Use === null or === undefined to check for them specifically.

Every JavaScript object has an internal [[Prototype]] link to another object (or null). When you access a property, JS looks at the object first, then walks up the prototype chain until it finds the property or reaches null. This is how inheritance works in JS — Array.prototype methods like .map() are available on all arrays through this chain.

'this' refers to the object that is executing the current function. In a method, this is the object the method belongs to. In a regular function, this is the global object (or undefined in strict mode). Arrow functions don't have their own this — they inherit it from the enclosing scope. Call, apply, and bind explicitly set what this refers to.

Arrow functions have a shorter syntax and don't bind their own this, arguments, super, or new.target — they inherit these from the surrounding lexical scope. They cannot be used as constructors (no new keyword). They are ideal for callbacks and methods that need to access the parent scope's this, which is why they're heavily used in React.

Destructuring is a syntax that lets you unpack values from arrays or properties from objects into variables. const { name, age } = person; const [first, second] = array;. It supports default values, renaming (const { name: userName } = user), and nested destructuring. Widely used with function parameters, imports, and React props.

The spread operator (...) expands an iterable into individual elements — [...arr1, ...arr2] merges arrays; {...obj1, ...obj2} merges objects (shallow). The rest parameter (...args) collects all remaining function arguments into an array. They use the same ... syntax but in opposite directions: spread expands, rest collects.

When an event fires on a nested element, it goes through two phases: capturing (top-down from document to the target) and bubbling (bottom-up from target back to document). Most event listeners use bubbling by default. Use event.stopPropagation() to prevent the event from traveling further. Event delegation uses bubbling to handle events from many children on a single parent listener.

All three set the value of this explicitly. call(thisArg, arg1, arg2) invokes the function immediately with arguments listed individually. apply(thisArg, [argsArray]) invokes immediately with arguments as an array. bind(thisArg, arg1) returns a new function with this and optionally some arguments pre-set, for later invocation.

ES Modules (ESM) use export and import to share code between files. Named exports: export const foo = ... then import { foo } from './file'. Default exports: export default function then import anything from './file'. Modules are deferred and evaluated once. They're the standard in modern JS, replacing CommonJS (require/module.exports) used in older Node.js code.

Generator functions (function*) can pause execution and resume later. They return a generator object. yield pauses the function and returns a value; the next call to .next() resumes from where it left off. They're useful for lazy evaluation, infinite sequences, and implementing custom iterables. async/await is conceptually built on generators.

map() transforms every element and returns a new array of the same length. filter() returns a new array with only the elements that pass a predicate test. reduce() accumulates all elements into a single value (sum, object, nested array, etc.) using a reducer function and initial accumulator. All three are pure functions that don't mutate the original array.

A WeakMap is like a Map but its keys must be objects and are held weakly — if no other reference to a key object exists, it can be garbage collected along with its entry in the WeakMap. This prevents memory leaks when associating private data with DOM nodes or objects whose lifetime you don't control. WeakMaps are not iterable.

Debouncing delays function execution until after a pause in calls — e.g., wait 300ms after the user stops typing before searching. Throttling limits how often a function can run — e.g., fire at most once every 200ms during scroll. Debounce collapses rapid calls into one at the end; throttle fires at a regular interval during continuous events.