JavaScript Coding Interview Problems: Mid-Level Preparation Guide

Understanding Mid-Level JavaScript Interview Problems

Mid-level JavaScript coding interview problems sit between basic syntax checks and senior-level system design challenges. They test your ability to combine multiple core concepts—closures, asynchronous programming, data structures, and algorithmic thinking—into working solutions under pressure. These problems typically appear in technical screens for developers with 2–5 years of experience.

What Defines a Mid-Level Problem?

Mid-level problems are characterized by multi-step logic rather than single-method calls. They require you to handle edge cases, manage state across function calls, and often involve performance considerations. You won't just write array.map()—you'll need to know when and why to use it alongside other patterns. The interviewer is evaluating your problem decomposition skills, code organization, and ability to communicate tradeoffs.

Why These Problems Matter

Companies use mid-level problems because they reveal how you think through ambiguity. A candidate who can correctly implement a debounce function or flatten a nested array demonstrates working knowledge of scope, timing, and recursion—skills directly applicable to debugging real-world features like search bars, infinite scroll, or state management. These problems also expose whether you write clean, maintainable code or just hack something together that barely works.

Core Problem Categories with Complete Solutions

1. Closures, Scope, and Higher-Order Functions

Closures are the backbone of JavaScript patterns. Interviewers love testing whether you truly understand that a function retains access to its lexical scope even when executed elsewhere. A classic mid-level problem is building a memoization wrapper or a function that accumulates values across multiple invocations.

Problem: Create a Caching/Memoization Decorator

Implement a generic memoize function that caches results of expensive computations based on argument values. This tests closures, higher-order functions, and your understanding of referential transparency.

/**
 * Creates a memoized version of a function that caches results.
 * Uses a Map to store computed values keyed by serialized arguments.
 */
function memoize(fn) {
  // The cache lives in the closure scope of the returned function
  const cache = new Map();

  return function (...args) {
    // Create a key from arguments using JSON.stringify
    // Handle edge case: distinguish between undefined and no argument
    const key = JSON.stringify(
      args.length === 0 ? '__NO_ARGS__' : args
    );

    if (cache.has(key)) {
      console.log('Cache hit for:', key);
      return cache.get(key);
    }

    console.log('Cache miss for:', key);
    const result = fn.apply(this, args);

    // Store result, handling promises if the function is async-aware
    cache.set(key, result);
    return result;
  };
}

// Usage example with an expensive computation
function expensiveFibonacci(n) {
  if (n < 2) return n;
  return expensiveFibonacci(n - 1) + expensiveFibonacci(n - 2);
}

const memoizedFib = memoize(expensiveFibonacci);
console.log(memoizedFib(35)); // Slow first run
console.log(memoizedFib(35)); // Instant from cache
console.log(memoizedFib(30)); // Already computed internally, may still be fast

// Edge case: handling multiple arguments
function multiply(a, b) {
  return a * b;
}

const memoizedMultiply = memoize(multiply);
console.log(memoizedMultiply(5, 10)); // 50, cache miss
console.log(memoizedMultiply(5, 10)); // 50, cache hit
console.log(memoizedMultiply(10, 5)); // 50, cache miss (different key)

Interview Discussion Points: How would you handle non-primitive arguments like objects or arrays? What are the memory implications of an unbounded cache? Could you implement an LRU eviction policy? These follow-up questions separate solid candidates from exceptional ones.

Problem: Implement a Currying Utility

Currying transforms a function that takes multiple arguments into a sequence of functions each taking a single argument. This tests deep understanding of closures and argument accumulation.

/**
 * Generic curry function that works with any number of arguments.
 * Supports both sequential calls and multiple arguments per call.
 */
function curry(fn) {
  // Track accumulated arguments across all invocations
  return function curried(...args) {
    // If we have enough arguments, execute the original function
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }

    // Otherwise, return a new function that collects more arguments
    return function (...moreArgs) {
      return curried.apply(this, [...args, ...moreArgs]);
    };
  };
}

