Question 1

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

Accepted Answer

In short: === (strict equality) compares type and value without conversion. == (loose equality) converts operands to a common type first, which produces surprises ( == 0 is true, null == undefined is true, [] == false is true). Always use === (except, by some style guides, x == null to check null or undefined).

Question 2

What is the difference between var, let and const?

Accepted Answer

In short: var is function-scoped, hoisted and initialised as undefined , can be re-declared, and creates a property on the global object at top level. let and const are block-scoped and hoisted but in the Temporal Dead Zone until their declaration (accessing them earlier throws). Neither can be re-declared in the same scope. const can t be reassigned, but the object it references can still be mutated. Default to const , use let when reassigning, avoid var .

Question 3

What is hoisting?

Accepted Answer

In short: During the creation phase of an execution context, declarations are registered before code runs. var variables are hoisted and initialised to undefined . Function declarations are hoisted with their body (callable before the line they appear on). let , const and class are hoisted but uninitialised (TDZ → ReferenceError if used early). Function expressions and arrow functions follow the rules of the variable they re assigned to.

Question 4

What are the primitive data types in JavaScript?

Accepted Answer

In short: string , number , bigint , boolean , undefined , null and symbol . They are immutable and compared by value. Everything else (objects, arrays, functions, dates) is an object compared by reference. typeof null returns object due to a historical bug.

Question 5

What is the difference between null and undefined?

Accepted Answer

In short: undefined means a variable has been declared but not assigned, a missing property, or a function with no return value — set by the engine. null is an intentional no value assigned by the programmer. typeof undefined is undefined , typeof null is object ; null == undefined is true but null === undefined is false. ?? and ?. treat both as nullish.

Question 6

What are arrow functions and how are they different from regular functions?

Accepted Answer

In short: A concise function syntax ( x = x * 2 ). Differences: no own this (lexically inherited — great for callbacks), no arguments object, can t be used as constructors with new , no prototype , and implicit return for single expressions. Don t use them as object methods or prototype methods that need dynamic this .

Question 7

What is a closure? Give a practical example.

Accepted Answer

In short: A closure is a function that remembers the variables from the scope where it was created, even after that scope has finished executing. Example: function counter() { let c = 0; return () = ++c; } — each returned function has its own private c . Practical uses: data privacy, function factories, memoisation caches, debounce/throttle timers, partial application, event handlers capturing loop values (with let ).

Question 8

Explain the event loop.

Accepted Answer

In short: JavaScript executes on a single thread with a call stack. Asynchronous operations (timers, network, events) are handled by the browser/Node APIs, which queue callbacks when done. When the call stack is empty, the event loop first runs all microtasks (promise reactions, queueMicrotask ), then (in browsers) lets rendering happen, then picks the next macrotask (setTimeout, I/O, UI events). That s why a resolved promise s .then runs before a setTimeout(..., 0) callback.

Question 9

What is a Promise? Explain Promise.all, allSettled, race and any.

Accepted Answer

In short: A Promise represents the eventual result of an asynchronous operation, in state pending, fulfilled or rejected; .then/.catch/.finally register reactions. Promise.all waits for all and rejects on the first failure. allSettled waits for all and returns each outcome. race settles with the first settled promise (success or failure). any fulfils with the first success and rejects with AggregateError only if all fail.

Question 10

How does this work in JavaScript?

Accepted Answer

In short: It depends on the call site: method call → the object before the dot; plain function call → undefined in strict mode (global object otherwise); constructor with new → the new instance; call/apply/bind → explicitly set; event listeners with regular functions → the element; arrow functions → this of the enclosing lexical scope. Losing this when passing methods as callbacks is fixed with bind or arrow functions.

Question 11

What is the difference between call, apply and bind?

Accepted Answer

In short: All set this explicitly. call(thisArg, a, b) invokes immediately with individual arguments. apply(thisArg, [a, b]) invokes immediately with an array of arguments. bind(thisArg, a) doesn t invoke — it returns a new function with this (and optionally leading arguments) permanently bound, useful for callbacks and event handlers.

