Frontend Developer Interview Prep

var: function-scoped, hoisted, can be redeclared. Avoid in modern code. let: block-scoped, hoisted but not initialised (temporal dead zone), can be reassigned. const: block-scoped, must be initialised, cannot be reassigned (but contents of objects can still be mutated). Rule: use const by default, let when you need to reassign, never var.

== compares values with type coercion (loose). === compares values AND types (strict). Use === almost always. Examples: '5' == 5 is true; '5' === 5 is false. null == undefined is true but null === undefined is false. The loose equality rules are confusing, so just use ===.

Virtual DOM is a lightweight JavaScript representation of the actual DOM. When state changes, React builds a new virtual DOM, diffs it against the previous one, and applies only the minimal changes to the real DOM. The real DOM is slow to update; the virtual DOM is fast. Result: better performance, especially when re-rendering large UIs.

Hooks let function components use state and lifecycle features. Most-used: useState (local state), useEffect (side effects like API calls), useContext (read from context), useMemo and useCallback (memoisation to avoid re-renders), useRef (DOM access or mutable values that don't trigger re-renders). Custom hooks let you extract reusable logic.

Profile first with React DevTools Profiler. Common fixes: (1) Use React.memo for components that re-render with same props. (2) useMemo for expensive calculations. (3) useCallback for functions passed to memoised children. (4) Split state — local state where possible instead of global. (5) Code-split with React.lazy for routes. (6) Virtualise long lists with react-window. (7) Move heavy work off the main thread with web workers.

Specificity: !important > inline > id > class/attribute > element. When two rules conflict, the more specific wins. To resolve: use more specific selectors, restructure CSS to avoid conflicts, use BEM or CSS-in-JS for predictable scoping, avoid !important except as last resort. Modern apps use Tailwind or CSS Modules to avoid these issues entirely.

Every element is a box made of: content, padding, border, margin. The total width = content + padding + border + margin (with box-sizing: content-box, the default). With box-sizing: border-box, the declared width includes padding and border. Use border-box everywhere — it is more predictable.

(1) Use semantic HTML (button, nav, main, article — not divs). (2) Alt text on every image. (3) Sufficient colour contrast (4.5:1 for normal text, WCAG AA). (4) Keyboard navigation: tab order makes sense, focus visible. (5) ARIA labels only when semantic HTML is not enough. (6) Form labels properly associated with inputs. (7) Test with a screen reader (VoiceOver, NVDA). (8) Avoid 'click here' link text — use descriptive labels.

CSR: HTML is empty, JS loads and builds the page in the browser. Slow first paint, bad SEO. SSR: server builds HTML per request. Faster first paint, good SEO, but slower than static. SSG: HTML built at deploy time, served as static files. Fastest, best for content that doesn't change per user. Modern frameworks (Next.js, Nuxt) let you mix all three on a per-page basis.

Use Chrome DevTools Performance tab. Record a session. Look at: (1) Network: large/unoptimised images, too many requests, slow API calls. (2) Render: layout thrashing, expensive CSS, large DOM. (3) JS: long tasks blocking the main thread, large bundle size. (4) Lighthouse report for an overall audit. Common fixes: lazy-load images, code-split, defer non-critical JS, optimise images (WebP, srcset), CDN, cache headers.

Have a portfolio site live. Pick one project. Cover: the problem, the tech stack, an interesting technical decision, what you would do differently. Show the code. Show the deployed site. Show what you learned.

Reproduce first — open Safari with the same conditions. Open Safari Web Inspector (Develop menu). Check the Console for JS errors. Check the Network tab when submitting. Common Safari issues: differences in date input handling, fetch CORS quirks, older JS feature support. Use Can I Use to check feature support. Add a polyfill or workaround. Add a Safari test to your CI to prevent regression.