✅ JavaScript Interview Questions (15 Total)
🔹 Beginner Level (1–5)
1. What is the difference between var, let, and const?
Answer:
var is function-scoped and can be redeclared.
let is block-scoped and cannot be redeclared in the same scope.
const is block-scoped and cannot be reassigned.
Explanation:
let and const were introduced in ES6 and help avoid scoping issues that occur with var.
2. What is hoisting in JavaScript?
Answer:
Hoisting is JavaScript's behavior of moving variable and function declarations to the top of their
scope before code execution.
Explanation:
Only declarations are hoisted, not initializations. For example, console.log(a); var a = 5; logs
undefined.
3. What are primitive and non-primitive data types?
Answer:
Primitive: string, number, boolean, null, undefined, symbol, bigint
Non-primitive: objects, arrays, functions
Explanation:
Primitive types are immutable, non-primitive types are mutable and passed by reference.
4. Difference between == and === in JavaScript?
Answer:
== checks for value equality with type coercion.
=== checks for both value and type equality.
Explanation:
Always prefer === to avoid bugs caused by implicit type conversion.
5. What is a closure in JavaScript?
Answer:
A closure is a function that remembers variables from its outer scope even after that scope has
closed.
Explanation:
Closures are used for data encapsulation and creating private variables.
🔹 Intermediate Level (6–10)
6. What is the event loop in JavaScript?
Answer:
The event loop handles asynchronous callbacks by placing them in a queue and executing them after
the main thread is empty.
Explanation:
It enables non-blocking I/O by using the call stack and callback/task queues.
7. Explain the difference between call, apply, and bind.
Answer:
call: invokes a function with a given this and arguments list.
apply: same as call, but takes arguments as an array.
bind: returns a new function with this bound, but doesn’t invoke it.
Explanation:
Useful in borrowing methods and setting context (this).
8. What is the difference between synchronous and asynchronous code?
Answer:
Synchronous: executes line by line.
Asynchronous: doesn’t block the code and uses callbacks, promises, or async/await.
Explanation:
Async code allows handling long operations like network requests without freezing the UI.
9. What is a higher-order function?
Answer:
A function that takes another function as an argument or returns a function.
Explanation:
Examples: map, filter, reduce. Enables functional programming.
10. What is the difference between shallow and deep copy?
Answer:
Shallow copy: copies only the first level.
Deep copy: copies all levels of the object.
Explanation:
Use structuredClone() or JSON.parse(JSON.stringify()) for deep copy (with limitations).
🔹 Advanced Level (11–15)
11. Explain prototypal inheritance.
Answer:
It’s a feature where objects can inherit properties and methods from another object.
Explanation:
Each object has a hidden [[Prototype]] or __proto__ pointing to another object.
12. What are Promises and how do you use async/await?
Answer:
Promises represent an eventual completion or failure of an async operation.
async/await is syntactic sugar for handling promises.
Explanation:
Use await inside async functions to pause execution until a promise settles.
13. What is debouncing and throttling?
Answer:
Debouncing: Executes function after a delay once events stop.
Throttling: Executes function at regular intervals regardless of events.
Explanation:
Used in performance optimization, e.g., search input or scroll handlers.
14. Explain memory leak and how to avoid it.
Answer:
A memory leak occurs when allocated memory is not released.
Explanation:
Avoid by clearing intervals/timeouts, detaching event listeners, and avoiding global variables.
15. What is the Temporal Dead Zone (TDZ)?
Answer:
The time between entering a block and initializing let/const variables.
Explanation:
Accessing them before declaration results in a ReferenceError.
✅ React.js Interview Questions (15 Total)
🔹 Beginner Level (1–5)
1. What is React?
Answer:
React is a JavaScript library for building user interfaces using a component-based architecture.
Explanation:
It uses virtual DOM and is maintained by Facebook.
2. What are components in React?
Answer:
Components are reusable UI blocks — they can be class-based or functional.
Explanation:
Functional components are now preferred, especially with hooks.
3. What is JSX?
Answer:
JSX stands for JavaScript XML. It allows writing HTML inside JavaScript.
Explanation:
Browsers can’t read JSX directly — it's compiled to React.createElement().
4. What is the use of key prop in lists?
Answer:
key helps React identify which items have changed, added, or removed.
Explanation:
Should be unique and stable for each element in a list.
5. What are props in React?
Answer:
Props are inputs to components used to pass data from parent to child.
Explanation:
They are read-only and help make components dynamic.
🔹 Intermediate Level (6–10)
6. What is state in React?
Answer:
State is a built-in object used to store component data that may change over time.
Explanation:
Use useState in functional components to manage state.
7. What is the difference between controlled and uncontrolled components?
Answer:
Controlled: Form elements controlled by React via state.
Uncontrolled: DOM handles its own state using refs.
Explanation:
Controlled components are preferred for predictable behavior.
8. What is lifting state up in React?
Answer:
Moving state to a common ancestor to share data between child components.
Explanation:
It promotes unidirectional data flow and avoids redundant state.
9. What are hooks in React?
Answer:
Hooks are functions that let you use React features like state and lifecycle in functional components.
Explanation:
Examples: useState, useEffect, useRef, useCallback, etc.
10. What does useEffect do?
Answer:
It performs side effects in functional components (like fetching data or updating the DOM).
Explanation:
It runs after render, and can be controlled with a dependency array.
🔹 Advanced Level (11–15)
11. What is memoization in React?
Answer:
React memoization (React.memo, useMemo, useCallback) optimizes performance by avoiding
unnecessary re-renders.
Explanation:
Useful in heavy computations and prop-driven re-renders.
12. Explain reconciliation and virtual DOM.
Answer:
Virtual DOM is a lightweight copy of the real DOM. React compares it to find and apply minimal
changes.
Explanation:
This diffing algorithm makes React fast and efficient.
13. What is Context API?
Answer:
Context provides a way to pass data through the component tree without props.
Explanation:
Use React.createContext() and useContext() to consume.
14. What is the difference between useEffect and useLayoutEffect?
Answer:
useEffect: Runs asynchronously after DOM paint.
useLayoutEffect: Runs synchronously after render but before the paint.
Explanation:
Use useLayoutEffect when DOM measurement is required before paint.
15. How does React handle re-renders?
Answer:
React re-renders when state or props change, and only the changed parts of the virtual DOM are
updated.
Explanation:
React compares the new virtual DOM with the old one to update efficiently.
Here are 15 more advanced and practical interview questions — 8 for JavaScript and 7 for React.js
— continuing from the previous list. These will deepen your understanding of real-world problem-
solving, architecture, and optimization topics.
✅ JavaScript Interview Questions (8 More)
1. What is the difference between .map(), .forEach(), .filter(), and .reduce()?
Answer:
.map(): transforms each item and returns a new array.
.forEach(): executes a function but returns undefined.
.filter(): returns a new array of elements that match a condition.
.reduce(): accumulates a single value based on the array.
Explanation:
Use .map() to transform, .filter() to select, .reduce() to aggregate, and .forEach() for side effects.
2. What is this in JavaScript and how does it behave in different contexts?
Answer:
this refers to the context in which a function is executed.
Explanation:
Global scope → window (in browsers)
Method → object that owns the method
Arrow function → this is lexically bound
3. How do arrow functions differ from regular functions?
Answer:
Arrow functions:
Don’t have their own this, arguments, super, or new.target.
Cannot be used as constructors.
Explanation:
They are best used for short callbacks and avoid context binding issues.
4. What are JavaScript modules and why are they important?
Answer:
Modules allow code to be split into reusable pieces (import/export).
Explanation:
They improve maintainability, encapsulation, and make dependency management easier.
5. How does optional chaining (?.) work?
Answer:
It lets you access nested object properties safely without throwing an error if a value is null or
undefined.
const city = user?.address?.city;
Explanation:
Helps avoid deep null checks manually.
6. What is the difference between Object.freeze() and Object.seal()?
Answer:
freeze(): makes an object immutable (can't add/remove/change properties).
seal(): prevents adding/removing but allows modifying existing properties.
Explanation:
Used for object immutability control.
7. Explain the concept of event delegation.
Answer:
Event delegation is handling events at a parent element instead of each child using event bubbling.
Explanation:
Improves performance and dynamic DOM handling.
8. What is a generator function and where is it used?
Answer:
A generator (function*) returns an iterator and can pause/resume execution using yield.
function* idGen() {
let id = 0;
while (true) yield id++;
Explanation:
Useful for custom iterators, infinite sequences, and async flows.
✅ React.js Interview Questions (7 More)
1. What are custom hooks and why use them?
Answer:
Custom hooks are reusable functions that use React hooks to encapsulate logic.
Explanation:
They promote DRY code by abstracting logic (e.g., useForm, useFetch, useDebounce).
2. What is the purpose of useRef in React?
Answer:
useRef gives access to DOM elements or stores a mutable value that doesn’t trigger re-renders.
Explanation:
Used for timers, form elements, and persisting values between renders.
3. Explain React.StrictMode and what it does.
Answer:
It helps find potential problems in an application by activating extra checks and warnings during
development.
Explanation:
It double-invokes certain lifecycle methods to catch side effects and bugs early.
4. How do you optimize performance in a large React app?
Answer:
Code splitting (React.lazy + Suspense)
Memoization (React.memo, useMemo, useCallback)
Virtualization (e.g., react-window)
Avoid unnecessary state updates
Debounce user input
Explanation:
Performance tuning is essential in large applications to avoid bottlenecks.
5. What is server-side rendering (SSR) in React?
Answer:
Rendering React components on the server before sending HTML to the client (e.g., Next.js).
Explanation:
Improves SEO and performance for initial page load.
6. What are the differences between React.memo, useMemo, and useCallback?
Answer:
React.memo: memoizes entire component to avoid re-render.
useMemo: memoizes a computed value.
useCallback: memoizes a callback function.
Explanation:
They prevent unnecessary recalculations or renders.
7. What is the difference between rendering and reconciliation in React?
Answer:
Rendering: creating React elements from components.
Reconciliation: diffing new vs. old virtual DOM and applying changes to the real DOM.
Explanation:
Reconciliation optimizes DOM operations for efficient UI updates.
✅ React.js Interview Questions (Advanced - Set 3)
1. What is reconciliation in React and how does it work?
Answer:
Reconciliation is React’s process of comparing the new virtual DOM with the previous one and
determining the minimal set of changes to update the real DOM.
Explanation:
React uses a diffing algorithm (O(n)) to update only the changed parts, making UI updates efficient.
2. What are controlled and uncontrolled components in React?
Answer:
Controlled: Form inputs where React state is the source of truth.
Uncontrolled: Form inputs using refs to access DOM values.
Explanation:
Controlled components offer more control and validation; uncontrolled are simpler but less
predictable.
3. What is React.Fragment and when should you use it?
Answer:
<React.Fragment> lets you return multiple elements without adding extra nodes to the DOM.
<>
<h1>Hello</h1>
<p>World</p>
</>
Explanation:
Prevents unnecessary wrappers that can mess up styling and DOM structure.
4. What are synthetic events in React?
Answer:
Synthetic events are React's cross-browser wrapper around native events, providing a consistent API.
Explanation:
They improve compatibility across browsers while maintaining performance.
5. What are keys in React and why are they important?
Answer:
Keys help React identify which items have changed, added, or removed in lists.
items.map(item => <li key={item.id}>{item.name}</li>)
Explanation:
They enhance performance and prevent re-rendering the entire list.
6. What are Higher-Order Components (HOCs)?
Answer:
HOCs are functions that take a component and return a new enhanced component.
const withLogging = (Component) => (props) => {
console.log("Rendering");
return <Component {...props} />;
};
Explanation:
They’re used to share logic between components (e.g., auth, logging, data fetching).
7. What is the difference between useEffect(() => {}, []) and useLayoutEffect(() => {}, [])?
Answer:
useEffect runs after paint.
useLayoutEffect runs before paint, blocking the browser until the effect runs.
Explanation:
Use useLayoutEffect for DOM measurements or synchronously mutating layout.
8. How does React handle forms and form validation?
Answer:
React forms are typically managed using controlled components, with validation handled manually or
via libraries like Formik or React Hook Form.
Explanation:
Controlled forms provide full control over user input and validation logic.
9. What is the difference between props.children and React.cloneElement?
Answer:
props.children accesses nested components or elements.
React.cloneElement creates a new element by copying and modifying an existing one.
Explanation:
cloneElement is useful for injecting props or modifying children dynamically.
10. What are portals in React?
Answer:
Portals let you render children into a DOM node outside of the main app root.
ReactDOM.createPortal(<Modal />, document.getElementById('modal-root'));
Explanation:
Used for modals, tooltips, and overlays where DOM positioning matters.
11. What is Context API and how is it used?
Answer:
Context provides a way to share global data like theme or auth without prop drilling.
const ThemeContext = React.createContext();
<ThemeContext.Provider value="dark">
<App />
</ThemeContext.Provider>
Explanation:
Use useContext() to access the value deeply in the component tree.
12. What are render props in React?
Answer:
A render prop is a technique for sharing code by passing a function as a prop to a component.
<DataProvider render={(data) => <List data={data} />} />
Explanation:
Allows components to be flexible with rendering logic.
13. Why is immutability important in React state management?
Answer:
React relies on detecting changes in state via reference comparison. Immutability ensures
predictable updates and efficient re-renders.
Explanation:
Avoid direct mutation (e.g., state.push()) and always return new objects/arrays.
14. What happens if you update state during rendering?
Answer:
React throws an error: Too many re-renders. React limits the number of renders to prevent an
infinite loop.
Explanation:
State updates must be in event handlers or lifecycle methods, not during render.
15. What are some popular performance optimizations in React apps?
Answer:
Code splitting (React.lazy, Suspense)
Memoization (React.memo, useMemo, useCallback)
Virtualization (react-window)
Avoiding inline functions/props
Batching state updates
Explanation:
Performance tuning ensures smooth UX in complex apps with heavy DOM usage.
