Skip to contentSkip to footer

Senior Frontend Developer Interview Questions

Salaries
Interviews

1,358 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**

Viewing 1201 - 1210 interview questions

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