javascriptadvanced15 minutes

Fix Infinite Loop and Incorrect State Updates in Async Data Processor

Debug and fix a complex asynchronous JavaScript function that processes data items in sequence but currently produces an infinite loop and incorrect state updates due to improper async handling and variable scope issues.

Challenge prompt

You are given a function `processDataItems` designed to process an array of data items asynchronously in sequence. The function is meant to update a `results` array with processed values and track progress correctly. However, the current implementation results in an infinite loop and incorrect updates to the `results` array because of asynchronous handling and variable scoping bugs. Fix the function so that: 1. It processes each item in order. 2. Correctly waits for async processing of each item to complete before moving to the next. 3. Properly updates the `results` array. 4. Terminates after processing all items without infinite looping. You may only modify the code inside `processDataItems` and should keep the function signature intact.

Guidance

• Carefully analyze the asynchronous flow and where `await` or Promise handling is missing or misplaced.
• Check variable scopes, especially the loop index and state updates inside async functions.
• Consider replacing `while` loops with for-loops or recursion to better control async operations.

Hints

• The infinite loop arises because the loop continuation condition never becomes false due to no loop index increment.
• The `await` keyword must be used correctly inside loops to ensure sequential processing.
• State updates to `results` might be referencing stale closure variables; use proper scoping techniques.

Starter code

async function processDataItems(items) {
  let results = [];
  let i = 0;
  while (i < items.length) {
    async function processItem() {
      // Simulate async processing delay
      await new Promise(resolve => setTimeout(resolve, 100));
      results[i] = items[i] * 2; // Intended processing
    }
    processItem();
    // Missing i++ or awaiting processItem causes bugs
  }
  return results;
}

Expected output

[4, 6, 8, 10]

Core concepts

asynchronous programmingasync/awaitloop controlclosure and variable scope

Challenge a Friend

Send this duel to someone else and see if they can solve it.