Skip to main content

How to Resolve the "SyntaxError: Unexpected strict mode reserved word 'yield'" Error in JavaScript

The SyntaxError: Unexpected strict mode reserved word 'yield' is a specific error in JavaScript that occurs when you use the yield keyword outside of its required context: a generator function. The yield keyword has a special purpose and is only syntactically valid inside these special functions.

This guide will explain what a generator function is, why the yield keyword is restricted to it, and how to fix the error by correctly defining your generator.

The Core Problem: yield Only Works in Generator Functions​

The yield keyword is a special instruction used to pause and resume a generator function. It cannot be used in a regular JavaScript function because regular functions are designed to run to completion in a single, uninterrupted pass.

The "Unexpected strict mode reserved word" error is the JavaScript engine telling you, "You've used the yield keyword, but we're not inside a generator function, so I don't know what to do with it."

Example of problem:

// Problem: This is a regular function, not a generator.
function myRegularFunction() {
  console.log('First');
  
  // This line will throw the syntax error.
  yield 'pause here'; 
  
  console.log('Second');
}

Error Output:

Uncaught SyntaxError: Unexpected strict mode reserved word 'yield'

What is a Generator Function?​

A generator function is a special type of function that can be paused and resumed, allowing it to produce a sequence of values over time. Instead of return-ing a single value, a generator can yield multiple values, one at a time. When you call a generator function, it doesn't run its code. Instead, it returns an iterator object. You then use the .next() method on this iterator to execute the function until it hits the next yield statement.

The Solution: How to Create a Generator Function​

To fix the error, you must declare your function as a generator. This is done by adding an asterisk (*) after the function keyword.

// Correct: Add an asterisk to make it a generator function.
function* myGeneratorFunction() {
  console.log('First');
  yield 'pause here'; // This is now valid.
  console.log('Second');
  yield 'finished';
}

// 1. Call the generator to get an iterator.
const myIterator = myGeneratorFunction();

// 2. Call .next() to run the code until the first `yield`.
console.log(myIterator.next());
// # Output:
// # First
// # { value: 'pause here', done: false }

// 3. Call .next() again to resume execution until the next `yield`.
console.log(myIterator.next());
// # Output:
// # Second
// # { value: 'finished', done: false }

Common Pitfalls and How to Solve Them​

Problem: Using yield in a Nested Non-Generator Function​

The yield keyword is only valid in the directly enclosing generator function. You cannot use it in a nested regular function, even if that function is inside a generator.

Example of problem:

function* myGenerator() {
  const myArray = [1, 2, 3];
  
  // PROBLEM: The `forEach` callback is a regular function, not a generator.
  myArray.forEach(num => {
    yield num; // This will throw the SyntaxError.
  });
}

Solution: you must ensure the yield is in the top-level scope of the generator. If you need to yield values from an iterable (like an array), you can use a standard for...of loop or the special yield* (yield star) syntax.

function* myGenerator() {
  const myArray = [1, 2, 3];

  // Solution A: Use a for...of loop
  for (const num of myArray) {
    yield num;
  }
  
  // Solution B (more concise): Use `yield*` to delegate to another iterable
  // yield* myArray;
}

const iterator = myGenerator();
console.log(iterator.next().value); // # Output: 1
console.log(iterator.next().value); // # Output: 2

Problem: Using yield in an Arrow Function​

Arrow functions themselves cannot be declared as generator functions using the function* syntax.

Example of problem:

// PROBLEM: This syntax is invalid.
const myGenerator = *() => { yield 1; };

Solution: you must use the standard function* syntax with either a function declaration or a function expression.

// Correct: Use a function expression.
const myGenerator = function*() {
  yield 1;
};

Conclusion​

The SyntaxError: Unexpected strict mode reserved word 'yield' is a clear indicator that the yield keyword is being used in an invalid context.

To solve it:

  • Ensure that any function using yield is declared as a generator function by adding an asterisk (*) after the function keyword (e.g., function* myGenerator()).
  • Remember that yield is only valid in the directly enclosing generator function and cannot be used in nested, non-generator callbacks like those in forEach.
  • Arrow functions cannot be generators, so you must use the function* syntax.

Table of Contents