Question 1

What is semantic HTML and why is it important?

Accepted Answer

In short: Using elements that describe meaning — header , nav , main , article , section , aside , footer , button , headings — instead of generic div / span . Benefits: accessibility (screen readers use landmarks and roles), SEO (search engines understand structure), built-in behaviour (buttons are focusable and keyboard-operable), and readable code.

Question 2

Explain the CSS box model. What does box-sizing: border-box do?

Accepted Answer

In short: Each element is content + padding + border + margin. With the default content-box , width sets only the content, so padding and border are added on top. With border-box , width includes content, padding and border, which makes sizing predictable — most projects set it globally.

Question 3

What is CSS specificity? Which rule wins?

Accepted Answer

In short: Specificity scores selectors as (ids, classes/attributes/pseudo-classes, elements); higher wins, inline styles beat selectors, !important beats normal declarations, and with equal specificity the later rule wins. Example: #nav a (1,0,1) beats .menu a.active (0,2,1). Keep specificity low with classes to avoid override wars.

Question 4

Flexbox vs Grid — when do you use each?

Accepted Answer

In short: Flexbox is one-dimensional (a row or a column), content-driven — nav bars, toolbars, centring, distributing items. Grid is two-dimensional (rows and columns together), container-driven — page layouts, card galleries, forms. Often Grid for the overall layout and Flexbox inside components.

Question 5

How do you centre a div horizontally and vertically?

Accepted Answer

In short: Flexbox: parent display:flex; justify-content:center; align-items:center; . Grid: parent display:grid; place-items:center; . Horizontal only for a block with a width: margin: 0 auto . Absolute: position:absolute; inset:0; margin:auto; with a set size, or top:50%; left:50%; transform:translate(-50%,-50%) .

Question 6

How do you make a website responsive?

Accepted Answer

Viewport meta tag, mobile-first CSS with min-width media queries, fluid layouts (Flexbox/Grid, % , fr , minmax , clamp ), responsive images ( max-width:100% , srcset , picture ), relative units ( rem ), container queries for reusable components, testing on real devices and DevTools device mode, and avoiding fixed widths and horizontal scroll.

Question 7

What are media queries and container queries?

Accepted Answer

In short: Media queries apply styles based on the viewport/device ( @media (min-width: 768px) , prefers-color-scheme , prefers-reduced-motion , print). Container queries apply styles based on the size of a parent container (`container-type: inline-size; @container (min-width: 400px)`), so a component adapts wherever it is placed — e.g. a card in a narrow sidebar vs a wide main area.

Question 8

How do you make a web page accessible?

Accepted Answer

In short: Semantic HTML, labels for inputs, alt text, real buttons/links, keyboard navigation with visible focus, colour contrast ≥ 4.5:1, logical heading order, lang attribute, ARIA only where native HTML can t (live regions, expanded states), respect reduced motion, and test with Lighthouse/axe and a screen reader. Target WCAG 2.1/2.2 AA.

Question 9

The layout looks fine on desktop but has a horizontal scrollbar on mobile. How do you find and fix it?

Accepted Answer

In short: Use DevTools device mode and find the element wider than the viewport (temporarily * { outline: 1px solid red } , or check elements whose right edge exceeds the width). Usual causes: fixed widths ( width: 500px ), long unbroken text/URLs ( overflow-wrap: anywhere ), images without max-width:100% , 100vw with a scrollbar, negative margins, tables and code blocks (wrap them in an overflow-x:auto container), and grid/flex children that can t shrink ( min-width: 0 on grid/flex items, minmax(0, 1fr) ).

Question 10

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 11

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 12

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 13

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 14

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 15

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 16

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 17

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 18

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 19

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 20

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 21

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 22

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 23

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 24

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 25

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 26

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 27

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 28

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 29

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 30

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 31

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 32

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 33

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 34

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 35

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 36

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 37

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 38

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 39

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 40

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 41

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 42

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 43

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 44

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 45

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 46

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 47

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.

Question 48

What are components and what is a standalone component?

Accepted Answer

In short: A component is a TypeScript class decorated with @Component that controls a piece of UI through its template and styles, with a selector used in other templates. A standalone component (v14+, default since v19) declares its own dependencies via imports without belonging to an NgModule, making apps simpler, enabling lazy loading per component, and reducing boilerplate.

Question 49

Explain the types of data binding in Angular.

Accepted Answer

In short: Interpolation {{ }} and property binding [prop]= expr (component → view), event binding (event)= handler() (view → component), and two-way binding [(ngModel)]= value (banana-in-a-box: property + event). Also attribute [attr.x] , class [class.x] and style [style.x] bindings.

Question 50

What are directives? Types of directives?

Accepted Answer

