Not quite understanding how passing a value to next() works with yield in JavaScript

user_399584 0
Viewed 111

The Mozilla Developer Network has the following example of passing a value to next() and how it's captured by yield:

function* fibonacci() {
  let current = 0;
  let next = 1;
  while (true) {
    let reset = yield current;
    [current, next] = [next, next + current];
    if (reset) {
        current = 0;
        next = 1;
    }
  }
}

const sequence = fibonacci();
console.log(sequence.next().value);     // 0
console.log(sequence.next().value);     // 1
console.log(sequence.next().value);     // 1
console.log(sequence.next().value);     // 2
console.log(sequence.next().value);     // 3
console.log(sequence.next().value);     // 5
console.log(sequence.next().value);     // 8
console.log(sequence.next(true).value); // 0
console.log(sequence.next().value);     // 1
console.log(sequence.next().value);     // 1
console.log(sequence.next().value);     // 2

What I'm confused about is the let reset = yield current; line. I understand that current will receive the value passed into next(). What I don't understand is why the if (reset) { /* ... */ } conditional won't evaluate to true once current is any value greater than 1.

It seems like the let reset = yield current; line is only evaluated if a value is passed into next(), but I'm not sure that's actually the case, let alone why it would be the case if so. The MDN docs gloss over what's actually going on here.

Further explanation would be greatly appreciated.

EDIT: Put another way, what does let reset = yield current; mean when a value is NOT passed into next()? Because current is still increasing in value with each run of the loop. Is the assignment simply not happening?

yield iterator javascript
2 Answers

function* fibonacci() {
  let current = 0;
  let next = 1;
  while (true) {
    let reset = yield current;
    console.log('reset value', reset);
    [current, next] = [next, next + current];
    if (reset) {
        current = 0;
        next = 1;
    }
  }
}

const sequence = fibonacci();
console.log(sequence.next().value);     // 0
console.log(sequence.next().value);     // 1
console.log(sequence.next().value);     // 1
console.log(sequence.next().value);     // 2
console.log(sequence.next().value);     // 3
console.log(sequence.next().value);     // 5
console.log(sequence.next().value);     // 8
console.log(sequence.next(true).value); // 0
console.log(sequence.next().value);     // 1
console.log(sequence.next().value);     // 1
console.log(sequence.next().value);     // 2

Using nothing but console log. We can see the reset variable gets the value of undefined when nothing is passed to next() and gets the value passed to next otherwise.
You are allowed to in javascript, assign the value undefined to a variable, that's all that's happening here.

I don't like when they use such irrelevant examples for code. With no real life context it's difficult to understand this or why you would ever use it.

user_33899000

Adding an answer to provide more detail/clarity for anyone else who may be as stumped as I was. The other key aspect to this seemingly weird behavior is to remember that yield pauses the generator's execution until next() is called again. The following code (a slightly modified version of MDN example code found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield) illustrates this (pay particular attention to when the variable step has a value):

function* counter(value) {
 let step;

 while (true) {
   step = yield ++value;
   console.log(`step = ${step}, value = ${value}`);

   if (step) {
     value += step;
   }
 }
}

const generatorFunc = counter(0);
console.log(generatorFunc.next().value);   
console.log(generatorFunc.next().value);   
console.log(generatorFunc.next().value);   
console.log(generatorFunc.next(10).value); 
console.log(generatorFunc.next().value);   
console.log(generatorFunc.next(10).value);

The output:

1
"step = undefined, value = 1"
2
"step = undefined, value = 2"
3
"step = 10, value = 3"
14
"step = undefined, value = 14"
15
"step = 10, value = 15"
26
user_3995840
Related