SAP Labs India Frontend Engineer Interview: Rounds, Questions and Preparation

What the job involves

Frontend Engineers build and maintain the user-facing parts of web applications, translating design mockups into responsive, accessible, and performant interfaces. In global tech product companies, they collaborate with designers, backend engineers, and product managers to ship features used by customers worldwide. Day to day work includes writing component code, fixing UI bugs, optimising page load speed, and participating in code reviews.

Role and Technical Knowledge

1. 1

   Explain the difference between let, const, and var in JavaScript.

   Cover block scoping, hoisting, and reassignment rules. Mention that const prevents reassignment but not mutation of objects.

2. 2

   How does the virtual DOM work in React, and why is it useful?

   Describe how React keeps a lightweight copy of the UI, diffs it on state change, and updates only changed real DOM nodes for performance.

3. 3

   What are semantic HTML elements, and why should a frontend engineer use them?

   Name examples like header, nav, main, article, and footer. Explain benefits for accessibility, SEO, and code readability.

4. 4

   How do you make a web page responsive using CSS?

   Discuss media queries, flexible units like rem and vw, Flexbox or Grid, and mobile-first design approach.

Practical Scenarios

1. 5

   A page you built loads slowly on mobile networks. How would you diagnose and fix it?

   Mention checking network waterfall, image compression, lazy loading, code splitting, minification, and reducing third-party scripts.

2. 6

   You need to fetch user data from an API and display it in a list with a loading spinner. Walk through your approach.

   Describe using fetch or axios inside useEffect, managing loading and error states, and rendering a spinner until data arrives.

3. 7

   A button on your form works in Chrome but not in Safari. How do you debug it?

   Talk about checking browser compatibility, using caniuse, testing event handling differences, and using browser dev tools or polyfills.

4. 8

   How would you implement client-side form validation for an email and password field?

   Cover using HTML5 input types, JavaScript regex or built-in validation, showing inline error messages, and preventing submission on invalid input.

Behavioural and HR

1. 9

   Tell me about a time you had to learn a new frontend technology quickly for a project.

   Use STAR method. Highlight the technology, how you learned it, and the positive outcome for the project.

2. 10

   Describe a situation where you disagreed with a teammate's design or code approach. How did you handle it?

   Show respect, data-driven discussion, and willingness to compromise. End with a constructive resolution.

3. 11

   Why do you want to work as a Frontend Engineer at a global product company?

   Connect personal interest in user experience with the scale and impact of global products. Mention desire to learn from diverse teams.

4. 12

   Where do you see yourself in three years as a frontend developer?

   Show growth mindset: deepening framework expertise, contributing to architecture, and mentoring juniors.

Problem Solving and Coding

1. 13

   Write a function that takes an array of numbers and returns the sum of all even numbers.

   Use filter and reduce or a simple loop. Explain time complexity and handle edge cases like empty array.

2. 14

   Given a string, write a function to check if it is a palindrome.

   Cover normalisation (lowercase, remove non-alphanumeric), two-pointer or reverse-and-compare approach, and edge cases.

3. 15

   How would you implement a debounce function in JavaScript?

   Explain delaying function execution until after a pause in calls. Show a closure-based implementation with setTimeout and clearTimeout.

4. 16

   Explain how you would flatten a nested array without using Array.flat().

   Use recursion or reduce with concat. Discuss handling different depths and avoiding stack overflow for very deep arrays.