Let's say I want to assign the result of an ES6 generator to an array variable.

function* gen() {
   for(let i = 0; i < 3; i++) {
       yield i;
   }
}

let [...b] = gen();
console.log(b); // [0, 1, 2]

Let's say I want to assign the result of an ES6 generator to an array variable.

function* gen() {
   for(let i = 0; i < 3; i++) {
       yield i;
   }
}

let [...b] = gen();
console.log(b); // [0, 1, 2]

Here b will be assigned [0, 1, 2]. Why does this work?

• javascript
• ecmascript-6
• generator

Share Improve this question Follow edited May 12, 2017 at 14:21 d512 asked May 12, 2017 at 14:09 d512d512 34.4k3030 gold badges8989 silver badges119119 bronze badges 1

• 2 That looks … insane. My first attempt would have been something like const b = Array.from(gen), which I assume should work, since generators are iterable and Array.from takes an iterable. EDIT: Okay, close: const b = Array.from(gen()) does indeed work. – Jörg W Mittag Commented May 12, 2017 at 14:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

A generator, when invoked, returns an iterator. We could for example loop through the iterator with a for … of loop:

for (const item of gen()) {
  console.log(item);
}

Which would just go through each item in the generator:

0
1
2

The same things happens, if we invoke the spread syntax:

const res = [...gen()];

res would then be:

[0, 1, 2]

In your example, you're using a destructuring assignment. Destructuring with the bracket syntax invokes the iterable to get the values (same principle for arrays). Example:

const [a, b] = gen();
// a: 0, b: 1

Since you're using the rest syntax, you're basically saying: Give me all the values that are left in the iterator, and save them in the variable b:

let [...b] = gen();
// b: [0, 1, 2]

This works on any iterable:

const [a, b, ...c] = 'hello';
// a: 'h', b: 'e', c: 'llo'

Personally, I find the following a lot easier to reason about:

const res = [...gen()];

Well I think I found the answer on this post. The ... operator here is the rest operator. When used to destructure an array, it will assign all unassigned elements of the array being destructured to another array. The rest operator must be used on the last item in the list of variables receiving the destructured values. For example:

let a = [1, 2, 3, 4, 5];
let [first, second, ...remainder] = a;

console.log(first); // 1
console.log(second); // 2
console.log(remainder); // [3, 4, 5]

In the question, since b is the only thing being destructured and its using the rest operator, the entire array is assigned to it.

ES6 appears to run the generator and turn the result into an array on the right hand side of the =.

For actually creating an array from a generator function there are some answers here which are pretty good. I personally prefer Array.from:

function* gen() {
   for(let i = 0; i < 3; i++) {
       yield i;
   }
}

const arr = Array.from(gen());
console.log(arr); // [0, 1, 2]