Frontend development is evolving rapidly, but companies still place heavy emphasis on core JavaScript and React fundamentals during technical rounds. If you are preparing for a frontend developer position, make sure you can answer these top 15 questions.
1. What is a closure in JavaScript?
A closure is the combination of a function bundled together with references to its surrounding state (the lexical environment). In simple terms, a closure gives an inner function access to the outer function's variables even after the outer function has returned.
function outerFunction(outerVariable) {
return function innerFunction(innerVariable) {
console.log('Outer:', outerVariable);
console.log('Inner:', innerVariable);
}
}
const newFunction = outerFunction('outside');
newFunction('inside');
# Output:
# Outer: outside
# Inner: inside2. Difference between var, let, and const?
var: Function-scoped. Can be redeclared and updated. Hoisted with a default value of undefined.let: Block-scoped. Cannot be redeclared but can be updated. Hoisted but placed in a "temporal dead zone" (cannot be accessed before declaration).const: Block-scoped. Cannot be redeclared or updated. Must be initialized at the time of declaration.
3. What is the Event Loop in JavaScript?
JavaScript is single-threaded, meaning it executes code line by line. The Event Loop is a mechanism that allows JavaScript to perform non-blocking asynchronous operations. It constantly monitors the Call Stack and the Callback Queue (and Microtask Queue). If the Call Stack is empty, it pushes the first task from the queue to the stack for execution.
4. Difference between == and === in JavaScript?
==(Loose equality): Compares values after performing type coercion (converting operands to the same type before comparison).===(Strict equality): Compares both value and type. No type conversion is performed.
5 == '5' # Returns true
5 === '5' # Returns false5. What is the Virtual DOM in React?
The Virtual DOM is a lightweight, in-memory representation of the real DOM. When a component's state changes:
- React creates a new Virtual DOM tree.
- It compares this new tree with the previous Virtual DOM tree (a process called Diffing).
- React calculates the minimum number of changes needed and updates only those specific parts in the real DOM (a process called Reconciliation). This makes UI updates incredibly fast.
6. What is the purpose of useEffect Hook in React?
The useEffect hook allows you to perform side effects in functional components, such as data fetching, subscribing to events, or modifying the DOM.
useEffect(() => {
// Code to run on mount / update
console.log("Component mounted");
return () => {
// Cleanup code (runs on unmount)
console.log("Component will unmount");
};
}, [dependencyArray]);7. What is Prop Drilling, and how can it be avoided?
Prop drilling is the process of passing data down through multiple levels of nested components, even though intermediate components do not need that data. It can be avoided using:
- React Context API
- State Management Libraries (like Redux Toolkit, Zustand)
- Component Composition (passing components as props)
8. State vs Props in React?
- State: Internal data managed locally within a component. It is mutable (via setter function) and triggers a re-render when updated.
- Props: External data passed into a component from its parent. Props are read-only (immutable) to the receiving component.
9. What are React Keys, and why are they important?
Keys are unique string identifiers that React uses to identify which items in a list have changed, been added, or been removed. They help React optimize the reconciliation process. Do not use index as keys if the list order can change, as it can cause UI rendering bugs.
10. What are Custom Hooks in React?
A custom hook is a Javascript function whose name starts with "use" and that can call other hooks. They allow you to extract component logic into reusable functions.
11–15: Quick-Fire Concepts
- What is Hoisting? JavaScript's default behavior of moving variable and function declarations to the top of their scope before execution.
- Arrow functions vs Normal functions? Arrow functions do not have their own
thiscontext; they inherit it lexically. - What is React.memo? A higher-order component used to memoize functional components, preventing unnecessary re-renders if props don't change.
- Controlled vs Uncontrolled Components? Controlled: form inputs driven by React state. Uncontrolled: form inputs driven by the DOM itself (using refs).
- What is JSX? JavaScript XML. A syntax extension for JavaScript that allows writing HTML-like structure directly inside JavaScript code.
Frontend interviews test your understanding of asynchronous JavaScript and how React optimizes rendering. Master these concepts to stand out in your interviews.