How to make the symbol.iterator resume when added a new item to the array

Question

I print a list by iterating the Symbol.iterate object. I want it to resume printing when I add a new item to the array, but it doesn't work. I've tried some ways to do it but I couldn't. How can I overcome this problem?

let arr = [{
        name : "Computer",
        sold : 1000
    },
    {
        name: "Printer",
        sold: 250
    },
    {
        name: "Camera",
        sold:290
    },
    {
        name: "Gamepad",
        sold: 800
    },
    {
        name: "Keyboard",
        sold: 2100
    }
]

const iteratorArr = arr[Symbol.iterator]();

const listAll = () => {
    var it = iteratorArr.next()
    while(!it.done) {
        console.log(it.value) 
        it = iteratorArr.next()
    }
}

listAll()

arr.push({name:"Mouse",sold: 2900})
listAll()

Answer 1

Array iterators (and really, any builtin iterators) do not support resumption after having been exhausted once. It is possible to create the iterator before adding values to the array, and still iterate them afterwards, but you must not have run the iterator to completion in between. Example:

const arr = ['a', 'b'];
const iter = arr.values();
console.log(iter.next().value); // not yet done
console.log(iter.next().value); // not yet done
arr.push('c');
console.log(iter.next().value); // not yet done
console.log(iter.next().done); // no value left, closing
arr.push('d');
console.log(iter.next().done); // still closed

To get the behavior you want, you'd need to implement your own iterator:

let arr = [
    { name : "Computer", sold : 1000 },
    { name: "Printer", sold: 250 },
    { name: "Camera", sold:290 },
    { name: "Gamepad", sold: 800 },
    { name: "Keyboard", sold: 2100 }
]

const iteratorArr = {
    index: 0,
    next() {
        const done = this.index >= arr.length
        return {done, value: done ? undefined : arr[this.index++]}
    },
    [Symbol.iterator]() { return this }
}

const listRemaining = () => {
    for (const value of iteratorArr) {
        console.log(value)
    }
    console.log(iteratorArr);
}

listRemaining()

arr.push({name:"Mouse",sold: 2900})
listRemaining()