Question 12

What is prototypal inheritance?

Accepted Answer

In short: Objects inherit directly from other objects through the internal [[Prototype]] link. When a property isn t found on an object, the engine looks up its prototype chain. Constructor functions share methods via Constructor.prototype ; Object.create(proto) creates objects with a chosen prototype; ES6 class / extends is syntax over the same mechanism ( Dog.prototype.__proto__ === Animal.prototype ).

Question 13

What is event delegation and why use it?

Accepted Answer

In short: Attaching a single event listener to a common ancestor instead of each child, using event bubbling and event.target (often with closest() ) to identify which child was interacted with. Benefits: fewer listeners (memory/performance), works for elements added later dynamically, simpler cleanup. Note: some events don t bubble ( focus , blur — use focusin / focusout ).

Question 14

Debounce vs throttle — implement one.

Accepted Answer

Debounce delays execution until calls stop for a given time (search-as-you-type, auto-save, resize end). Throttle guarantees execution at most once per interval (scroll position, mousemove, rate-limited API calls). js Copy const debounce = ( fn, ms ) = { let t; return ( ...a ) = { clearTimeout (t); t = setTimeout ( () = fn (...a), ms); }; }; const throttle = ( fn, ms ) = { let last = 0 ; return ( ...a ) = { const now = Date . now (); if (now - last = ms) { last = now; fn (...a); } }; };

Question 15

What causes memory leaks in JavaScript and how do you find them?

Accepted Answer

In short: Unremoved event listeners and timers ( setInterval never cleared), references to detached DOM nodes, accidental globals, closures capturing large objects, ever-growing caches/maps, and subscriptions not unsubscribed in SPA components. Find them with Chrome DevTools: Performance monitor (JS heap growing), Memory tab heap snapshots compared over time, Detached elements panel, and allocation timelines. Fix with cleanup on unmount, WeakMap / WeakRef for metadata, and bounded caches.

Question 16

A search box calls the API on every keystroke and floods the server. How do you fix it?

Accepted Answer

In short: Debounce the input (e.g. 300 ms) so the request fires only after typing pauses; ignore queries shorter than 2–3 characters; cancel the previous in-flight request with AbortController so stale responses don t overwrite newer results (or track the latest request id); cache recent results; show a loading state. On the server, add rate limiting and make the search endpoint efficient (indexes, paging).

Question 17

A page becomes unresponsive while processing a 50 MB JSON file in the browser. What do you do?

Accepted Answer

In short: The main thread is blocked by long synchronous work. Move parsing/processing into a Web Worker (postMessage the data or a File/Blob, return results); stream the file with ReadableStream / process in chunks; better, process it on the server and fetch paginated or aggregated results; virtualise large lists when rendering; show progress. Measure with the DevTools Performance panel (long tasks).

Question 18

What is TypeScript and why use it over JavaScript?

Accepted Answer

In short: A typed superset of JavaScript that compiles to plain JavaScript. Static types catch errors at compile time, give IntelliSense and safe refactoring, document APIs and scale better for large teams. Types are erased at runtime, so there is no runtime cost — and no runtime checking.

Question 19

What is the difference between interface and type?

Accepted Answer

In short: Both describe object shapes. type can also name unions, intersections, tuples, primitives and mapped/conditional types; interface supports declaration merging and extends , and is often preferred for public object contracts. Interfaces can t express unions; types can t be reopened.

Question 20

any vs unknown vs never?

Accepted Answer

In short: any disables type checking for that value (errors pass silently). unknown accepts any value but must be narrowed (typeof/guards/schema) before use — the safe choice for external data and catch errors. never represents values that never occur — functions that always throw, or the impossible branch in an exhaustive switch.

Question 21

What are union types and how do you narrow them?

Accepted Answer

In short: A union A | B means the value is one of several types. Narrow with typeof , instanceof , in , equality on a discriminant property ( kind ), truthiness, or custom type guards ( x is T ) so TypeScript knows which member you have in each branch.

