Frontend Developer · Intern to senior

Frontend Developer Interview Questions and Answers

Frontend interviews combine language fundamentals (closures, the event loop, async code) with framework knowledge and an understanding of how the browser renders and updates the page.

Download Frontend Developer PDF93 questions

93 questions

BehavioralEasyBehavioral
Why do you want to work for our company?
Connect something specific about the company, product, engineering challenges or team to your own experience and career goals.
Intern · Junior · Behavioral Interviews
ReactEasy
What are React hooks and what are the rules of hooks?
Hooks are functions such as useState and useEffect that let function components use state, lifecycle behaviour and other React features; they must be called at the top level of a component or custom hook, never inside loops, conditions or nested functions.
Junior · Mid-level · React Hooks
ReactEasy
Why do we need keys in React lists?
Keys give each list item a stable identity so React can match items between renders and correctly add, remove or reorder them without recreating or mixing up their state.
Junior · Mid-level · Performance
CSSEasy
What is the difference between em, rem, %, vh and vw in CSS?
em is relative to the parent font size, rem is relative to the root font size, % is relative to the parent’s relevant size, and vh/vw are 1% of the viewport height or width.
Junior · Mid-level · CSS Layout
HTMLEasy
What is the difference between cookies, localStorage and sessionStorage?
Cookies are sent to the server with every matching request and can expire; localStorage persists until cleared and stays in the browser; sessionStorage lasts for the current tab only.
Junior · Mid-level · Browser & DOM
Software TestingEasy
What is the test pyramid?
The test pyramid is a guideline to have many fast unit tests at the base, fewer integration tests in the middle and only a small number of slow end-to-end tests at the top, so the suite stays fast and reliable.
Junior · Mid-level · Testing
JavaScriptEasyCoding
How do you solve the Two Sum problem in JavaScript?
Walk through the array once while storing each number’s index in a hash map; for every number, check whether target minus that number is already in the map. This runs in O(n) time and O(n) space.
Junior · Mid-level · Coding Problems
JavaScriptMedium
What is a closure in JavaScript and why is it useful?
A closure is a function that keeps access to the variables of the scope where it was created, even after that outer function has finished running.
Junior · Mid-level · Functions & Scope
JavaScriptMedium
How does the this keyword work in JavaScript?
this is decided by how a function is called, not where it is written: as a method it is the object before the dot, with new it is the new object, and arrow functions inherit it from the enclosing scope.
Junior · Mid-level · Functions & Scope
JavaScriptMedium
What is the difference between promises and async/await in JavaScript?
async/await is syntax built on top of promises that lets you write asynchronous code that reads like synchronous code; under the hood every async function returns a promise.
Junior · Mid-level · Asynchronous Programming
JavaScriptMedium
What is event delegation in JavaScript?
Event delegation means attaching one listener to a parent element and using event bubbling to handle events from its children, instead of adding a listener to each child.
Junior · Mid-level · Browser & DOM
ReactMedium
How does useEffect work in React and what is the dependency array?
useEffect runs a function after the component renders; the dependency array tells React when to re-run it: with no array it runs after every render, with an empty array only after the first, and with values only when those values change.
Junior · Mid-level · React Hooks
ReactMedium
What is the difference between controlled and uncontrolled components in React?
A controlled component keeps the input's value in React state and updates it through onChange, while an uncontrolled component lets the DOM hold the value and you read it with a ref when needed.
Junior · Mid-level · State Management
ReactMedium
What is prop drilling and how do you avoid it in React?
Prop drilling is passing props through several layers of components that do not use them just to reach a deeply nested child; you avoid it with composition, the Context API or a state management library.
Junior · Mid-level · State Management
CSSMedium
What is the difference between relative, absolute, fixed and sticky positioning in CSS?
Relative offsets an element from its normal place; absolute positions it against the nearest positioned ancestor; fixed is against the viewport; sticky sits in normal flow until a scroll threshold, then sticks.
Junior · Mid-level · CSS Layout
CSSMedium
What is the difference between Flexbox and CSS Grid?
Flexbox is one-dimensional (a row or a column). CSS Grid is two-dimensional (rows and columns at once). Use Flexbox for alignment along a line; use Grid when the layout is a real 2D structure.
Junior · Mid-level · CSS Layout
CSSMedium
How does CSS specificity work?
Specificity is the score the browser uses to decide which rule wins: inline styles beat IDs, IDs beat classes/attributes/pseudo-classes, and those beat elements. When scores tie, the last rule in the source wins.
Junior · Mid-level · CSS Layout
TypeScriptMedium
What is the difference between any, unknown and never in TypeScript?
any turns off checking. unknown is a type-safe any: you must narrow it before use. never means a value cannot exist, used for exhaustive checks and functions that always throw.
Junior · Mid-level · Types & Type System
TypeScriptMedium
What are generics in TypeScript?
Generics are type parameters: they let a function, class or type work with many types while keeping the relationship between inputs and outputs, instead of falling back to any.
Junior · Mid-level · Types & Type System
TypeScriptMedium
What are union and intersection types in TypeScript?
A union (A | B) is a value that is one of the members. An intersection (A & B) is a value that must satisfy both types at once.
Junior · Mid-level · Types & Type System