πŸŽ„ Get 50% off from our JavaScript course for the holidays! πŸŽ„

How to Fix "Illegal return statement" Errors in JavaScript

Ferenc Almasi β€’ 2022 July 12 β€’ πŸ“– 3 min read

The "Uncaught SyntaxError: Illegal return statement" error occurs, whenever JavaScript comes across a return statement outside of a function. The return keyword can only be used inside of functions. To resolve the error, make sure you don't use aΒ returnΒ statement outside of functions.

// ❌ Don't use return outside of functions
return 'Hello World! πŸ‘‹'

// βœ”οΈ Do
const greet = () => {
    return 'Hello World! πŸ‘‹'
}

// βœ”οΈ Or using a shorthand
const greet = () => 'Hello World! πŸ‘‹'
Copied to clipboard!

Using the return keyword inside block scope such as inside if statements or for loops are also not valid (if they are outside of a function).

// ❌ Don't
if (user) {
    return `Hello ${user}! πŸ‘‹`
}

// ❌ Don't
for (let i = 100; i > 0; i--) {
    return i
}
Copied to clipboard!

In case you need to return a value from a loop conditionally, you need to introduce a variable outside of the loop, and then assign the value to the declared variable. And in case you need to break from a loop conditionally, then you can use the break keyword.Β 

// Returning a value conditionally from a loop
let value

for (let i = 0; i < 100; i++) {
    if (conditionToBeMet) {
        value = i
    }
}
// now have the value of i
console.log(value)

// Breaking conditionally from a loop
for (let i = 100; i > 0; i--) {
    if (i < 50) {
        break
    }

    console.log(i)
}
Copied to clipboard!

In case you have nested loops and you want to only break from one of them, you can use a labeled statement, where you label your loop with a name, and pass the name after the break keyword. This way, you can control which loop should be stopped.

outerLoop: {
    for (let i = 0; i < 100; i++) {
        innerLoop: {
            for (let j = 0; j < 100; j++) {
	        break innerLoop
	    }
        }
    }
}
Breaking from nested loops using a labeled statement
Copied to clipboard!

You may also come across a similar error message "Uncaught SyntaxError: Unexpected token 'return'". This error occurs whenever you have a syntax error in your application right above a return statement. For example:

const greet = user => {
    const message = 'Welcome ' + user +
    return message
}
Copied to clipboard!

Here we have an unexpected plus sign after the string, which means JavaScript will not expect the return keyword from the next line. In short:

Whenever you get an "Unexpected token 'return'" error in JavaScript, it means there's a syntax error (unclosed string, extra operator, missing keyword) right before your return statement.

Share on
  • twitter
  • facebook
JavaScript Course Dashboard

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in less time.

Learn More

Recommended

πŸŽ‰ Thank you for subscribing to our newsletter. x