Question 22

What are generics? Give an example.

Accepted Answer

In short: Type parameters that make code reusable while keeping types: function first T (xs: T[]): T | undefined . With constraints ( T extends { id: number } ) and keyof ( K extends keyof T ) you get type-safe helpers such as pluck(items, name ) . Common built-ins: Array T , Promise T , Record K,V .

Question 23

Explain Partial, Pick, Omit and Record with use cases.

Accepted Answer

In short: Partial T makes all props optional (update/PATCH payloads). Pick T,K keeps chosen keys (summary DTO). Omit T,K removes keys (create payload without id ). Record K,V builds an object type with keys K (lookup tables like Record Status, string ).

Question 24

What does strict mode enable and why should it be on?

Accepted Answer

In short: strict: true enables noImplicitAny , strictNullChecks , strictFunctionTypes , strictBindCallApply , strictPropertyInitialization , alwaysStrict , useUnknownInCatchVariables and others. It catches the most common bugs — especially null/undefined access. New projects should always use it; legacy projects can turn flags on gradually.

Question 25

What is a discriminated union?

Accepted Answer

In short: A union of object types that share a literal tag property ( kind , type , status ). Switching on the tag narrows to the exact member, and a never check in default makes the switch exhaustive — adding a new member produces compile errors wherever it isn t handled. Ideal for state ( { status: loading } | { status: error ; error: string } | { status: ok ; data: T } ) and Redux/NgRx actions.

Question 26

The API returned a different JSON shape and the app crashed even though it compiled. Why, and how do you prevent it?

Accepted Answer

In short: Types are erased at runtime; http.get Order[] () or as Order[] only told the compiler what to expect. Prevent: generate client types from the backend OpenAPI document in the build (so contract changes show up as compile errors), validate responses at the boundary with Zod/Valibot, version the API, and add contract/end-to-end tests.

Question 27

What is Node.js and why is it fast for I/O-heavy apps?

Accepted Answer

In short: A JavaScript runtime built on Chrome s V8 engine and libuv. It runs your JavaScript on a single main thread with an event loop and performs I/O (network, disk) asynchronously, so while one request waits for the database the thread serves other requests. Without thread-per-request overhead it handles many concurrent connections efficiently — ideal for APIs, proxies and real-time apps.

Question 28

Explain the event loop in Node.js.

Accepted Answer

In short: The event loop is libuv s loop that repeatedly checks for completed work and runs callbacks on the main thread in phases: timers (setTimeout/setInterval), pending callbacks, poll (I/O events), check (setImmediate), close callbacks. Between callbacks Node drains the process.nextTick queue and then the promise microtask queue. Blocking the loop with long synchronous code delays every other request.

Question 29

Is Node.js single-threaded?

Accepted Answer

In short: Your JavaScript runs on one main thread, but Node itself is not: libuv uses a thread pool (default 4) for file system, DNS lookup, crypto and compression, and the OS handles network I/O asynchronously. You can also use worker threads for CPU-heavy JavaScript and the cluster module or multiple containers to use all CPU cores.

Question 30

What is the difference between CommonJS and ES modules?

Accepted Answer

In short: CommonJS uses require() / module.exports , loads synchronously at runtime and was Node s original system. ES modules use import / export , are statically analysable (tree-shaking), support top-level await and are the JavaScript standard — enabled with .mjs or type : module . Modern Node supports both and recent versions can require() ES modules.

Question 31

What is middleware in Express?

Accepted Answer

In short: A function (req, res, next) in the request pipeline that can read/modify the request and response, end the response, or call next() to pass control on. Used for logging, parsing bodies, authentication, CORS, validation and error handling (error middleware has four parameters (err, req, res, next) ). Middleware runs in the order it s registered.

Question 32

process.nextTick vs setImmediate vs setTimeout(fn, 0)?

Accepted Answer

