Skip to contentSkip to footer

Senior Frontend Developer Interview Questions

Salaries
Interviews

1,607 senior frontend developer interview questions shared by candidates

Round 1: Little discussion on project, javaScript event loop & output order questions, 'this' keyword, callbacks and setTimeout, event propagation and delegation in DOM, debounce function implementation and use cases in real world. Round 2: Little discussion on project, micro-frontend architecture, DSA question on max subarray sum, explain == vs === , implementation of stopwatch in React (machine coding), javascript concepts on scopes, hooks. Round 3: Little discussion on project, implementation of input search box in React (machine coding) with debounce API calls (500ms delay after typing stops), encouraged to use hooks and, if possible, custom hooks
avatar

Senior Frontend Developer

Interviewed at Tessell

3.1★
Oct 10, 2025

Round 1: Little discussion on project, javaScript event loop & output order questions, 'this' keyword, callbacks and setTimeout, event propagation and delegation in DOM, debounce function implementation and use cases in real world. Round 2: Little discussion on project, micro-frontend architecture, DSA question on max subarray sum, explain == vs === , implementation of stopwatch in React (machine coding), javascript concepts on scopes, hooks. Round 3: Little discussion on project, implementation of input search box in React (machine coding) with debounce API calls (500ms delay after typing stops), encouraged to use hooks and, if possible, custom hooks

### **Performance Optimization** * What approaches do you use for performance optimization? * What tools have you applied for analysis and optimization (e.g., Chrome DevTools, Lighthouse, React Profiler, etc.)? --- ### **JavaScript: Functions and Context** * What is a **self-returning function**, and where can it be applied? * What is the difference in the context (`this`) between a regular function and an arrow function? * Do arrow functions have an `arguments` object? * Why does the `bind` method preserve context permanently? (context is preserved through closure) --- ### **ES6+ and Working with Data** * What new features appeared in ES6 that are actively used in everyday development? * `Map` and `Set`: how do they differ from `Object` and `Array`? * Destructuring: * What are its advantages? * What **problems may arise when destructuring an object**? * Attempting to destructure `undefined` or `null` * Name conflicts * Missing required fields * Deep nesting without safe navigation (e.g., lack of optional chaining) --- ### **Design Patterns** * What design patterns do you know? * Which of them have you applied in frontend development and for what purpose? --- ## Tasks: ```jsx // Task 1: What will be logged to the console, and how to fix the last undefined? const dog = { name: 'Viking', localFunc: function() { console.log("localfunc: " + this.name); }, localArrowFunc: () => { console.log("localArrowFunc: " + this.name); } }; //dog.localFunc(); //dog.localArrowFunc(); const local = dog.localFunc; //local(); // Task 2: Implement const result const chain = x => ({ add: y => chain(x + y), sub: y => chain(x - y), mult: y => chain(x * y), div: y => chain(x/y), get: () => x }); const result = chain(10).add(5).sub(2).add(3).div(3).mult(4).get(); console.log(result); // Task 3: What will be printed, and in what order? var promise = new Promise((resolve) => { console.log(4); resolve(); console.log(5); }); console.log(1); setTimeout(() => { console.log(7); }, 0); console.log(2); promise.then(() => { console.log(6); }); console.log(3); // Task 4: Add text to specific elements without changing HTML // Solution: .myList { li:nth-child(3n)::after { content: "FIZZ"; } li:nth-child(5n)::after { content: "BUZZ"; } li:nth-child(15n)::after { content: "FIZZBUZZ"; } } ``` --- ### **Design Patterns** * What design patterns do you know? * Which ones have you used in practice and for what purpose? --- ### **Data Storage and Page Reload** * How can you reload the page while preserving user data (login, token, etc.)? * What is the difference between `localStorage`, `sessionStorage`, and `cookie`? --- ### **Cookies** * What are cookies? * How are cookies transferred between client and server? * Who sets cookies, and how can they be deleted: * on the client? * in the browser? * on the server? * Is it correct to call them HTTP cookies, or is there a more precise term? --- ### **Caching** * How can DNS be configured to improve resource loading speed? * Who is responsible for caching, and how can it be implemented for fonts, images, and code? * What caching strategies are used in practice? --- ### **Optimization of Heavy Computations on Frontend** * What should you do if resource-intensive computations need to be performed in the browser? * How can such operations be optimized so as not to block the UI (e.g., via Web Workers)? --- ### **Image Loading Optimization** * How to optimize the loading of a large number of images: * on the frontend side? * on the network transfer side? * What is `dns-prefetch` in the `` tag, and why is it needed? * What techniques are used for image loading optimization? --- ### **Testing** * What is the difference between unit tests and UI tests? * When and which ones should be applied? --- ### **High Order Components (HOC)** * What is a HOC (Higher-Order Component)? * Where and for what purpose did you apply this pattern? --- ### **Lighthouse and Performance** * What does the `premap` item mean in the Lighthouse tab? --- ### **Accessibility (a11y)** * What is accessibility in web applications? * What practices and tools do you use to ensure accessibility? * What is a focus trap, and where is it applied? --- ### **Collaboration Formats** * What is the difference between outsourcing and outstaffing? * In which format does your company operate? --- ### **Organizational Questions** * I was interviewed not for a specific project. Could you clarify: * Is this an interview for the company or for a project? * Will project assignment be planned after the interview? * Are you satisfied with the interview results? This question remained unanswered earlier. --- ### **Event Loop**
avatar

