Why Does a Line Break After a `return` Statement Cause `undefined` in JavaScript?

Understanding the Return Statement in JavaScript: Why Line Breaks Can Be Tricky

In JavaScript, the return statement is used to terminate the execution of a function and return a value to the calling context. However, a peculiar behavior arises when the return value is placed on a new line.

The Issue: Broken Return Statements

Consider the following code snippet:

<code class="javascript">function correct() {
  return 15;
}

function wrong() {
  return
        15;
}

console.log("correct() called : " + correct());
console.log("wrong() called : " + wrong());</code>

In this example, the correct() function returns the expected value of 15, while the wrong() function returns undefined. This is surprising because in most other languages, the return statement followed by a new line would still return the correct value.

The Reason: JavaScript's Automatic Semicolon Insertion

The key to understanding this behavior lies in JavaScript's automatic semicolon insertion (ASI) feature. ASI is a mechanism that allows JavaScript to automatically insert semicolons at certain newline characters to ensure valid code execution.

When the return statement in wrong() is followed by a new line, ASI treats it as a separate statement. As a result, the code is interpreted as:

<code class="javascript">function wrong() {
  return;
        15;
}</code>

Since the first statement (return;) does not return a value, the wrong() function returns undefined.

The Solution: Wrapping the Return Value in Parentheses

To ensure that the return value is correctly returned even when on a new line, it is necessary to wrap it in parentheses. By doing this, ASI is prevented from inserting a semicolon and the return statement remains valid.

<code class="javascript">function wrong() {
  return(
        15);
}</code>

In this case, the parentheses indicate that the return value is part of the return statement. ASI does not insert a semicolon, and the wrong() function now returns 15 as intended.

The above is the detailed content of Why Does a Line Break After a `return` Statement Cause `undefined` in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!