In short: process.nextTick callbacks run immediately after the current operation, before promise microtasks and before the event loop continues. setTimeout(fn, 0) runs in the timers phase of a later loop iteration (minimum ~1 ms). setImmediate runs in the check phase right after the poll phase. Inside an I/O callback, setImmediate always fires before a zero timeout. Overusing nextTick can starve I/O.

Question 33

How do you handle errors in async Node.js code?

Accepted Answer

In short: Use try/catch around await , .catch() on promises, and error-first callbacks for callback APIs. In Express 5 rejected async handlers reach the error middleware automatically (Express 4: wrap or use express-async-errors). Add a central error middleware, log unhandledRejection and uncaughtException (then exit and let the process manager restart), validate input to avoid predictable errors, and never swallow errors silently.

Question 34

How do you connect Node.js to SQL Server?

Accepted Answer

In short: Use the mssql package (tedious driver): create one ConnectionPool at startup with server, database, credentials and encrypt: true , then run parameterised queries with request().input(...).query(...) , stored procedures with .execute() , and transactions with sql.Transaction . Alternatives: Prisma ( provider = sqlserver ) or Sequelize/TypeORM. Keep credentials in environment variables or use Entra ID authentication for Azure SQL.

Question 35

What are streams and why are they useful?

Accepted Answer

In short: Objects for reading or writing data in chunks (Readable, Writable, Duplex, Transform). They keep memory constant for large files or responses, start delivering data before everything is loaded, and handle backpressure. Use stream.pipeline to connect streams with proper error handling — e.g. read a CSV, gzip it, write it to the HTTP response.

Question 36

What causes event-loop blocking and how do you detect and fix it?

Accepted Answer

In short: Long synchronous operations: big loops, synchronous fs/crypto ( readFileSync , pbkdf2Sync ), huge JSON.parse/stringify , regex catastrophes, sorting large arrays per request. Detect with event-loop lag metrics ( perf_hooks.monitorEventLoopDelay ), clinic.js, profiling with --inspect / --prof . Fix by using async APIs, streaming, chunking work with setImmediate , moving CPU work to worker threads or another service, and caching results.

Question 37

Your Node API becomes very slow when a user uploads a large CSV for import. What's wrong and how do you fix it?

Accepted Answer

In short: The upload is probably read and parsed synchronously in memory ( readFileSync , JSON/CSV parse of the whole file) on the main thread, blocking the event loop for all users. Stream the upload (multer/busboy to disk or Blob storage), parse it with a streaming CSV parser, insert in batches (bulk insert/TVP), and ideally move the import to a background job/queue with a worker, returning 202 Accepted and a status endpoint.

Question 38

What is Next.js and how is it different from React?

Accepted Answer

In short: React is a library for building UI components. Next.js is a React framework that adds file-based routing, server-side and static rendering, Server Components, data fetching and caching, API endpoints (route handlers, Server Actions), image/font optimisation, SEO metadata and production build/deployment tooling. It produces full HTML from the server, improving SEO and first load.

Question 39

Explain the App Router folder structure and special files.

Accepted Answer

In short: Folders inside app/ map to URL segments; a segment becomes routable with page.tsx (UI) or route.ts (API). layout.tsx wraps child pages and persists across navigation; loading.tsx is the Suspense fallback; error.tsx is the error boundary; not-found.tsx shows 404s. [id] is a dynamic segment, [...slug] catch-all, (group) organises without affecting URLs, _folder is private.

Question 40

What are Server Components and Client Components?

Accepted Answer

In short: Server Components (default in the App Router) render on the server, can be async and access databases/secrets directly, and send no JavaScript to the browser. Client Components ( use client ) are hydrated in the browser and can use state, effects and event handlers. Use server by default and client only for interactive parts.

Question 41

What rendering strategies does Next.js support?

Accepted Answer

In short: Static generation at build time (with generateStaticParams ), Incremental Static Regeneration (time-based revalidate or on-demand revalidatePath/Tag ), dynamic server rendering per request, streaming with Suspense, Partial Prerendering/Cache Components (static shell + dynamic holes), and client-side rendering inside Client Components. Choose per page/component based on how fresh and personalised the data must be.

