Array comprehension is a new feature proposed for ES7, with a new syntax to create new arrays from existing iterables, comprehensions can replace map and filter.

Generator comprehension brings the same feature to generators, this is a more useful feature as it removes the need to write new generators for simple map/filter operations.

Generator comprehensions allow us to easily write single-line generators, which can replace our arrays in some situations, you might ask why we might consider replacing arrays with generators, the most important reason is their laziness. I’ve explained laziness later in the article.

Comprehensions are currently only supported by Firefox, use Firefox 30+ or Babel to run the examples. The Node.js version of examples using generator function* ()s is available at the repository (doesn’t require transpilation, use latest node).

Syntax

The syntax is pretty simple, you can only use for of and if inside comprehensions.

Array comprehensions:

let numbers = [1,2,3,4,5];

let even = [ for (n of numbers) if (n % 2 === 0) n ];
// equivalent:
// let even = numbers.filter(n => n % 2 === 0);

console.log(...even); // 2 4

Generator comprehensions:

// yield 0...5
let generator = function* () {
  for (let i = 0; i < 6; i++) {
    yield i;
  }
}

let squared = ( for (n of generator()) n * n );
// equivalent:
// let squared = Array.from(generator()).map(n => n * n);

console.log(...squared); // 0 1 4 9 16 25

You can also nest comprehensions:

// yield 0...5
let generator = function* () {
  for (let i = 0; i < 6; i++) {
    yield i;
  }
}

// yield three numbers after number
let after = function* (number) {
  for (let i = 1; i < 4; i++) {
    yield number + i;
  }
}

// for each number 0...5, yield an array of 3 numbers after it
let nested = ( for (n of generator())
               [ for (i of after(n)) i ]
             )

console.table(Array.from(nested));
// 1, 2, 3
// 2, 3, 4
// 3, 4, 5
// 4, 5, 6
// 5, 6, 7
// 6, 7, 8

Laziness

This is one of the most important advantages of generators over arrays and things alike. The reason why I’m including this here is to give you a good reason to write generators instead of arrays while generator comprehensions make it extremely easy to write them — this is a proof of their usefulness.

In programming, laziness means doing nothing until the results are requested or in simpler terms, avoiding unnecessary work. For example, when you create an array and map it, the result will be evaluated no matter you need it now or not, you need the whole thing or a part of it, etc.

Take this example:

let bigArray = new Array(100000);
for (let i = 0; i < 100000; i++) {
  bigArray[i] = i;
}

let first = bigArray.map(n => n * n)[0];
console.log(first);

You know what happens here, first, map is evaluated, returning thousands of squared numbers, then the first element is returned. We must allocate and evaluate the whole squared array to be able to know about it’s first or second element.

Think of optimizing it, is it possible to get the desired result without storing temporary arrays in memory? Can we get the first number directly without consuming a big chunk of memory?

Yes, using generators, Look at this:

let bigGenerator = function* () {
  for (let i = 0; i < 100000; i++) {
    yield i;
  }
}

let squared = ( for (n of bigGenerator()) n * n );

console.log(squared.next());

Let’s see what happens in this case. Here, we create a generator which will yield numbers 0…100000, nothing is actually allocated or evaluated, we just have a generator which will return a new number every time we call next(). Then we use generator comprehension to create another generator which squares the numbers our bigGenerator() yields, again, we don’t evaluate or allocate anything, we just create a generator which will call another generator’s next() method, square the results, and yield it.

Now when we call squared.next(), the squared generator calls bigArray().next(), squares the results and yields it, it doesn’t do any unnecessary work, it’s lazy.

Calling squared.next() 4 times

If you profile heap/memory usage and running time, you will see the difference.

I have prepared a Node.js version of the test case. With the help of process.memoryUsage() and console.time we can easily see the difference. It’s a lot faster, with less space required, isn’t that awesome?

Repository: mdibaiee/array-vs-generator

If you want to know more about lazy iterators, I recommend raganwald’s Lazy Iterables in JavaScript.

More:

MDN: Array Comprehensions

MDN: Generator Comprehensions

MDN: for…of

MDN: Iterators and Generators

ES6 in Depth: Generators