DEV Community: Mohit Verma

Frontend interview question — Parallel task limit

Mohit Verma — Sun, 09 Mar 2025 04:49:05 +0000

This is a commonly asked question in frontend interviews, which helps in cracking similar questions related to async problems.

Implement a function called parallelLimit that takes two parameters:

tasks: An array of functions that return promises
limit: Maximum number of tasks to run in parallel

The parallelLimit function should execute the tasks in parallel, but limit the number of concurrent tasks to a given limit.
The function should return a promise that resolves to an array of results, where each result is the resolved value of the task.

Example

const tasks = [
  () => new Promise(resolve => setTimeout(() => resolve(1), 1000)),
  () => new Promise(resolve => setTimeout(() => resolve(2), 500)), 
  () => new Promise(resolve => setTimeout(() => resolve(3), 100)),
  () => new Promise(resolve => setTimeout(() => resolve(4), 800))
];

// With limit of 2 concurrent tasks
const results = await parallelLimit(tasks, 2);
console.log(results); // [2, 3, 1, 4]

Note: before jumping on to the solution, I will recommend to try this question on PrepareFrontend platform to have better understanding, rather than memorizing the solution.
PrepareFrontend

The Art of Balancing Speed and Control in JavaScript

Solving the Parallel Task Limit Problem

Ever had too many tabs open in your browser? You know how it starts — everything slows down, your laptop sounds like a jet engine, and suddenly, even refreshing a page feels like an eternity.
JavaScript, much like your browser, can struggle when too many tasks run simultaneously.
That’s where controlling concurrency comes in. In today’s post, we’ll tackle a classic problem — executing async tasks in parallel but with a limit.
Let’s say you have an array of tasks — each a function returning a promise — but you don’t want them all to start at once.
Maybe you’re making API calls and don’t want to overwhelm the server. Or maybe you’re processing files but can only handle a few at a time.

Brief Solution Overview

To solve this problem, we need to implement parallelLimit, which executes functions returning promises while ensuring that only a specified number of them run at the same time. We achieve this by maintaining a queue of tasks and processing them in controlled batches.
The key steps are:

Start executing tasks up to the limit.
Keep track of actively running tasks & limit the number of tasks running at a time.
When a task completes, start the next one.
Return a promise that resolves when all tasks finish.

Solution

// This function takes an array of tasks and a concurrency limit
function parallelLimit(tasks, limit) {
  // Keep track of total tasks and completion status
  const totalTasks = tasks.length;
  let taskCompleted = 0;
  let runningTasks = 0;
  const result = [];

  // Return a promise that resolves when all tasks complete
  return new Promise((resolve, reject) => {
    // Helper function to execute a single task
    const executeTask = (task) => {
      // Return early if no task or at concurrency limit
      if (!task) {
        return;
      }
      if (runningTasks >= limit) {
        return; 
      }

      // Increment running tasks counter
      runningTasks++;

      // Execute the task and handle result
      task().then(data => {
        // Store result and update counters
        result.push(data);
        runningTasks--;
        taskCompleted++;

        if (taskCompleted === totalTasks) {
          // All tasks done - resolve with results
          resolve(result);
        } else {
          // Start next task from queue
          executeTask(tasks.shift());
        }
      }).catch(error => {
        // Reject if any task fails
        reject(error);
      })
    }

    // Initially start up to 'limit' number of tasks
    for (let i = 0; i < limit; i++) {
      const task = tasks.shift();
      executeTask(task);
    }
  })
}

5 commonly asked frontend interview questions in product-based companies

Mohit Verma — Sun, 09 Mar 2025 04:47:29 +0000

Implement a debounce function

Debouncing is a technique to limit the rate at which a function can fire.

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// Usage
const debouncedSearch = debounce((query) => {
  console.log('Searching for:', query);
}, 300);

Create a simple todo list component

This question tests your ability to manage state and handle user interactions.

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    if (input) {
      setTodos([...todos, input]);
      setInput('');
    }
  };

  return (
    <div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

Implement a basic Promise

Understanding Promises is crucial for handling asynchronous operations.

class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.callbacks = [];

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.callbacks.forEach(callback => callback(value));
      }
    };

    executor(resolve);
  }

  then(onFulfilled) {
    if (this.state === 'fulfilled') {
      onFulfilled(this.value);
    } else {
      this.callbacks.push(onFulfilled);
    }
  }
}

// Usage
const promise = new MyPromise((resolve) => {
  setTimeout(() => resolve('Done'), 1000);
});

promise.then(console.log);

Implement a basic event emitter

Event emitters are useful for building pub-sub systems.

class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  }

  emit(eventName, data) {
    const eventCallbacks = this.events[eventName];
    if (eventCallbacks) {
      eventCallbacks.forEach(callback => callback(data));
    }
  }
}

// Usage
const emitter = new EventEmitter();
emitter.on('userLoggedIn', (user) => console.log('User logged in:', user));
emitter.emit('userLoggedIn', { name: 'John' });

Flatten an array of arrays

This tests your ability to work with nested data structures.

function flattenArray(arr) {
  return arr.reduce((flat, toFlatten) => {
    return flat.concat(Array.isArray(toFlatten) ? flattenArray(toFlatten) : toFlatten);
  }, []);
}

