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?
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()];
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.
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]
const b = Array.from(gen), which I assume should work, since generators are iterable andArray.fromtakes an iterable. EDIT: Okay, close:const b = Array.from(gen())does indeed work.