JavaScript Generators — What does this output?

Why This Question Matters

If you've spent any time in the JavaScript ecosystem, you've probably seen the function* syntax and wondered why on earth we need a function with an asterisk. Most developers are comfortable with standard functions and async/await, but Generators often feel like a niche feature used only by library authors.

This specific challenge is a classic "gotcha." It tests whether you understand how generators actually produce values and how the spread operator interacts with iterable objects. If you guess that this outputs a function reference or an empty array, you're not alone—but you're missing a powerful tool for memory management.

Understanding the Code

Let's look at the snippet again:

function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i
  }
}
console.log([...range(1, 5)])

First, the function* declaration defines a Generator function. Unlike a regular function that runs from top to bottom and returns a single value, a generator can pause its execution and resume it later.

Inside the function, we have a for loop and the yield keyword. Think of yield as a "pause button." When the code hits yield i, it sends the current value of i back to the caller and freezes the function's state. It doesn't exit; it just waits.

When you call range(1, 5), it doesn't actually execute the loop immediately. Instead, it returns a Generator Object. This object is an iterator—it has a .next() method that you can call to get the next yielded value.

Finally, we see the spread operator: [...range(1, 5)]. The spread operator is designed to work with any iterable. Since generators are iterable by default, the spread operator essentially says: *"Keep calling .next() on this generator until it's finished, and put every yielded value into this new array."*

Finding the Correct Answer

The correct answer is Option B: [1, 2, 3, 4, 5].

Here is the internal play-by-play:
1. range(1, 5) is called. A generator object is created.
2. The spread operator ... starts iterating.
3. The generator runs until it hits yield 1. It pauses and gives 1 to the array.
4. The spread operator asks for the next value. The generator resumes, increments i to 2, hits yield 2, and pauses again.
5. This repeats until i reaches 6. At that point, the for loop condition (i <= end) becomes false.
6. The generator returns, the iteration ends, and the array is closed.

Why other options are wrong:
- If the answer were just the generator object, you'd see something like Generator { : ... }.
- If the loop was exclusive (like i < end), the answer would be [1, 2, 3, 4]. But we used <=.
- If you forgot the spread operator and just logged range(1, 5), you'd get the iterator object, not the values.

Common Mistakes Developers Make

The biggest mistake is treating a generator like a standard function. A common bug I see is developers calling a generator and expecting the logic inside to run immediately.

range(1, 5); // This does absolutely nothing.

Nothing happens here because the generator hasn't been "consumed." You must either use a for...of loop, the spread operator, or manually call .next().

Another point of confusion is the difference between return and yield. If you replace yield i with return i, the generator will stop immediately after the first value. It will return 1 and then terminate. yield is for producing a sequence; return is for ending the sequence.

Real-World Usage

You might be thinking, "Why not just use a regular loop and push values into an array?"

In a small example like range(1, 5), an array is fine. But imagine you need to iterate through a million records from a database or a massive CSV file. If you load all million items into an array first, you'll likely crash your process with an "Out of Memory" error.

Generators are lazy. They only calculate the next value when you actually ask for it. This makes them incredibly efficient for:

1. Infinite Sequences: You can create a generator that counts up forever without crashing your app.
2. Custom Iterables: Creating a specific way to traverse a complex data structure (like a tree or a graph) without exposing the internal logic.
3. Middleware/Sagas: Libraries like redux-saga use generators heavily to handle side effects in a way that looks synchronous but is actually asynchronous and cancellable.

Key Takeaways

- function* defines a generator that returns an iterator object.
- yield pauses the function and sends a value back to the consumer.
- The spread operator [...] is a quick way to exhaust a generator and convert its values into an array.
- Generators are memory-efficient because they produce values on demand rather than storing them all in memory upfront.