Skip to main content

Yield inside () => {}

JavaScriptMiddle~1 min read
Suggest an edit

Short answer:

No, the yield operator cannot be used inside arrow functions.

Let's break down why and how this works.

1. Reason: arrow functions cannot be generators

Arrow functions are syntactic sugar for regular functions, but they have no context of their own (this, arguments, super, new.target) and cannot contain yield, because yield is allowed only in the body of a generator function (function*).

That is, a generator is a separate function type, and arrow functions are a different type, and the two are not compatible.

2. Example - error

javascript
const gen = () => { yield 1; // SyntaxError };

Error:

javascript
SyntaxError: Unexpected identifier

3. The correct way - a regular generator function

If you need yield, you must declare a generator function with function*:

javascript
function* gen() { yield 1; yield 2; }

or in anonymous form:

javascript
const gen = function* () { yield 'A'; yield 'B'; };

This way yield can be used without errors.

4. But arrow functions can be used inside generators

For example, as helper callbacks:

javascript
function* gen() { const nums = [1, 2, 3]; yield nums.map(n => n * 2); // the arrow is fine, no yield inside it } console.log(gen().next().value); // [2, 4, 6]

The arrow function here is a regular one, it does not use yield, so everything works.

5. If you need "yield-like" behavior in an arrow function

Sometimes you can get by with other tools:

  • use return in a wrapping generator;
  • use async/await (for an asynchronous "yield");
  • or an Observable / manual iterator.

For example:

javascript
async function* asyncGen() { yield await Promise.resolve('data'); }

But an arrow version like

javascript
const asyncGen = async* () => { ... } // not allowed

is also still not allowed - the ES standard does not permit async* for arrows.

Summary

QuestionAnswer
Can yield be used in an arrow function?No
Why?yield is only allowed in the body of function* (a generator)
AlternativeUse function* or async function*
Can an arrow function be called inside a generator?Yes, if it does not contain yield
Can an arrow generator (*=>) be made?No, it is not provided for by the standard

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit