The full 110 interview questions & answers in text format (easy-to-understand

explanations.
I’ll organize them by JavaScript (45) → React.js (40) → CSS (15) → HTML (10).

🔹 JavaScript Interview Questions (45)

1. What are the different data types in JavaScript?

 Primitive: String, Number, Boolean, Undefined, Null, Symbol, BigInt

 Non-Primitive: Objects (Arrays, Functions, etc.)

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

 == → Checks only values (loose equality).

 === → Checks both values and types (strict equality).

3. What are JavaScript closures?

A closure is when a function remembers variables from its outer scope even after that
scope is finished.

4. What is Hoisting in JavaScript?

JavaScript moves function and variable declarations to the top of their scope before
execution.

5. Difference between var, let, and const?

 var → Function-scoped, re-declarable.

 let → Block-scoped, re-assignable.

 const → Block-scoped, cannot be reassigned.

6. Difference between synchronous and asynchronous JS?

  Synchronous → Code runs line by line.

 Asynchronous → Runs tasks in background (setTimeout, API calls).

7. What are Promises?

An object that represents a future value. States: pending, fulfilled, rejected.

8. What is async/await?
Syntactic sugar for promises. Makes async code look like sync code.

9. Difference between null and undefined?

 undefined → Variable declared but no value assigned.

 null → Explicitly set empty value.

10. Difference between map(), forEach(), filter(), and reduce()?

 forEach() → Iterates, no return.

 map() → Returns a new array.

 filter() → Returns matching elements.

 reduce() → Returns a single value.

11. What are arrow functions?

Shorter syntax for functions. Do not have their own this.

12. What is the difference between function declaration and function expression?

 Declaration → Hoisted.

 Expression → Not hoisted.

13. What is event bubbling and capturing?

 Bubbling → Event moves from child → parent.

 Capturing → Event moves from parent → child.

14. What are JavaScript events?

Actions that happen in the browser (click, hover, keypress).

15. What is the difference between call(), apply(), and bind()?

 call() → Calls function with arguments.

 apply() → Same but arguments passed as array.

 bind() → Returns a new function.

16. What is this in JavaScript?

Refers to the object that is executing the function.

17. Difference between localStorage, sessionStorage, and cookies?

 localStorage → Permanent until cleared.

 sessionStorage → Clears when tab closes.

 cookies → Stored on browser + sent to server.

18. What are higher-order functions?

Functions that take another function as argument or return a function.

19. Difference between deep copy and shallow copy?

 Shallow → Copies only references.

 Deep → Copies actual values (including nested).

20. What is the difference between slice() and splice()?

 slice() → Returns a new array (does not modify original).

 splice() → Changes the original array.

21. What is NaN in JavaScript?

NaN = Not a Number. Result of invalid math.

22. What is the difference between == and Object.is()?

Object.is() is stricter (handles NaN, -0, etc. properly).

23. What is a polyfill?

Code that adds support for a feature not supported in older browsers.

24. What is event delegation?

Attaching a single event listener on a parent element to handle events for child elements.

25. What is a callback function?

A function passed as an argument to another function.

26. What is debouncing and throttling?

 Debouncing → Limits execution until user stops triggering (e.g., typing).

 Throttling → Limits execution at regular intervals (e.g., scrolling).

27. What are template literals?

String literals with backticks `, allow interpolation ${}.
28. What is destructuring in JS?
Extracting values from arrays/objects into variables.

29. What are default parameters?

Function parameters with default values.

30. Difference between setTimeout and setInterval?

 setTimeout → Runs once after delay.

 setInterval → Runs repeatedly.

31. What is the difference between ES5 and ES6?

ES6 introduced let, const, arrow functions, classes, promises, modules, etc.

32. What is a JavaScript module?

File that exports values/functions to be imported elsewhere.

33. What is strict mode in JS?

A way to enforce safer coding by preventing unsafe actions.

34. What is currying in JS?

Breaking a function with multiple arguments into a chain of single-argument functions.

35. What are generators in JS?

Functions that can pause (yield) and resume execution.

36. What is the difference between for..in and for..of?

 for..in → Loops keys (object properties).

 for..of → Loops values (arrays, iterables).

37. What is memoization?
Caching results of expensive function calls.

38. What are pure functions?

Functions with no side effects, always return same output for same input.

39. What is immutability?

Data that cannot be changed once created.

40. What is a WeakMap and WeakSet?

Special collections that store objects without preventing garbage collection.

41. What is the difference between stack and heap?

 Stack → Stores primitive values.

 Heap → Stores objects.

42. What is an IIFE?

Immediately Invoked Function Expression: Runs immediately after being defined.

43. What is a promise chain?

Multiple .then() chained together to handle async tasks in sequence.

44. What is the difference between shallow equality and deep equality?

 Shallow → Compares only references.

 Deep → Compares nested properties.

45. What is dynamic typing in JavaScript?
Variables can hold different types at different times.

🔹 React.js Interview Questions (40)

46. What is React?

JS library for building UI, component-based.

47. What are React components?

Reusable UI blocks. Two types: functional & class.

48. What is JSX?

HTML-like syntax inside JS.

49. What is Virtual DOM?

Lightweight copy of real DOM, updates efficiently.

50. Difference between props and state?

 Props → Read-only, passed from parent.

 State → Managed locally, can change.

51. What are hooks?

Functions that allow state and lifecycle in functional components.

52. What is useState?

Hook for state management in function components.

53. What is useEffect?

Hook for side effects (API calls, DOM updates).
54. What is Redux?
State management library with a single store.

55. What is Context API?

Avoids prop drilling, provides data globally.

56. What are controlled and uncontrolled components?

 Controlled → State controlled by React.

 Uncontrolled → Uses DOM directly.

57. What are React lifecycle methods?

Mounting, Updating, Unmounting methods in class components.

58. What is reconciliation in React?

Process React uses to update DOM efficiently using diffing algorithm.

59. What is React Fiber?

New reconciliation engine for faster rendering.

60. What is a key in React lists?

Unique identifier to help React track elements.

61. What is Prop Drilling?

Passing props through multiple levels unnecessarily.

62. What is lifting state up?

Moving state to a common ancestor to share data between components.
63. Difference between controlled and uncontrolled form inputs?
Controlled inputs use state, uncontrolled rely on DOM refs.

64. What is lazy loading in React?

Loading components only when needed.

65. What is code splitting in React?

Splitting code into smaller bundles to load only needed code.

66. What are React Fragments?

Wrapper component <></> that groups elements without extra DOM nodes.

67. What is React.memo()?

Higher-order component that memoizes a component to prevent re-rendering.

68. What is useCallback?

Hook that memoizes a function so it doesn’t get recreated unnecessarily.

69. What is useMemo?

Hook that memoizes expensive computations.

70. What is React Router?

Library for navigation in React apps.

71. What is Single Page Application (SPA)?

App that loads a single HTML page and updates content dynamically.

72. What are portals in React?

Render children into a DOM node outside parent hierarchy.
73. What is hydration in React?
Attaching event listeners to HTML from server-side rendering.

74. Difference between client-side and server-side rendering?

 CSR → Rendered in browser.

 SSR → Rendered on server before sending to browser.

75. What is Next.js?

React framework for SSR, static site generation, routing.

76. What is error boundary?

Component that catches JS errors and displays fallback UI.

77. What is strict mode in React?

Tool for highlighting potential problems in app.

78. What is reconciliation algorithm?

Diffing algorithm React uses to update DOM efficiently.

79. What is forwardRef in React?

Allows passing ref from parent to child component.

80. What is custom hook?

Reusable function that uses React hooks.

81. What is useReducer?

Hook for state management using reducer pattern.
82. What is suspense in React?
Used for lazy loading and waiting for async operations.

83. What is hydration warning in React?

Mismatch between server-rendered and client-rendered DOM.

84. Difference between class and functional components?

Class → Use lifecycle methods.
Function → Use hooks, simpler.

85. What is diffing in React?

Comparing virtual DOM trees to update only changed nodes.

86. What are render props?

Technique where a function is passed as prop to share logic.

87. What are higher-order components (HOCs)?

Functions that take a component and return a new one.

88. What is concurrent mode in React?

Experimental feature for interruptible rendering.

89. What is server-side rendering (SSR)?

Rendering React components on server before sending to browser.

90. What is hydration in SSR?

Attaching React logic to server-rendered markup.

🔹 CSS Interview Questions (15)

91. Difference between relative, absolute, fixed, sticky positioning?

 relative → Based on itself.

 absolute → Based on parent.

 fixed → Based on viewport.

 sticky → Switches between relative/fixed.

92. Difference between inline, block, inline-block elements?

 inline → Only content size.

 block → Full width.

 inline-block → Behaves inline but allows width/height.

93. What are pseudo-classes?

Define element state (:hover, :focus).

94. What is Flexbox?

One-dimensional layout model.

95. What is Grid in CSS?

Two-dimensional layout system.

96. Difference between absolute and relative units?

 Absolute → px, in.

 Relative → %, em, rem, vw, vh.

97. What is z-index?

Controls stacking order of elements.
98. Difference between em and rem units?

 em → Relative to parent.

 rem → Relative to root element.

99. Difference between inline CSS, internal CSS, external CSS?

 inline → In element style attribute.

 internal → Inside <style> tag.

 external → Separate CSS file.

100. What are media queries?

Used for responsive design based on screen size.

101. Difference between relative length units (%, vw, vh)?

 % → Relative to parent.

 vw → Relative to viewport width.

 vh → Relative to viewport height.

102. What is the difference between transitions and animations?

 Transition → Triggered on state change.

 Animation → Runs automatically with keyframes.

103. What is CSS specificity?

Rules that determine which style is applied.

104. What is difference between opacity and visibility hidden?

 opacity: 0 → Element hidden but takes space.

  visibility: hidden → Element hidden but still takes space.

105. Difference between relative, fixed, and sticky background images?

 relative → Scrolls normally.

 fixed → Stays fixed.

 sticky → Moves until certain scroll point.

🔹 HTML Interview Questions (10)

106. Difference between HTML and HTML5?

HTML5 introduced semantic tags, audio/video, canvas, local storage.

107. What are semantic tags?

Tags that describe meaning (header, nav, section, footer).

108. Difference between inline and block elements?

 Block → New line, full width.

 Inline → Same line, only content width.

109. Difference between id and class?

 id → Unique per page.

 class → Reusable.

110. Difference between localStorage, sessionStorage, cookies?

 localStorage → Permanent.

 sessionStorage → Clears when tab closed.

 cookies → Sent with HTTP requests.

✅ That’s all 110 questions with answers for Frontend Developer Interviews in plain text.

Do you want me to also highlight the Top 20 "most likely to be asked" questions so you
can focus revision on those first?

Perfect ✅
Here are the Top 20 Most Important Frontend Interview Questions (based on frequency &
importance) that you should definitely master first 👇

🔥 Top 20 Frontend Developer Interview Questions

JavaScript (10)

1. Difference between == and ===?

2. Difference between var, let, and const?

3. What is Hoisting in JavaScript?

4. What are closures in JavaScript?

5. Difference between synchronous and asynchronous JavaScript?

6. What are Promises and async/await?

7. What is event delegation in JavaScript?

8. Difference between map(), forEach(), filter(), and reduce()?

9. What is debouncing and throttling?

10. Difference between null and undefined?

React.js (7)

11. What is React and how is it different from plain JavaScript?

12. What is Virtual DOM and how does React use it?

13. Difference between props and state in React?

 14. What are React Hooks? (especially useState and useEffect)

15. What is Redux vs Context API?

16. What is key in React lists and why is it important?

17. What is React.memo, useCallback, and useMemo? (performance optimization)

CSS (2)

18. Difference between relative, absolute, fixed, and sticky positioning?

19. What is Flexbox and how is it different from CSS Grid?

HTML (1)

20. What are semantic HTML tags and why are they important?

👉 If you master just these 20 questions (with hands-on code examples), you’ll cover about
70% of what interviewers usually ask.

Would you like me to now expand each of these Top 20 with very detailed, beginner-
friendly explanations + examples (like mini tutorials) so you can study them deeper?