Frontend Developer Interview
Questions 2025

Block: takes full width, starts on new line (div, p). Inline: only as wide as content, no new line (span, a). Inline-block: inline positioning but can have width/height (button, img).

Content → Padding → Border → Margin. box-sizing: border-box includes padding & border within the element's width; content-box (default) does not.

Relative: offset from its normal position. Absolute: relative to nearest positioned ancestor. Fixed: relative to viewport. Sticky: relative until scroll threshold, then fixed.

Flexbox: one-dimensional (row or column). Grid: two-dimensional. Use Flexbox for component layouts; use Grid for page/section layouts.

Specificity determines which CSS rule applies. Order: !important > Inline > ID (#) > Class (.) > Element. Equal specificity = last rule wins.

var: function-scoped, hoisted. let: block-scoped, not hoisted to usable state. const: block-scoped, cannot be reassigned (but object properties can mutate).

Attaching one event listener to a parent element instead of multiple children. Uses event bubbling — events bubble up to parent. Efficient for dynamic lists.

A function that remembers its outer scope even after the outer function has returned. Used in memoization, factory functions, and module patterns.

== does type coercion (1 == '1' is true). === strict equality with no type coercion (1 === '1' is false). Always prefer ===.

JS is single-threaded. The Event Loop picks tasks from the callback queue and executes them after the call stack is empty. Microtasks (Promises) run before macrotasks (setTimeout).

Promise represents a future value — pending, fulfilled, or rejected. async/await is syntactic sugar over Promises — makes async code read like synchronous code.

undefined: variable declared but not assigned. null: explicitly set to 'no value'. typeof null === 'object' is a JavaScript quirk.

A lightweight JS copy of the real DOM. React diffs the virtual DOM before updating the real DOM — making updates faster by minimizing actual DOM operations.

Functions that let you use state and lifecycle in functional components. Key hooks: useState, useEffect, useContext, useRef, useMemo, useCallback, useReducer.

[] — runs once (mount). [dep1, dep2] — runs when dependencies change. No array — runs after every render. Return cleanup function to clear subscriptions.

Passing props through many levels. Avoid with: React Context, Redux/Zustand state management, or component composition.

useMemo: memoizes a computed value. useCallback: memoizes a function reference. Both prevent unnecessary re-renders when passed to child components.