Question 1

Explain the difference between `var`, `let`, and `const`. When would you actually use each?

Accepted Answer

Walk through scoping (function vs. block), hoisting behavior, and temporal dead zone for let/const. Give a concrete example where using var inside a for-loop with a closure produces a bug that let fixes. State your personal default: const unless reassignment is needed, let for loop counters, var almost never. What interviewers look for: They want to see you understand hoisting and closure interaction — not just memorize 'let is block-scoped.' The closure-in-loop example distinguishes candidates who have actually debugged JavaScript from those who only read about it.

Question 2

What is the event loop, and how do Promises and async/await relate to the call stack and microtask queue?

Accepted Answer

Draw the mental model: call stack → Web APIs → callback queue → microtask queue. Explain that Promise .then callbacks go into the microtask queue, which drains before the next macrotask (setTimeout). Write a short snippet with a setTimeout and a resolved Promise and predict the exact console output order. What interviewers look for: Interviewers check whether you can reason about async execution order, not just use async/await syntactically. Correctly predicting the output order of a mixed snippet is the concrete signal they want.

Question 3

A flex container has three children. Describe how you would make the first two items take equal space and the third item stick to the right edge.

Accepted Answer

Use `flex: 1` on the first two children (shorthand for flex-grow:1, flex-shrink:1, flex-basis:0). Then on the third child, use `margin-left: auto` — the idiomatic CSS trick that consumes remaining space and pushes the element right. Mention that `justify-content: space-between` is a common but wrong reach here when you need the first two equal. What interviewers look for: They're testing whether you know `margin-left: auto` inside flexbox, which is a practical trick that separates people who have built real UIs from people who only know the basics. If you jump straight to JS or absolute positioning, that's a red flag.

Question 4

Given an array of integers, return the indices of the two numbers that add up to a target (Two Sum). Solve it in O(n) time.

Accepted Answer

Use a hash map: iterate once, for each number check if `target - num` exists in the map, if not store `num → index`. Write the full function, handle edge cases (no solution, duplicate values), and walk through complexity. Don't start with the O(n²) brute force unless you use it to motivate the optimal solution. What interviewers look for: Two Sum at new-grad level is about seeing if you know to reach for a hash map for O(1) lookup. The signal isn't the problem difficulty — it's your fluency: clean code, correct complexity analysis, and whether you proactively handle edge cases without prompting.

Question 5

Implement a debounce function from scratch in JavaScript.

Accepted Answer

Write a function that takes `fn` and `wait`, returns a new function that uses `setTimeout` and `clearTimeout`. The inner function captures `timer` in closure. Demonstrate with a search input example. Then discuss the difference between debounce (fires after quiet period) and throttle (fires at most once per interval) — interviewers almost always follow up with this. What interviewers look for: Debounce is a near-universal frontend interview question because it tests closures, timers, and higher-order functions simultaneously. They want to see you write it correctly the first time, not with hints. Knowing the debounce vs. throttle distinction shows practical UI development experience.

Question 6

What happens in the browser between typing a URL and seeing a rendered page? Focus on the parts relevant to frontend performance.

Accepted Answer

Cover: DNS → TCP handshake → HTTP request → server response → HTML parsing → DOM construction → CSSOM construction → render tree → layout → paint → compositing. Call out the critical rendering path specifically. Highlight where you can intervene as a frontend engineer: preconnect, async/defer scripts, avoiding render-blocking CSS, lazy images. What interviewers look for: This is a depth-and-breadth check. They don't expect encyclopedic knowledge but they do expect you to know the critical rendering path and connect it to real optimization decisions. Candidates who stop at 'DNS and then HTML loads' are missing the frontend-specific knowledge this question probes.

Question 7

What is the difference between `useEffect` with no dependency array, an empty array, and a specific dependency? Give a real use case for each.

Accepted Answer

No deps array: runs after every render — use case: logging or syncing something on every update (rare, usually a mistake). Empty array: runs once on mount — use case: fetching initial data or setting up a subscription. Specific dep `[id]`: runs when `id` changes — use case: re-fetching data when a route param changes. Mention cleanup functions and why they matter for subscriptions and timers. What interviewers look for: Most candidates can recite the three cases. What interviewers actually want is correct use cases (especially the cleanup function for subscriptions) and a signal that you've used hooks in real code and understand the pitfalls — like missing deps causing stale closures.

Question 8

You notice your React component is re-rendering more than expected. How do you diagnose and fix it?

