Please tell me why does this object iterator just allows logging one time

Question

let str = '<span class="my"> <var suv="inn">';

let regexp = /<(([a-z]+)\s*([^>]*))>/g;

let result = str.matchAll(regexp);
console.log(result[0]);
console.log(result);
//It is an iterable object'
 
console.log("Array from method");
var a = Array.from(result);
console.log(a[0]);
console.log(a[1]);

console.log("for loop method");
for (let value of result){
console.log(value);
}

we can see that when we place the ArrayFrom method first, it logged the values but ForLoop method didn't.

let str = '<span class="my"> <var suv="inn">';

let regexp = /<(([a-z]+)\s*([^>]*))>/g;

let result = str.matchAll(regexp);
console.log(result[0]);
console.log(result);
//It is an iterable object'

console.log("for loop method");
for (let value of result){
console.log(value);
}

console.log("Array from method");
var a = Array.from(result);
console.log(a[0]);
console.log(a[1]);

and similarly when we place the ForLoop method first, it logged the values but ArraFrom method didn't.

Why is not both methods logging after one method logs.
(I really didn't know how else to frame my question, I really hope I'm clear!)

Answer 1

What appears to be happening is that after each progression through the iterator, the current item is being removed from the faux array, leaving the iterator empty.

If you stick console.log(Array.from(result).length) before the for...of loop, the length will be 2 and the faux array will be emptied by Array.from() so the for...of loop returns nothing. If you put console.log(Array.from(result).length) twice in a row, the result will be 2 then 0.

If you don't call an Array.from(result).length before, but you stick it just once after for...of the length will also be 0 because it was emptied by the for...of.

This is expected behavior.