// Usage
const nestedArray = [1, [2, 3], [4, [5, 6]]];
console.log(flattenArray(nestedArray)); // [1, 2, 3, 4, 5, 6]

Can also practice more challenging questions on PrepareFrontend platform.

✨ What I recently built with Generative AI

Mohit Verma — Mon, 29 Jul 2024 13:44:27 +0000

Like everyone else, I also jumped into the AI world & trying to figure out how things work & how to utilise it. So in this blog post, I will share what I recently built with using LLM (Large language model).

Chapter 1 — It all starts with an idea.

The idea was to generate informative & knowledgable posts for linkedin using AI. With just simple prompt, you should be able to create insightful & beautiful posts that can be shared. Off course you can always do customisation or content tweaking if required.

Chapter 2 — What should be the technical stack?

Well as I was familiar with Javascript, NodeJS & React ecosystem, it was quick for me to pick NextJS to build my new product. And with Versel everything was super simple in terms of building and releasing the code.

And after learning few things, I quickly got the gist on how to utilise any LLM API available in the market. I picked Gemini flash 1.5 model to start with.

Chapter 3 — Focus & Code

I built the MVP in 3 days & shipped to production. It’s always important to focus & prioritise building important features only, instead of building so many functionality with your own assumptions & customer feedbacks.

Chapter 4 — Sharing on Reddit

Shared my launch on reddit, & got many mixed feedback (mostly bad). You can check it out here. Few feedbacks I fixed & few are remaining.

Chapter 5 — Next steps

I will be sharing it with few known users and try to get their feedback and fix broken things.

Demo

If you are interested in using the product, can try it out by visiting the below link.

https://postmaker.getworktools.com

The Unsung Heroes - Why Runbooks are Crucial for Effective Incident Response

Mohit Verma — Sat, 15 Jun 2024 15:17:30 +0000

In the fast-paced world of software engineering, where applications are the lifeblood of modern businesses, the ability to respond swiftly and effectively to incidents is paramount. Enter the humble yet powerful runbook - the unsung hero that can make all the difference in mitigating the impact of system failures and ensuring business continuity.

Runbooks are detailed, step-by-step guides that outline the necessary actions to be taken in the event of a specific incident or problem. They serve as a crucial resource for incident response teams, providing a structured and standardized approach to troubleshooting and resolving issues. Here’s why runbooks are so important:

Consistency and Efficiency: Runbooks ensure that incident response is consistent, regardless of who is handling the issue. This promotes efficiency, as team members can quickly refer to the documented steps and avoid the need to reinvent the wheel during a crisis.
Reduced Downtime: By having a well-documented and tested runbook, teams can respond to incidents more quickly, minimizing the impact on the business and reducing costly downtime.
Knowledge Retention: Runbooks serve as a repository of institutional knowledge, preserving the expertise and learnings of experienced team members and making it accessible to the entire organization.
Continuous Improvement: Runbooks can be regularly reviewed and updated, allowing teams to incorporate lessons learned and continuously improve their incident response processes.

In the fast-paced world of software engineering, where applications are the lifeblood of modern businesses, the ability to respond swiftly and effectively to incidents is paramount. Runbooks are the unsung heroes that can make all the difference in mitigating the impact of system failures and ensuring business continuity.

Runbook creator

https://getworktools.com/products/runbook-creator

Implement circuit breaker in Javascript

Mohit Verma — Wed, 10 May 2023 18:06:05 +0000

In software development, a circuit breaker is a design pattern used to prevent a service from becoming overwhelmed or failing in the event of an error or too much traffic. It acts as a safety valve that stops the flow of traffic to a service when it detects an error or a high number of requests.

In JavaScript, a circuit breaker can be implemented by creating a wrapper function around the code that is prone to failure or high traffic. The wrapper function monitors the number of errors or requests and determines whether to allow traffic to pass through to the original function.



function circuitBreaker(originalFunction, 
failureThreshold, recoveryTime) {
  let failureCount = 0;
  let lastFailureTime = null;
  let isOpen = false;

  return function(...args) {
    if (isOpen) {
      const timeSinceFailure = new Date() - lastFailureTime;
      if (timeSinceFailure > recoveryTime) {
        isOpen = false;
      } else {
        throw new Error('Service is unavailable');
      }
    }

    try {
      const result = originalFunction(...args);
      failureCount = 0;
      return result;
    } catch (error) {
      failureCount++;
      lastFailureTime = new Date();

      if (failureCount >= failureThreshold) {
        isOpen = true;
      }

      throw error;
    }
  };
}

This function takes three parameters: the original function that we want to wrap, the failure threshold (the number of allowed failures before the circuit breaker is triggered), and the recovery time (the amount of time to wait before trying the original function again).

The circuit breaker function returns a new function that acts as a wrapper around the original function. The wrapper function checks if the circuit is open, and if it is, it either throws an error or waits for the recovery time to expire before allowing traffic through again. If the circuit is closed, the wrapper function calls the original function and catches any errors. If the number of errors exceeds the failure threshold, the circuit is opened, and traffic is stopped from passing through until the recovery time has passed.

To use this circuit breaker, we can pass our original function to the circuitBreaker function along with the desired failure threshold and recovery time:

For more frontend interview questions & preparation can use
Preparefrontend