Let's say I want to rotate class names for my button on click. Clicked once becomes button-green
, twice - button-yellow
, thrice - button-red
. And then it repeats, so fourth click makes it button-green
again.
I know other techniques how to do it, I'm not asking for implementation advice. I made up this example to understand something about generators in JavaScript.
Here's my code with generator:
function* rotator(items) {
while (true) {
for (const item of items) {
yield item;
}
}
}
const classRotator = rotator([
'button-green',
'button-yellow',
'button-red',
]);
document.getElementById('my-button').addEventListener('click', event => {
event.currentTarget.classList.add(classRotator.next().value);
});
It works fine, except it never gets rid of the previous class. The most convenient way would be to read the current state before getting the next one:
// .current is not a thing:
event.currentTarget.classList.remove(classRotator.current);
Of course I can keep this value on my own and use it. Likewise, I can clear all classes I use in the rotator()
myself. I can even make my generator function yield
both previous and current value:
function* rotator(items) {
let previous;
while (true) {
for (const item of items) {
yield {
item,
previous
};
previous = item;
}
}
}
And then use it like this:
document.getElementById('my-button').addEventListener('click', event => {
const {item: className, previous: previousClassName} = classRotator.next().value;
event.currentTarget.classList.remove(previousClassName);
event.currentTarget.classList.add(className);
});
But that's not the point - for educational purpose I'm asking this question:
Can I read the current value of generator function in JavaScript? If not, is it to avoid using memory when it's not needed (this value can potentially be very big)?
.current
(or whatever) is to avoid keeping unnecessary data. But I can be wrong. Adding this small property or method wouldn't hurt otherwise, I guess..next()
value.