Accepted Answer

Diagnose: use React DevTools Profiler to identify which component re-renders and why. Common causes: parent re-renders, new object/array/function references on each render, context value changes. Fixes: `React.memo` for component memoization, `useMemo` for expensive computed values, `useCallback` for stable function references. Warn that premature optimization is real — measure first, fix second. What interviewers look for: This question tests whether you have actually debugged React performance, not just read the docs. The profiler mention is the key signal. Jumping straight to 'add useMemo everywhere' without measurement is a red flag at any level, even new grad.

Question 9

Design a simple autocomplete / typeahead search input component. Walk through the API interaction, UX concerns, and frontend state management.

Accepted Answer

Cover: debouncing keystrokes (300ms), cancelling in-flight requests (AbortController or ignore stale results), loading and error states, accessibility (aria-activedescendant, role=listbox, keyboard navigation), empty state, and caching recent results. Sketch the component state shape. Discuss where the API call lives (custom hook). Keep scope realistic — this is a component, not a distributed system. What interviewers look for: This is the canonical new-grad frontend design question. Interviewers look for: do you think about debouncing (most do), do you think about stale request cancellation (fewer do), do you mention accessibility (the differentiator). Scoping appropriately — not over-designing — is also evaluated.

Question 10

What is the CSS box model, and what does `box-sizing: border-box` change? When does it matter?

Accepted Answer

Explain: content + padding + border + margin. Default (content-box): width applies to content only, so padding and border add to total element size. Border-box: width includes padding and border, making layout math predictable. Show the arithmetic with a concrete example: a 200px div with 20px padding is 240px wide in content-box but 200px in border-box. Explain why `* { box-sizing: border-box }` is standard practice in every modern project. What interviewers look for: A table-stakes CSS question. The signal isn't just knowing the answer — it's whether you can explain the practical implication clearly with numbers, which shows you've actually wrestled with layout bugs, not just read MDN.

Question 11

Tell me about a project — a side project, class project, or internship — where something technically broke and you had to debug it under pressure. What did you do?

Accepted Answer

Use STAR (Situation, Task, Action, Result) but focus the Action on your specific debugging process: what tools you used, what hypotheses you formed, how you narrowed it down. Be honest about what you didn't know and how you figured it out. Don't fabricate scale ('millions of users') — interviewers can tell. What interviewers look for: At new grad level, interviewers are not looking for a dramatic war story. They're evaluating: do you have a systematic debugging approach, are you honest about your limits, and do you learn from failure? Candidates who say 'I Googled it and it worked' without explaining their reasoning process miss the signal.

Question 12

Describe a time you received critical feedback on your code — from a code review or a teammate — and how you handled it.

Accepted Answer

Pick a real example. Describe the feedback specifically (not just 'they said it could be better'), explain your initial reaction honestly, what you did to understand and address it, and what you changed going forward. The best answers show intellectual humility and active learning, not defensiveness or blind agreement. What interviewers look for: New grads are evaluated heavily on coachability because teams know they'll need to ramp up. Interviewers watch for: do you get defensive, do you engage with the substance of the feedback, and do you show that you actually updated your mental model as a result? This is one of the highest-signal behavioral questions for this level.

New Grad Frontend Engineer Interview Questions

What to expect

12 questions, with how to answer them

1. Explain the difference between `var`, `let`, and `const`. When would you actually use each?

2. What is the event loop, and how do Promises and async/await relate to the call stack and microtask queue?

3. A flex container has three children. Describe how you would make the first two items take equal space and the third item stick to the right edge.

4. Given an array of integers, return the indices of the two numbers that add up to a target (Two Sum). Solve it in O(n) time.

5. Implement a debounce function from scratch in JavaScript.

6. What happens in the browser between typing a URL and seeing a rendered page? Focus on the parts relevant to frontend performance.

7. What is the difference between `useEffect` with no dependency array, an empty array, and a specific dependency? Give a real use case for each.

8. You notice your React component is re-rendering more than expected. How do you diagnose and fix it?

9. Design a simple autocomplete / typeahead search input component. Walk through the API interaction, UX concerns, and frontend state management.

10. What is the CSS box model, and what does `box-sizing: border-box` change? When does it matter?

11. Tell me about a project — a side project, class project, or internship — where something technically broke and you had to debug it under pressure. What did you do?

12. Describe a time you received critical feedback on your code — from a code review or a teammate — and how you handled it.

Study tips