CODEWITHSUNDEEP
javascriptecmascript-6generator
d512
d512

Reputation: 34103

Creating an array from ES6 generator

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?

Upvotes: 3

Views: 3246

Answers (3)

YakuZa
YakuZa

Reputation: 526

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]

Upvotes: 1

nils
nils

Reputation: 27174

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()];

Upvotes: 4

d512
d512

Reputation: 34103

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

Upvotes: 3

Related Questions