Easy interview questions in Frontend Dev, page 3
What is getElementById's return type and the check needed for .value?
Tests strict null awareness: getElementById returns HTMLElement or null, so null-check first. Strong answers note HTMLElement lacks .value, requiring narrowing to HTMLInputElement. Red flag: assuming a valid element is always returned.
What is the fundamental difference between client-side and server-side routing?
Server routes return full documents and reload; client routes swap JS views and use the History API without server requests.
What is the click event's type and how to reference the button?
Handler receives a MouseEvent. Use event.currentTarget for the attached button, since event.target may be a nested child.
Primary roles of BrowserRouter, Routes, and Route, and basic route setup
Tests v6 routing hierarchy. BrowserRouter provides history; Routes picks one match; Route maps path to element. Wrap Routes in BrowserRouter with nested Route elements for / and /about. Red flag: omitting the router or confusing Routes with Switch.
Why use Link over <a> for internal navigation?
This tests client-side routing vs full page reloads. A strong answer covers click interception, History API URL updates, and route prefetching. A red flag is claiming Link is purely stylistic or identical to a plain anchor.
Vue 3 ref() vs reactive(): differences and when to use each
Tests Vue 3 Composition API reactivity primitives. Strong answer: ref() wraps any value in a .value wrapper and is the recommended default; reactive() returns a proxy accessed directly. Red flag: saying ref() is only for primitives or omitting .value entirely.
How do you trigger a CSS transition? Provide two methods.
Set transition on the element, then change a property via :hover or by toggling a class with JavaScript.
What is ngOnInit's purpose and why prefer it over the constructor?
Tests Angular lifecycle timing and input binding. Strong answer: ngOnInit runs once after inputs are initialized, but the constructor instantiates the class before bindings exist.
How do you update Svelte arrays and objects to trigger reactivity?
This tests knowledge of Svelte 5 deep reactivity: $state wraps arrays in proxies so push and property mutations trigger updates. Mention $state first, then note legacy syntax needs reassignment. A red flag is claiming push never works in Svelte.
How do you wrap a callback-based API into a Promise?
This tests Promise constructor mechanics and callback migration. A strong answer returns a new Promise, calls the legacy function, maps success to resolve and errors to reject.
Explain controlled vs uncontrolled React form inputs and trade-offs
Tests state versus DOM ownership. Controlled inputs bind to React state via onChange; uncontrolled inputs read from DOM via refs. Trade-offs: reactivity, validation, complexity. Red flag: saying uncontrolled is easier while ignoring lost live validation.
How do you handle a basic form submission in React?
Tests declarative form handling via controlled state. Nail it with onSubmit on the form, preventDefault to stop native reload, and state as the single source of truth. Red flag: reading values through refs or querySelector.
Explain the BEM naming convention
Block is a standalone component, Element is a child tied by double underscore, Modifier is a variant by double dash, keeping specificity flat.
What are the two principles of OOCSS?
Separate structure from skin, and separate container from content; this lets visual themes and layout be mixed and reused independently.
What attribute scopes styles to a Vue component?
This tests knowledge of Vue's style encapsulation. Add the scoped attribute to the style tag; Vue adds a unique data attribute to elements and selectors. A red flag is suggesting manual BEM or claiming scoped styles never affect child components.
What is Angular's default style encapsulation mechanism called?
Tests if you know Angular's default view encapsulation. A strong answer names ViewEncapsulation.Emulated, describes the unique attribute selector rewrite, and warns that global styles still pierce inward.
How does Svelte scope component styles during compilation?
The compiler adds a unique attribute to component elements and rewrites selectors to target it, isolating styles.
Write a fetch call and log JSON from the Response
This tests async HTTP literacy and fetch's two-stage promise resolution. A strong answer awaits fetch, then awaits response.json(), logs result, and notes fetch does not throw on 4xx/5xx.
How would you modify fetch to handle HTTP error statuses?
Verify response.ok in then and throw if false, then catch network failures separately.
Write a createUser function that POSTs JSON via fetch
Precise fetch configuration for JSON POST requests. A strong answer names method POST, headers Content-Type application/json, and body JSON.stringify(data) with return typing. Red flag: passing the raw object as body or omitting headers.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles