Elif me this piece of code from Exploring ES6

Question

Help me wrap my head around this example:

function* genFuncWithReturn() {
    yield 'a';
    yield 'b';
    return 'The result';
}
function* logReturned(genObj) {
    const result = yield* genObj;
    console.log(result); // (A)
}

Results in:

> [...logReturned(genFuncWithReturn())]
The result
[ 'a', 'b' ]

So, my question is why and how result of return statement is produced first and recursive generator statement second?

Answer 1

[...logReturned(...)] produces a new array after logReturned terminated. And just before logReturned terminates, it calls console.log(result).

Maybe this ASCII art helps understand the flow:

┌──────────────────────┐     ┌──────────────────────┐      ┌─────────────────────┐
│[...logReturned(...)] │     │     logReturned      │      │  genFuncWithReturn  │
└──────────────────────┘     └──────────────────────┘      └─────────────────────┘
            │                            │                            │           
            │                            │                            │           
            │   get next from iterator   │                            │           
            │ ─────────────────────────▶ │   get next from iterator   │           
            │                            │ ─────────────────────────▶ │           
            │                            │                            │           
            │                            │         yield 'a'          │           
            │          yield 'a'         │ ◀───────────────────────── │           
            │ ◀───────────────────────── │                            │           
            │                            │                            │           
     (remembers 'a')                     │                            │           
            │                            │                            │           
            │    get next from iterator  │                            │           
            │ ─────────────────────────▶ │   get next from iterator   │           
            │                            │ ─────────────────────────▶ │           
            │                            │                            │           
            │                            │         yield 'b'          │           
            │          yield 'b'         │ ◀───────────────────────── │           
            │ ◀───────────────────────── │                            │           
            │                            │                            │           
     (remembers 'b')                     │                            │           
            │                            │                            │           
            │  get next from iterator    │                            │           
            │ ─────────────────────────▶ │   get next from iterator   │           
            │                            │ ─────────────────────────▶ │           
            │                            │                            │           
            │                            │  done, return 'The result' │           
            │                            │ ◀───────────────────────── │           
            │                            │                            │           
            │                    console.log(result)             (terminates)     
            │                            │                                        
            │            done            │                                        
   return   │ ◀───────────────────────── │                                        
 ['a', 'b'] │                            │                                        
◀───────────│                      (terminates)                                   
            │