Yield of for...in element returns strings array

Question

I tried to print an array generated by yield and somehow if I use for...in statement it creates an array of strings while using regular for loop its working properly.
Why is that happens?

function *hello1(elements) {
    for(var el in  elements) yield el;
}
function *hello2(elements) {
    for(var i=0;i<elements.length;i++) yield elements[i];
}

var elements = [1,2,3];
console.log(elements);
console.log([...hello1(elements)]);
console.log([...hello2(elements)]);

Thank you all, I didn't know there is a difference – ATP Feb 14 '21 at 11:37 — ATP, Feb 14 '21 at 11:37

Nina Scholz · Answer 1 · 2021-02-14T11:29:47.000

For getting the elements, you need to take for ... of statement.

The for ... in statement iterates the keys (without symbols) of the object and returns strings.

function* hello1(elements) {
    for (var el of elements) yield el;
}

var elements = [1, 2, 3];

console.log([...hello1(elements)]);

An even shorter approach returns just the array as iterable with yield* expression.

function* hello1(elements) {
    yield* elements;
}

var elements = [1, 2, 3];

console.log([...hello1(elements)]);

score 2 · Accepted Answer · answered Feb 14 '21 at 11:23

You meant to use for...of, not for...in which is for iterating over the enumerable keys of a target object. You can also use yield* instead of for...of and yield:

function* hello1(elements) {
  for (var el of elements) yield el;
}

function* hello2(elements) {
  yield* elements;
}

var elements = [1, 2, 3];
console.log(elements);
console.log([...hello1(elements)]);
console.log([...hello2(elements)]);

Yield of for...in element returns strings array

2 Answers2