Question 42

What are Server Actions and what must you be careful about?

Accepted Answer

In short: Async functions marked use server that run on the server and can be called from forms ( form action={fn} ) or client code, used for mutations without writing API routes; they integrate with revalidation and redirects and work without JavaScript. Careful: each action is effectively a public HTTP endpoint — always authenticate, authorise and validate input inside it, and don t return sensitive data.

Question 43

How do you connect Next.js to SQL Server safely?

Accepted Answer

In short: Only from server code — Server Components, Server Actions and route handlers on the Node.js runtime — using mssql (one shared connection pool kept on globalThis in development) or Prisma with the sqlserver provider; mark modules import server-only , keep credentials in environment variables, use parameterised queries, and keep the database close to the hosting region. Alternatively call an ASP.NET Core API that owns the database.

Question 44

A product listing page is slow because it queries SQL Server on every request, but prices change only once a day. What do you do?

Accepted Answer

In short: Make it static or cached: use generateStaticParams + revalidate = 86400 (ISR) or cache the query function ( use cache with a cache life / unstable_cache in older versions), and call revalidatePath( /products ) or revalidateTag from the admin update action so changes appear immediately. Add proper indexes for the query, and keep only truly personalised parts (cart badge) dynamic.

Question 45

What is React and what are its main features?

Accepted Answer

In short: React is a JavaScript library (by Meta, 2013) for building user interfaces with reusable components. Features: declarative UI, component-based architecture, JSX, one-way data flow via props, state with hooks, efficient updates via reconciliation (virtual DOM diffing), a huge ecosystem, and React Native for mobile. It focuses on the view layer; routing, data fetching and SSR come from libraries or frameworks like Next.js.

Question 46

What is JSX?

Accepted Answer

In short: JSX is a syntax extension that looks like HTML inside JavaScript. A compiler (Babel, SWC, esbuild) turns it into function calls ( jsx( div , props) / React.createElement ) that create React elements. It supports embedding expressions in {} , uses className /camelCase attributes, and escapes values by default to prevent XSS. It s optional but universal.

Question 47

What is the virtual DOM and reconciliation?

Accepted Answer

In short: The virtual DOM is a lightweight in-memory tree of React elements describing the UI. On each render React creates a new tree, diffs it against the previous one (reconciliation) using heuristics — elements of a different type are replaced, same-type elements are updated, keys identify list items — and applies only the minimal changes to the real DOM in the commit phase. Fiber (React 16+) made this work interruptible and prioritised.

Question 48

What is the difference between props and state?

Accepted Answer

In short: Props are inputs passed from parent to child; they re read-only for the child. State is data owned and managed by a component ( useState / useReducer ) that changes over time and triggers re-renders when updated. A parent s state often becomes a child s props. Data flows down via props; children request changes via callback props.

Question 49

Why are keys important in lists?

Accepted Answer

In short: Keys give each list item a stable identity so React can match elements between renders and update, move or remove the right DOM nodes and preserve component state. Without good keys (or with array indexes when the list changes order), React may reuse the wrong component instance, causing bugs like inputs showing the wrong values and unnecessary re-renders. Use unique IDs from data; keys need to be unique only among siblings.

Question 50

Explain useEffect and its dependency array. How do you clean up?

Accepted Answer

In short: useEffect(fn, deps) runs side effects (data fetching, subscriptions, timers, DOM APIs) after the component commits. With no deps it runs after every render; with [] once after mount; with [a, b] when those values change. Return a cleanup function from the effect to unsubscribe, clear timers or abort fetches — React runs it before re-running the effect and on unmount. Missing dependencies cause stale values; the ESLint hooks rule helps.

Question 51

What are the Rules of Hooks and why do they exist?

Accepted Answer

In short: Only call hooks at the top level of React function components or custom hooks — never inside loops, conditions, nested functions or after early returns — and only from React functions. React stores hook state in an ordered list per component and relies on the call order being identical on every render to match each useState / useEffect with its stored data.

