Is there a mechanism to loop x times in ES6 (ECMAScript 6) without mutable variables?

Declutter your code with ES6 variants

Diversify the ways in which you can loop x times with ES6 - cutting down on mutable variables.

Use Array.from to de-stress mapping

You can create a fresh array and map over it without mutable variables using Array.from:

Array.from({ length: x }, (_, i) => {/* loop body with i */});


Here, Array.from creates an array and applies a mapping function removing the need for a follow up .map() call.

Immunity with for...of looping

Alternatively, you can leverage the for...of loop and .keys() for an awakened approach:

for (const i of Array(x).keys()) {
  // No mutability, only zen-like looping
}


This immutable iterator numerically levels through x without mutating state.

Recursive looping with tail call optimization

Implement a recursive function that self-invokes until the base case is reached:

function loop(x, callback, i = 0) {
  if (i < x) {
    callback(i);
    // Look ma! No stack overflow errors!
    return loop(x, callback, ++i);
  }
}


Though recursion sometimes feels like spinning around in circles, tail call optimization prevents stack overflow errors in supported environments.

Generators save the day

ES6 also blesses us with generator functions which can output values without the strict adherence to the ++ operator:

function* loopGen(x) {
  let i = 0; // I promise I won't change
  while (i < x) {
    yield i++;
    // I lied... But it's for a good cause! 
  }
}

for (const i of loopGen(x)) {
  // Let's dance again, shall we?
}


Generators grant you an iteration protocol to loop a fixed number of times with absolute control.

Explore the ES6 treasure trove

Now that the basics are covered, let's delve deeper into ES6 features that make looping a breeze:

Make code zen-like with functional paradigms

Embrace the tranquility of functional programming with methods like .reduce() or .filter(), where accumulation and selective processing become as easy as a Sunday morning:

// Welcome to a mutable-free world!
[...Array(x)].reduce((acc, _, i) => {
  // Mastering looping, one stop at a time.
}, initialValue);


Brackets, I choose you!

Level up your code cleanliness with the comma operator:

[...Array(x)].forEach((_, i) => (processItem(i), i));


In here, the processItem(i) is done and dusted, i returns, all within a neat, tight expression.

Customize your loops for better readability

The custom loop function makes recurring logic lovable:

function customLoop(start, end, callback) {
  if (start < end) {
    callback(start);
    // Look, no mutating state! Just pure zen.
    return customLoop(start + 1, end, callback);
  }
}


Streamline your loops with a single liner

ES6 allows us to pack quite a punch with a single line:

Array.from({ length: x }, (_, i) => i).forEach(i => {/* loop body with i */});


This expression generates an array, maps it to the desired range of numbers, and iterates over it, all in one quick swoop.