Question 1

What is a closure? Give an example.

Accepted Answer

A closure is a function that remembers variables from the scope where it was created, even after that scope has finished. Example: "function counter() { let count = 0; return () => ++count; } - each call to the returned function increases the same count, which nothing else can touch."

Question 2

Explain the event loop.

Accepted Answer

JavaScript runs one thing at a time on the call stack. Async callbacks wait in queues; when the stack is empty, microtasks (promise callbacks) run first, then the next task (like a setTimeout callback).

Question 3

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

Accepted Answer

== converts types before comparing; === compares value and type without conversion. Use === by default.

Question 4

What is event delegation?

Accepted Answer

Attach one listener to a parent instead of many to children, and use event.target to see which child was clicked. It works because events bubble up.

Question 5

How does useEffect work, and what is the dependency array for?

Accepted Answer

useEffect runs after render. The dependency array controls when it re-runs: empty means once on mount; listed values mean when they change. Return a cleanup function for subscriptions and timers.

Question 6

Why do lists in React need keys?

Accepted Answer

Keys tell React which item is which between renders, so it can update, add or remove the right elements. Use stable IDs, not array indexes, when items can reorder.

Question 7

When would you use Context, and when a state library like Redux?

Accepted Answer

Context suits values many components read but rarely change - theme, user. A state library helps with large, frequently changing shared state and tooling. Keep state local whenever you can.

Question 8

Flexbox vs Grid - when do you use each?

Accepted Answer

Flexbox lays things out in one direction - a navbar, a row of buttons. Grid handles two dimensions - page layouts, card grids. They work well together.

Question 9

How would you make a slow page faster?

Accepted Answer

Measure first (Lighthouse, the Performance panel). Then: smaller bundles with code splitting, compressed and lazy-loaded images, fewer re-renders (memo, stable props), and caching API calls.

Question 10

How do you make a site accessible?

Accepted Answer

Semantic HTML (button, nav, label), alt text for images, keyboard navigation and visible focus, enough colour contrast, and ARIA only where HTML isn't enough.

Question 11

What should freshers prepare for frontend interviews?

Accepted Answer

HTML, CSS (flexbox, grid, responsive design), JavaScript fundamentals (closures, promises, array methods) and React basics. A small deployed project you can explain helps a lot.

Question 12

Do frontend interviews have coding rounds?

Accepted Answer

Often - JavaScript problems such as debounce, array manipulation or building a small component live, plus sometimes general data-structure questions.

Question 13

Is TypeScript asked in frontend interviews?

Accepted Answer

Increasingly. Know basic types, interfaces, generics and how you typed props and state in a project.

Frontend developer interview questions and answers

What to revise before the interview

1.What is a closure? Give an example.

2.Explain the event loop.

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

4.What is event delegation?

5.How does useEffect work, and what is the dependency array for?

6.Why do lists in React need keys?

7.When would you use Context, and when a state library like Redux?

8.Flexbox vs Grid - when do you use each?

9.How would you make a slow page faster?

10.How do you make a site accessible?

Frequently asked questions

Company interview guides for this role

Related roles and topics

Practise these questions for your next interview