ThoughtSpot Frontend SE Interview Experience

Overview

This document details a frontend software engineer interview experience at ThoughtSpot. The process evaluated the candidate's proficiency in JavaScript fundamentals, React development, and asynchronous programming. The role was for a Software Engineer (Frontend) position with a compensation range of 40-60 LPA. The application was submitted via Instahyre.

Interview Rounds

The interview process consisted of three rounds, each focusing on different aspects of frontend engineering.

Round 1: JavaScript Fundamentals & Code Snippets

This round assessed the candidate's understanding of core JavaScript concepts and performance optimization techniques. The evaluation included both theoretical questions and code snippet challenges.

JavaScript Theoretical Questions: The interviewer posed questions on the following topics:
- Closures & Lexical Scope: Understanding of closure mechanics and practical applications.
- Event Loop & Microtasks vs. Macrotasks: Knowledge of asynchronous operation handling in JavaScript.
- Prototype & Prototypal Inheritance: Differentiation between __proto__ and prototype.
Code Snippet Challenge: The candidate was required to predict the output of a given JavaScript code snippet and explain its behavior.
Implementing a groupBy Polyfill: The candidate was tasked with implementing a groupBy function, similar to the Lodash implementation. Performance considerations and edge cases were also discussed. The following code was presented as a reference:

const groupBy = (array, key) => {
  return array.reduce((result, item) => {
    const groupKey = item[key];
    if (!result[groupKey]) {
      result[groupKey] = [];
    }
    result[groupKey].push(item);
    return result;
  }, {});
};

Web Performance Optimization: A discussion covering frontend performance optimization strategies, including:
- Lazy Loading & Code Splitting
- Debouncing & Throttling
- Critical Rendering Path Optimization
- Browser Caching Strategies

The candidate successfully cleared this round.

Round 2: React Coding Challenge

This round involved building a real-world feature using React. The candidate was required to implement a typeahead search functionality.

Implementing a Typeahead Feature: The candidate was asked to build a typeahead (auto-suggest dropdown) feature in React. Key evaluation criteria included:
- Efficient API calling (debouncing API requests)
- Handling edge cases (empty input, rapid typing, no results)
- Optimizing for performance
- Accessibility considerations
An example approach for fetching results:

const fetchResults = async (query) => {
  const response = await fetch(`https://api.example.com/search?q=${query}`);
  return response.json();
};

Debouncing was implemented to prevent excessive API calls:

const debouncedFetch = useCallback(
  debounce((query) => fetchResults(query), 300),
  []
);

Caching Mechanism in Typeahead: The interviewer inquired about implementing caching for the typeahead feature.

The candidate suggested using a Map or WeakMap for in-memory caching:

const cache = new Map();
const getResults = async (query) => {
  if (cache.has(query)) return cache.get(query);
  const results = await fetchResults(query);
  cache.set(query, results);
  return results;
};

Follow-up questions addressed cache invalidation strategies and alternative storage solutions like IndexedDB and localStorage.

The candidate successfully cleared this round.

Round 3: Asynchronous Challenges

This round focused on advanced asynchronous JavaScript concepts.

Resolve Asynchronous Sequential Promises using Recursion: The challenge involved executing an array of promise-returning functions sequentially.

Initial iterative solution:

const runSequentially = async (functions) => {
  for (let func of functions) {
    await func();
  }
};

The candidate was then asked to implement the same functionality using recursion:

const runSequentiallyRecursive = (functions, index = 0) => {
  if (index >= functions.length) return;
  functions[index]().then(() => runSequentiallyRecursive(functions, index + 1));
};

Implement a Cancellable Promise: The task was to create a cancellable promise, allowing the termination of an asynchronous operation before completion.

const makeCancellable = (promise) => {
  let isCancelled = false;
  const wrappedPromise = new Promise((resolve, reject) => {
    promise.then(
      (val) => (isCancelled ? reject({ cancelled: true }) : resolve(val)),
      (err) => reject(err)
    );
  });
  return { promise: wrappedPromise, cancel: () => (isCancelled = true) };
};

The candidate was unable to effectively implement the cancellable promise wrapper.

The candidate was not successful in this round and was subsequently rejected.

Key Takeaways