Senior Frontend Developer

Interviewed at Luxoft

3.7★
Aug 24, 2025

### **Performance Optimization** * What approaches do you use for performance optimization? * What tools have you applied for analysis and optimization (e.g., Chrome DevTools, Lighthouse, React Profiler, etc.)? --- ### **JavaScript: Functions and Context** * What is a **self-returning function**, and where can it be applied? * What is the difference in the context (`this`) between a regular function and an arrow function? * Do arrow functions have an `arguments` object? * Why does the `bind` method preserve context permanently? (context is preserved through closure) --- ### **ES6+ and Working with Data** * What new features appeared in ES6 that are actively used in everyday development? * `Map` and `Set`: how do they differ from `Object` and `Array`? * Destructuring: * What are its advantages? * What **problems may arise when destructuring an object**? * Attempting to destructure `undefined` or `null` * Name conflicts * Missing required fields * Deep nesting without safe navigation (e.g., lack of optional chaining) --- ### **Design Patterns** * What design patterns do you know? * Which of them have you applied in frontend development and for what purpose? --- ## Tasks: ```jsx // Task 1: What will be logged to the console, and how to fix the last undefined? const dog = { name: 'Viking', localFunc: function() { console.log("localfunc: " + this.name); }, localArrowFunc: () => { console.log("localArrowFunc: " + this.name); } }; //dog.localFunc(); //dog.localArrowFunc(); const local = dog.localFunc; //local(); // Task 2: Implement const result const chain = x => ({ add: y => chain(x + y), sub: y => chain(x - y), mult: y => chain(x * y), div: y => chain(x/y), get: () => x }); const result = chain(10).add(5).sub(2).add(3).div(3).mult(4).get(); console.log(result); // Task 3: What will be printed, and in what order? var promise = new Promise((resolve) => { console.log(4); resolve(); console.log(5); }); console.log(1); setTimeout(() => { console.log(7); }, 0); console.log(2); promise.then(() => { console.log(6); }); console.log(3); // Task 4: Add text to specific elements without changing HTML // Solution: .myList { li:nth-child(3n)::after { content: "FIZZ"; } li:nth-child(5n)::after { content: "BUZZ"; } li:nth-child(15n)::after { content: "FIZZBUZZ"; } } ``` --- ### **Design Patterns** * What design patterns do you know? * Which ones have you used in practice and for what purpose? --- ### **Data Storage and Page Reload** * How can you reload the page while preserving user data (login, token, etc.)? * What is the difference between `localStorage`, `sessionStorage`, and `cookie`? --- ### **Cookies** * What are cookies? * How are cookies transferred between client and server? * Who sets cookies, and how can they be deleted: * on the client? * in the browser? * on the server? * Is it correct to call them HTTP cookies, or is there a more precise term? --- ### **Caching** * How can DNS be configured to improve resource loading speed? * Who is responsible for caching, and how can it be implemented for fonts, images, and code? * What caching strategies are used in practice? --- ### **Optimization of Heavy Computations on Frontend** * What should you do if resource-intensive computations need to be performed in the browser? * How can such operations be optimized so as not to block the UI (e.g., via Web Workers)? --- ### **Image Loading Optimization** * How to optimize the loading of a large number of images: * on the frontend side? * on the network transfer side? * What is `dns-prefetch` in the `` tag, and why is it needed? * What techniques are used for image loading optimization? --- ### **Testing** * What is the difference between unit tests and UI tests? * When and which ones should be applied? --- ### **High Order Components (HOC)** * What is a HOC (Higher-Order Component)? * Where and for what purpose did you apply this pattern? --- ### **Lighthouse and Performance** * What does the `premap` item mean in the Lighthouse tab? --- ### **Accessibility (a11y)** * What is accessibility in web applications? * What practices and tools do you use to ensure accessibility? * What is a focus trap, and where is it applied? --- ### **Collaboration Formats** * What is the difference between outsourcing and outstaffing? * In which format does your company operate? --- ### **Organizational Questions** * I was interviewed not for a specific project. Could you clarify: * Is this an interview for the company or for a project? * Will project assignment be planned after the interview? * Are you satisfied with the interview results? This question remained unanswered earlier. --- ### **Event Loop**