// Example: currying a string formatter
function formatString(template, firstName, lastName, title) {
  return template
    .replace('{first}', firstName)
    .replace('{last}', lastName)
    .replace('{title}', title);
}

const curriedFormatter = curry(formatString);

// Different calling styles all produce the same result
const withTemplate = curriedFormatter('Hello, {title} {first} {last}!');
const withName = withTemplate('John');
const result1 = withName('Doe', 'Mr.');
console.log(result1); // "Hello, Mr. John Doe!"

// Alternative: all at once
const result2 = curriedFormatter('Hi {first}!', 'Jane', 'Smith', 'Dr.');
console.log(result2); // "Hi Jane!"

// Partial application style
const greetingForJohn = withTemplate('John')('Doe');
console.log(greetingForJohn('Prof.')); // "Hello, Prof. John Doe!"

2. Asynchronous JavaScript & Promise Patterns

Mid-level async problems go beyond simple await usage. They test your ability to orchestrate multiple asynchronous operations, implement timeouts, handle race conditions, and build utility functions that mimic library-quality code.

Problem: Implement Promise.all with Sequential Execution Fallback

Build a function that executes an array of async tasks with a concurrency limit. This is essentially a mini task runner—extremely common in real applications for rate-limiting API calls.

/**
 * Executes async tasks with a maximum concurrency limit.
 * Tasks are started in batches; when one finishes, the next begins.
 *
 * @param {Array} tasks - Array of functions that return Promises
 * @param {number} concurrencyLimit - Maximum simultaneous executions
 * @returns {Promise} - Results in the original order
 */
async function runWithConcurrencyLimit(tasks, concurrencyLimit = 3) {
  const results = new Array(tasks.length);
  let currentIndex = 0;

  /**
   * Worker function: grabs the next task and executes it.
   * Continues until all tasks have been started.
   */
  async function worker() {
    while (currentIndex < tasks.length) {
      // Atomically claim the next task index
      const index = currentIndex;
      currentIndex++;

      try {
        results[index] = await tasks[index]();
      } catch (error) {
        // Preserve error in results array at the correct position
        results[index] = { error: error.message };
      }
    }
  }

  // Create the pool of worker "threads" (logically concurrent)
  const workers = [];
  const activeWorkerCount = Math.min(concurrencyLimit, tasks.length);

  for (let i = 0; i < activeWorkerCount; i++) {
    workers.push(worker());
  }

  // Wait for all workers to drain the task queue
  await Promise.all(workers);

  return results;
}

// Demo: simulate API calls with variable delays
function simulateAPICall(id, delayMs, shouldFail = false) {
  return async () => {
    console.log(`Starting task ${id}...`);
    await new Promise((resolve, reject) => {
      setTimeout(() => {
        if (shouldFail) {
          console.log(`Task ${id} failed!`);
          reject(new Error(`Task ${id} failed`));
        } else {
          console.log(`Task ${id} completed`);
          resolve(`Result-${id}`);
        }
      }, delayMs);
    });
    return `Result-${id}`;
  };
}

async function demo() {
  const tasks = [
    simulateAPICall('A', 2000),
    simulateAPICall('B', 500),
    simulateAPICall('C', 3000),
    simulateAPICall('D', 800, true), // Will fail
    simulateAPICall('E', 1200),
    simulateAPICall('F', 1500),
    simulateAPICall('G', 400),
  ];

  console.log('Running with concurrency limit of 3...');
  const results = await runWithConcurrencyLimit(tasks, 3);
  console.log('All results:', results);
}

demo();

Problem: Build a Promise-Based Timeout Wrapper

Create a function that races a promise against a timeout and rejects if the promise doesn't resolve within the specified time. This is a staple utility in production code.

/**
 * Wraps a promise with a timeout.
 * If the original promise does not settle within the specified
 * milliseconds, the returned promise rejects with a timeout error.
 *
 * @param {Promise} promise - The promise to wrap
 * @param {number} ms - Timeout in milliseconds
 * @param {string} [message] - Custom timeout error message
 * @returns {Promise} - Resolves with original value or rejects on timeout
 */