Question 52

useMemo vs useCallback vs React.memo?

Accepted Answer

In short: useMemo(() = compute(a, b), [a, b]) caches the result of an expensive calculation. useCallback(fn, deps) caches a function s identity so it doesn t change every render. React.memo(Component) skips re-rendering a component when its props are shallowly equal. They work together: memoised child + stable callback/object props. Use them where profiling shows a benefit; the React Compiler now automates most of this.

Question 53

What is the Context API? When would you not use it?

Accepted Answer

In short: Context passes data through the component tree without prop drilling: createContext , a provider with a value, and useContext in consumers. It suits low-frequency global values (theme, auth user, locale, feature flags). Avoid it for frequently changing, large global state, because every consumer re-renders on any change of the value — use a state library (Zustand, Redux Toolkit) or split contexts and memoise values. It s not a replacement for server-state caching.

Question 54

useState vs useReducer?

Accepted Answer

In short: useState is ideal for simple, independent values. useReducer centralises complex state logic where the next state depends on the previous one and on multiple action types (forms with many fields, carts, wizards). Its reducer is pure and easily testable, and dispatch is stable, which helps memoisation. It often pairs with Context for small app-wide stores.

Question 55

What is lifting state up?

Accepted Answer

In short: When two components need the same changing data, move the state to their closest common parent and pass it down as props, with callbacks for updates. This keeps a single source of truth. If many layers are involved, consider composition (passing components as children), Context, or a store.

Question 56

How do you optimise the performance of a React application?

Accepted Answer

In short: Profile with React DevTools; avoid unnecessary re-renders (state colocation, splitting components, memo with stable props or the React Compiler, splitting contexts); virtualise long lists; correct keys; code-split routes and heavy components with lazy /Suspense; useTransition / useDeferredValue for heavy updates during typing; cache server data with TanStack Query; debounce inputs; use SSR/Server Components to reduce client JS; optimise images; always ship production builds.

Question 57

What are React Server Components and how do they differ from SSR?

Accepted Answer

In short: SSR renders the whole component tree to HTML on the server per request, then ships all the component JS to hydrate it in the browser. Server Components are components that run only on the server (or at build time): they can access databases and secrets directly, and their code is never sent to the browser — only their rendered output (RSC payload). Client Components ( use client ) are still hydrated for interactivity. RSC and SSR are complementary — frameworks like Next.js use both.

Question 58

A dashboard with many widgets re-renders entirely when the user types in a search box. How do you fix it?

Accepted Answer

In short: Find what re-renders with the Profiler. Usually the search state lives too high (in the page) so every widget re-renders. Move the search state down into the search component or the part that uses it; wrap expensive widgets in memo and pass stable props (or enable the React Compiler); use useDeferredValue for the filtered results so typing stays responsive; debounce the search before triggering data fetching; split a big context into smaller ones.

Question 59

Fetching data in useEffect sometimes shows results for the previous user ID after switching quickly. Why and how to fix?

Accepted Answer

In short: Race condition: an older request resolves after a newer one and overwrites state. Fix by aborting the previous request in the effect cleanup ( AbortController ), or ignoring stale responses with a flag (`let ignore = false; return () = { ignore = true }`). Better: use TanStack Query/SWR or framework loaders, which key requests by parameters and handle caching, deduplication and races automatically.

Question 60

What is Angular and how is it different from AngularJS?

Accepted Answer

In short: Angular is a TypeScript-based, component-driven framework (2016+, by Google) with a CLI, hierarchical DI, RxJS, signals, a router, forms and HTTP modules, AOT compilation and SSR. AngularJS (1.x) used JavaScript, controllers and $scope , two-way binding with dirty-checking digest cycles, and reached EOL in Dec 2021. Angular is faster, more modular, mobile-friendly, and has semver releases every six months.

Node.js / MERN-MEAN Full Stack Developer — Interview Questions