3

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?

d512
  • 32,267
  • 28
  • 81
  • 107
  • 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 May 12 '17 at 14:14

3 Answers3

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()];
nils
  • 25,734
  • 5
  • 70
  • 79
  • I agree with your last example: that, or `const res = Array.from(gen())` *both* spell out *explicitly* that you create an array from the generator. One version does it by using the array brackets, the other does it by literally spelling out the sentence "create `from` an `Array`". Both are easier to rea{d|son about} because they have one less interaction in them: the destructuring assignment and how it interacts with iterables is absent from both. – Jörg W Mittag May 12 '17 at 14:45
  • [`...` is not an operator!](https://stackoverflow.com/questions/37151966/what-is-spreadelement-in-ecmascript-documentation-is-it-the-same-as-spread-oper/37152508#37152508) – Felix Kling May 12 '17 at 15:20
  • Thanks Felix, I got it right for spread, but messed it up for rest ;) – nils May 12 '17 at 20:23
2

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 =.

d512
  • 32,267
  • 28
  • 81
  • 107
  • This answer does not explain the interaction with a generator. – jfriend00 May 12 '17 at 14:26
  • [Here](http://exploringjs.com/es6/ch_destructuring.html#sec_destructuring-algorithm) is an in-depth discussion of the destructuring algorithm – ccprog May 12 '17 at 14:29
  • [`...` is not an operator!](https://stackoverflow.com/questions/37151966/what-is-spreadelement-in-ecmascript-documentation-is-it-the-same-as-spread-oper/37152508#37152508) – Felix Kling May 12 '17 at 15:21
0

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]
YakuZa
  • 516
  • 7
  • 12