function withTimeout(promise, ms, message = 'Operation timed out') {
  // Create a promise that rejects after the specified time
  const timeoutPromise = new Promise((_, reject) => {
    const timer = setTimeout(() => {
      clearTimeout(timer);
      reject(new Error(message));
    }, ms);

    // Return the timer ID so we can clean up if needed
    // (Though the rejection function doesn't return, we attach it)
    return timer;
  });

  // Race the original promise against the timeout
  return Promise.race([
    promise,
    timeoutPromise
  ]).finally(() => {
    // Clean up: if original promise resolves/rejects, clear the timer
    // We don't have direct access to the timer here, but a more robust
    // implementation would track and clear it to prevent memory leaks
  });
}

// Improved version with proper cleanup
function withTimeoutRobust(promise, ms, message = 'Operation timed out') {
  let timer;

  const timeoutPromise = new Promise((_, reject) => {
    timer = setTimeout(() => {
      reject(new Error(message));
    }, ms);
  });

  return Promise.race([
    promise,
    timeoutPromise
  ]).finally(() => {
    // Clear the timeout to avoid memory leaks and spurious rejections
    if (timer) {
      clearTimeout(timer);
    }
  });
}

// Usage example
async function fetchDataWithTimeout() {
  const slowOperation = new Promise((resolve) => {
    setTimeout(() => resolve('Data arrived!'), 5000);
  });

  try {
    const result = await withTimeoutRobust(slowOperation, 2000, 'Fetch timeout');
    console.log(result);
  } catch (err) {
    console.error('Error:', err.message); // "Fetch timeout"
  }
}

fetchDataWithTimeout();

3. Array & Object Transformations

Data transformation problems test your fluency with functional programming patterns. The challenge isn't just using .map() and .filter()—it's chaining them efficiently, handling sparse arrays, and transforming between data structures without unnecessary intermediate allocations.

Problem: Deep Flatten a Nested Array with Depth Control

Implement a function that flattens arbitrarily nested arrays up to a specified depth, similar to the native Array.prototype.flat(depth) but built from scratch.

/**
 * Recursively flattens a nested array up to the specified depth.
 * A depth of 1 flattens one level, Infinity flattens completely.
 *
 * @param {Array} arr - The potentially nested array
 * @param {number} [depth=1] - How many levels to flatten
 * @returns {Array} - A new flattened array
 */
function flat(arr, depth = 1) {
  const result = [];

  /**
   * Recursive helper that tracks current nesting level.
   */
  function flatten(items, currentDepth) {
    for (const item of items) {
      if (Array.isArray(item) && currentDepth > 0) {
        // Recurse into nested array, decrementing remaining depth
        flatten(item, currentDepth - 1);
      } else {
        // Push element as-is (preserves non-array items and
        // arrays when depth has been exhausted)
        result.push(item);
      }
    }
  }

  flatten(arr, depth);
  return result;
}

// Test cases
const deeplyNested = [1, [2, [3, [4, [5]]]], [6, 7]];

console.log(flat(deeplyNested, 1));
// [1, 2, [3, [4, [5]]], 6, 7]

console.log(flat(deeplyNested, 2));
// [1, 2, 3, [4, [5]], 6, 7]

console.log(flat(deeplyNested, Infinity));
// [1, 2, 3, 4, 5, 6, 7]

// Edge cases
console.log(flat([], 5));              // []
console.log(flat([1, 2, 3], 0));       // [1, 2, 3] (no flattening)
console.log(flat([1, [2], 3], -1));    // [1, [2], 3] (negative depth)
console.log(flat([[[[[1]]]]], Infinity)); // [1]

Problem: Group Objects by a Key with Count Aggregation

Given an array of objects, group them by a specified key and return an object mapping group keys to arrays of matching items. Additionally, include a count for each group. This combines grouping, reduction, and object manipulation.

/**
 * Groups an array of objects by a given key.
 * Returns an object with group keys mapped to objects containing
 * the items array and a count.
 *
 * @param {Array