How to Generate a Range of Numbers from 0 to n in ES2015 JavaScript: Concise Methods Explained

Table of Contents#

• Pre-ES2015 Approaches: The "Old" Way
• Method 1: Using Array.from()
• Method 2: Using Array.keys() with the Spread Operator
• Method 3: Generator Functions for Lazy Evaluation
• Comparing Methods: Performance & Readability
• Common Pitfalls & Edge Cases
• Conclusion
• References

Pre-ES2015 Approaches: The "Old" Way#

Before ES2015, generating a range typically involved a for loop to iterate from 0 to n and push each value into an array. Here’s an example:

// Pre-ES2015: Generate [0, 1, 2, ..., n]
function generateRange(n) {
  const range = [];
  for (let i = 0; i <= n; i++) { // Note: i <= n to include n
    range.push(i);
  }
  return range;
}
 
console.log(generateRange(5)); // [0, 1, 2, 3, 4, 5]

While functional, this approach is verbose: it requires initializing an empty array, writing a loop, and manually pushing values. ES2015 introduced cleaner alternatives that eliminate boilerplate.

Method 1: Using Array.from()#

ES2015’s Array.from() is a versatile method for creating arrays from array-like objects (e.g., arguments, NodeList) or iterable objects (e.g., Map, Set). It accepts two arguments:

1. An array-like object (with a length property).
2. An optional map function to transform values during array creation.

To generate a range [0, 1, ..., n], we can use Array.from() with a "length object" and a map function to return indices.

How It Works#

• Step 1: Create an array-like object with { length: n + 1 }. The +1 ensures we include n (e.g., for n=5, we need 6 elements: 0 to 5).
• Step 2: Use the map function (_, i) => i to return the index i (the first parameter _ is unused, as the array-like object has no values).

Example Code#

// Generate [0, 1, ..., n] with Array.from()
const generateRange = (n) => Array.from({ length: n + 1 }, (_, i) => i);
 
// Test cases
console.log(generateRange(0));  // [0] (n=0: length 1)
console.log(generateRange(5));  // [0, 1, 2, 3, 4, 5] (n=5: length 6)
console.log(generateRange(10)); // [0, 1, ..., 10] (length 11)

Why This Works#

• Array.from({ length: n + 1 }) creates an array with n + 1 empty slots.
• The map function (_, i) => i fills these slots with their indices (0 to n).

Flexibility#

Array.from() is highly customizable. For example, you can modify the range by adjusting the map function:

// Generate even numbers: [0, 2, 4, ..., 2n]
const evenRange = (n) => Array.from({ length: n + 1 }, (_, i) => i * 2);
console.log(evenRange(3)); // [0, 2, 4, 6]

Method 2: Using Array.keys() with the Spread Operator#

Another concise ES2015 method leverages Array.prototype.keys() and the spread operator (...).

• Array.prototype.keys() returns an iterator that yields the indices of an array (e.g., 0, 1, 2, ... for an array of length 3).
• The spread operator (...) converts the iterator into an array.

How It Works#

• Step 1: Create an array with n + 1 empty slots using Array(n + 1).
• Step 2: Call .keys() to get an iterator of indices (0 to n).
• Step 3: Spread the iterator into a new array with [...iterator].

Example Code#

// Generate [0, 1, ..., n] with Array.keys() + spread
const generateRange = (n) => [...Array(n + 1).keys()];
 
// Test cases
console.log(generateRange(0));  // [0]
console.log(generateRange(5));  // [0, 1, 2, 3, 4, 5]
console.log(generateRange(10)); // [0, 1, ..., 10]

Why This Works#

• Array(n + 1) creates an array with length n + 1 (but no values).
• .keys() returns an iterator that produces indices 0, 1, ..., n.
• Spreading the iterator ([...iterator]) collects these indices into a new array.

Readability Note#

This method is often praised for its brevity. The syntax [...Array(n+1).keys()] is compact and intuitive once you understand that Array(n+1).keys() generates the desired indices.

Method 3: Generator Functions for Lazy Evaluation#

For large ranges (e.g., n = 1,000,000), creating an array upfront wastes memory. ES2015 generator functions (function*) solve this by generating values on demand (lazy evaluation), making them ideal for memory-intensive tasks.

How It Works#

A generator function uses yield to return values one at a time. When called, it returns an iterator, which can be consumed with for...of or spread into an array (if needed).

Example Code#

// Generator function to yield 0, 1, ..., n
function* rangeGenerator(n) {
  for (let i = 0; i <= n; i++) {
    yield i; // Yield each value lazily
  }
}
 
// Convert generator to array (if needed)
const generateRange = (n) => [...rangeGenerator(n)];
 
// Test cases
console.log(generateRange(5)); // [0, 1, 2, 3, 4, 5]
 
// Lazy iteration (no array created)
for (const num of rangeGenerator(3)) {
  console.log(num); // Logs 0, 1, 2, 3 (one at a time)
}

Key Advantage: Memory Efficiency#

Generators avoid storing the entire range in memory. For example, iterating over rangeGenerator(1e6) with for...of only holds one value at a time, unlike Array.from() or spread, which create large arrays.

Comparing Methods: Performance & Readability#

When to Use Which?#

• [...Array(n+1).keys()]: Best for small-to-medium ranges where brevity matters.
• Array.from(): Preferred if you need to modify values (e.g., i * 2 for evens) during range creation.
• Generators: Ideal for large ranges or when you only need to iterate once (avoids storing the full array).

Common Pitfalls & Edge Cases#

1. Forgetting n + 1#

A critical mistake is using n instead of n + 1 for the array length. This truncates the last value:

// Bug: Missing +1 results in [0, 1, 2, 3, 4] (n=5)
console.log([...Array(5).keys()]); // [0, 1, 2, 3, 4] (should be 0-5)

2. Negative n#

If n is negative, n + 1 may be non-positive, resulting in an empty array:

console.log(generateRange(-3)); // [] (invalid range)

Fix: Add a guard clause to handle invalid inputs:

const generateRange = (n) => (n < 0 ? [] : [...Array(n + 1).keys()]);

3. Non-Integer n#

If n is a float (e.g., 5.9), n + 1 is treated as an integer (e.g., 6.9 → 6), truncating the range:

console.log(generateRange(5.9)); // [0, 1, 2, 3, 4, 5] (same as n=5)

Fix: Enforce integer n with Math.floor(n) or validate input.

Conclusion#

ES2015 revolutionized how we generate number ranges in JavaScript, replacing verbose for loops with concise, readable methods:

• [...Array(n+1).keys()]: The most compact syntax for simple ranges.
• Array.from({ length: n+1 }, (_, i) => i): Flexible for transformed ranges (e.g., evens, multiples).
• Generator Functions: Memory-efficient for large ranges or lazy iteration.

By choosing the right method for your use case, you can write cleaner, more maintainable code. Remember to handle edge cases like negative n and always use n + 1 to include the final value!

References#

• MDN: Array.from()
• MDN: Array.prototype.keys()
• MDN: Generator Functions
• MDN: Spread Operator