My Interview Experience for an SDE-2 Frontend Position at Zepto and Advanced JavaScript Coding…

Overview

This document outlines the interview experience for a Senior Frontend Engineer (SDE-2) position at Zepto. The interview process covered core JavaScript concepts, problem-solving abilities, UI design skills, and discussions on scalability and maintainability within frontend development. The candidate's experience provides insights into the technical expectations for senior frontend roles and offers advanced coding problems to enhance understanding of key JavaScript and frontend development techniques.

Interview Rounds

The interview process consisted of three rounds:

1. JavaScript Round

This round focused heavily on JavaScript fundamentals. The candidate was tested on the following concepts:

• Event Loop: The candidate was asked to explain how the event loop manages asynchronous tasks and the execution order of different tasks, including Promises and setTimeout.
• Promises and Async/Await: The discussion involved handling asynchronous operations using Promises and async/await, including their differences and how async/await enhances code readability and maintainability.
• Hoisting: The candidate was questioned on how variables and functions are hoisted in JavaScript, with specific attention to the behavior of var, let, and const.
• Closures: The interviewer presented use cases for closures and requested an explanation of their underlying mechanism, especially concerning function scopes and variable retention.
• Prototypes and Inheritance: The candidate demonstrated knowledge of object-oriented programming in JavaScript through a deep dive into JavaScript's prototype chain and the Object.create() method.
• The "this" Keyword: Understanding the behavior of this in different contexts, such as event handlers and object methods, was assessed.
• Flattening Objects: The candidate showcased techniques for flattening deeply nested objects.

2. Machine Coding Round

This round was a practical coding challenge that involved designing a form-based UI using React.js in CodeSandbox. The requirements included creating three tabs (Profile, Interest, and Settings) with specific field validations:

• Age Field: Only numeric values were allowed.
• Email Field: Validation to ensure the correct format.

The candidate had to incorporate dropdowns, radio buttons, and checkboxes, and implement:

• Validation for mandatory fields.
• Data persistence across tabs.
• A Submit button that submitted the entire form only on the last tab.

The interviewer initiated a discussion on scalability and maintainability, suggesting the creation of a form configuration object to dynamically generate the form.

3. Hiring Manager Round

This round centered on the candidate's past projects and real-world experiences. Topics included:

• Project Walkthrough: The candidate explained the tech stack and their specific contributions to live projects.
• Challenges & Solutions: The candidate shared insights into performance challenges in frontend applications and the strategies used to overcome them.
• Design Patterns: The application of design patterns like Singleton, Factory, and Observer in previous projects was explored.
• Code Organization: Best practices for organizing code, especially in large-scale applications, were discussed.
• Performance Optimization: Techniques like lazy loading, code splitting, and caching strategies for optimizing frontend performance were detailed.
• Collaboration: The candidate discussed their experience working with backend developers and designers.

Key Takeaways

The key takeaways from this interview experience are:

• Master the Fundamentals: A strong understanding of JavaScript is essential.
• Think About Scalability: Solutions should be designed to be scalable and maintainable.
• Be Ready to Discuss Real-World Experience: Candidates should be prepared to discuss past projects, decisions made, and challenges overcome.
• Collaboration is Critical: The ability to collaborate effectively with backend engineers and designers is crucial.

Advanced Coding Problems Based on My Interview Experience

1. Event Loop & Promises

Write a function that prints "Hello" after 1 second and "World" after 2 seconds, without using setTimeout directly.

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function printHelloWorld() {
  await delay(1000);
  console.log('Hello');
  await delay(1000);
  console.log('World');
}
printHelloWorld();

2. Deep Object Flattening

Write a function flattenObject(obj) that takes a deeply nested object and flattens it into a single-level object.

function flattenObject(obj, parentKey = '', result = {}) {
  for (let key in obj) {
    const newKey = parentKey ? `${parentKey}.${key}` : key;
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      flattenObject(obj[key], newKey, result);
    } else {
      result[newKey] = obj[key];
    }
  }
  return result;
}


const obj = { a: { b: { c: 1 } }, d: 2 };
console.log(flattenObject(obj)); // { 'a.b.c': 1, 'd': 2 }

3. Form Validation in React

Create a simple React form component that validates email and age, and ensures the form can't be submitted with invalid inputs.

import React, { useState } from 'react';
const Form = () => {
  const [email, setEmail] = useState('');
  const [age, setAge] = useState('');
  const [errors, setErrors] = useState({ email: '', age: '' });

const validateEmail = (email) => {
    return /^\S+@\S+\.\S+$/.test(email);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    let valid = true;
    let tempErrors = { email: '', age: '' };
    if (!validateEmail(email)) {
      tempErrors.email = 'Invalid email format';
      valid = false;
    }
    if (!/^\d+$/.test(age)) {
      tempErrors.age = 'Age must be a number';
      valid = false;
    }
    setErrors(tempErrors);
    if (valid) {
      alert('Form submitted successfully');
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Email:</label>
        <input
          type="text"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {errors.email && <p>{errors.email}</p>}
      </div>
      <div>
        <label>Age:</label>
        <input
          type="text"
          value={age}
          onChange={(e) => setAge(e.target.value)}
        />
        {errors.age && <p>{errors.age}</p>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};
export default Form;

4. Throttle Function Implementation

Write a throttle function that ensures a given function is called at most once every n milliseconds.

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function(...args) {
    if (!lastRan) {
      func.apply(this, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          func.apply(this, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

5. Lazy Loading in React

Implement a simple React component that lazy-loads another component using React.lazy() and Suspense.

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
  return (
    <div>
      <h1>Lazy Loading Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}
export default App;

These coding problems represent the technical challenges found in senior-level interviews. Mastering these challenges can help improve your practical skills in real-world frontend development.