Calendar App Implement a clone of Google Calendar’s day view that allows creating, editing, and deleting events. Specifications: 1. Show date for the day at the top, as well as 24 1-hour blocks in one column. Labels for hours should be displayed on the left beside each block. 2. Events are rectangles that span one or multiple blocks. ○ Assume event start/end times are EXACTLY on the hour (eg. 2pm-5pm, but don’t need to handle 2:03pm-5:07pm). 3. Add a header below today’s date with 3 inputs at the top of the page. The header has 3 inputs (start time, end time, name) and a button to save. ○ The header is always visible. ○ Saving creates the event and clears the input fields. ○ The start time input’s default value is populated by the hour corresponding to which empty cell you clicked on. 4. Clicking an existing event should autofill the header inputs to edit event details (start time, end time, and name only) ○ The start/end/name inputs is default populated by the event’s current details. ○ On save button click, calendar updates. ○ When editing an existing event, there should be a button to delete the event. ○ Deleting an event clears the input fields. Notes: ● Primary goal is functionality, not styling. Don’t worry about copying Google Calendar styles. ● It may be easier to use number instead of Date to represent time General: ● You can use Google to look up documentation, articles, and code examples. ● You may install and use libraries for data fetching, styling, and state management. ● TypeScript is not required
avatar

Senior Software Engineer | Frontend

Interviewed at Ramp

3.9★
Jan 9, 2024

Calendar App Implement a clone of Google Calendar’s day view that allows creating, editing, and deleting events. Specifications: 1. Show date for the day at the top, as well as 24 1-hour blocks in one column. Labels for hours should be displayed on the left beside each block. 2. Events are rectangles that span one or multiple blocks. ○ Assume event start/end times are EXACTLY on the hour (eg. 2pm-5pm, but don’t need to handle 2:03pm-5:07pm). 3. Add a header below today’s date with 3 inputs at the top of the page. The header has 3 inputs (start time, end time, name) and a button to save. ○ The header is always visible. ○ Saving creates the event and clears the input fields. ○ The start time input’s default value is populated by the hour corresponding to which empty cell you clicked on. 4. Clicking an existing event should autofill the header inputs to edit event details (start time, end time, and name only) ○ The start/end/name inputs is default populated by the event’s current details. ○ On save button click, calendar updates. ○ When editing an existing event, there should be a button to delete the event. ○ Deleting an event clears the input fields. Notes: ● Primary goal is functionality, not styling. Don’t worry about copying Google Calendar styles. ● It may be easier to use number instead of Date to represent time General: ● You can use Google to look up documentation, articles, and code examples. ● You may install and use libraries for data fetching, styling, and state management. ● TypeScript is not required

Viewing 1421 - 1430 interview questions

Glassdoor has 1,607 interview questions and reports from Senior frontend developer interviews. Prepare for your interview. Get hired. Love your job.