Understanding 'Yield' in ES6

In JavaScript ES6, 'yield' is an operator that is used to pause and resume a generator function, as stated in the answer to the quiz question. Generator functions are a special type of function that produces a sequence of results rather than a single value.

This unique quality provides functions with much-needed pause and resume functionality. Each 'yield' statement in the generator function returns a value, then pauses the code execution, preserving the function context (local variables, the value of this, etc.).

Practical Example of Using 'Yield' in ES6

Let's consider a simple cascading asynchronous function, executing subsequent actions only when some asynchronous action completes.

The following JavaScript code snippet demonstrates a primitive, chain-based asynchronous process using 'yield' and generator function:

function* genFunction() {
  let result1 = yield asyncPromise1(); 
  let result2 = yield asyncPromise2(result1); 
  return result2;
}

let gen = genFunction();

gen.next().value.then(res1 => {
    gen.next(res1).value.then(res2 => {
        console.log(`Final result is ${res2}`);
    });
});

In the above example, 'yield' defines what the generator should output (the promise returned by the async function), and then pauses the generator's execution until .next() is called with the promise result.

Best Practices with 'Yield' in ES6

Although 'yield' can make your code more readable by flattening the callback pyramid, it's not recommended to use it in cases where you need parallel execution. Because 'yield' pauses the execution of the generator function until the yielded Promise is fulfilled, if you have multiple promises that can be run in parallel, you'll see a performance hit.

ES6's 'yield' is a powerful tool, but use it wisely and appropriately to maximize its potential. Its power lies mainly in its ability to make asynchronous code seem synchronous. This can lead to cleaner, more readable code that is easier to understand and maintain.