In short: Classes that add behaviour to elements. Components are directives with templates. Attribute directives change appearance/behaviour ( ngClass , ngStyle , custom appHighlight ). Structural directives change DOM layout by adding/removing elements ( *ngIf , *ngFor , *ngSwitch — now largely replaced by built-in control flow @if , @for , @switch ).

Question 51

What are pipes? Pure vs impure?

Accepted Answer

In short: Pipes transform values in templates ( date , currency , async , custom). Pure pipes (default) run only when the input value/reference changes — efficient. Impure pipes ( pure: false ) run on every change detection cycle — needed for detecting changes inside mutable objects/arrays, but expensive. async is impure because it tracks emissions.

Question 52

Explain the component lifecycle hooks.

Accepted Answer

In short: ngOnChanges (input changes, before init), ngOnInit (once, initialise/fetch data), ngDoCheck (each CD cycle), ngAfterContentInit / ngAfterContentChecked (projected content), ngAfterViewInit / ngAfterViewChecked (view and child views, @ViewChild ready), ngOnDestroy (cleanup). The constructor is for DI only. Modern code often uses signal inputs/ computed instead of ngOnChanges , afterNextRender for DOM work and DestroyRef / takeUntilDestroyed for cleanup.

Question 53

What is dependency injection in Angular? What does providedIn: 'root' mean?

Accepted Answer

In short: DI supplies a class s dependencies from injectors instead of the class creating them. Services are registered with providers; consumers use inject(Service) or constructor parameters. @Injectable({ providedIn: root }) registers a tree-shakable application-wide singleton. Providers can also be scoped to routes or components (new instance per component). Injectors are hierarchical: lookup goes from the element injector up to the root/environment injector.

Question 54

Observable vs Promise?

Accepted Answer

In short: A Promise handles a single future value, is eager (starts immediately), and isn t cancellable. An Observable can emit many values over time, is lazy (runs on subscribe), cancellable (unsubscribe), and composable with operators (map, switchMap, debounceTime, retry). Angular uses Observables for HttpClient, router events, forms valueChanges; convert with firstValueFrom / toSignal when convenient.

Question 55

switchMap vs mergeMap vs concatMap vs exhaustMap?

Accepted Answer

In short: All map each source value to an inner observable and flatten. switchMap cancels the previous inner observable when a new value arrives (typeahead search, route param changes). mergeMap runs all concurrently (parallel independent requests). concatMap queues them and runs one after another in order (sequential saves). exhaustMap ignores new values while the current inner observable is active (prevent duplicate login submissions).

Question 56

What are signals and why were they introduced?

Accepted Answer

In short: Signals (v16+) are reactive primitives holding a value: signal() (writable), computed() (derived, memoised), effect() (side effects). Angular tracks which templates/computeds read which signals, so it knows exactly what changed and can update only affected components — enabling fine-grained, zoneless change detection, simpler state than RxJS for synchronous state, and better performance. RxJS remains useful for async event streams; toSignal / toObservable bridge them.

Question 57

Template-driven vs reactive forms — which do you use?

Accepted Answer

In short: Template-driven forms define the model in the template with ngModel and directive validators — quick for simple forms. Reactive forms define FormGroup / FormControl / FormArray in the component, are synchronous, strongly typed (v14+), easy to unit test, and ideal for complex, dynamic forms with custom/async validators. Most enterprise apps use reactive forms; v21 previews signal-based forms.

Question 58

How do you implement route guards and lazy loading?

Accepted Answer

In short: Guards are functions ( CanActivateFn , CanMatchFn , CanDeactivateFn , ResolveFn ) listed on routes; they return boolean, UrlTree (redirect), or an observable/promise of those — e.g. authGuard redirects to /login. Lazy loading uses loadComponent: () = import(...) or loadChildren so feature code is downloaded only when the route is visited, reducing the initial bundle; preloading strategies can fetch them in the background.

Question 59

Explain change detection. What does OnPush do? What is zoneless?

Accepted Answer

In short: Change detection syncs component state to the DOM. With zone.js, Angular runs a check over the tree after any async event. OnPush limits checks of a component to when its input references change, an event happens inside it, an async pipe emits, a signal it reads changes, or markForCheck() is called — fewer checks, better performance, but requires immutable updates. Zoneless mode (default for new apps in v21) removes zone.js entirely; change detection is scheduled by signals, events and explicit notifications, which gives smaller bundles and more predictable updates.

Question 60

How do you prevent memory leaks in Angular?

Accepted Answer

In short: Unsubscribe from long-lived observables: prefer the async pipe or toSignal , use takeUntilDestroyed() (or takeUntil with a destroy subject), remove manual DOM listeners and timers in ngOnDestroy / DestroyRef.onDestroy , avoid storing component references in singleton services, and be careful with effect() s that create subscriptions. HttpClient requests complete on their own but still should be cancelled if the component is destroyed mid-request (switchMap/takeUntilDestroyed).

Frontend Developer — Interview Questions