JavaScript Function Fails to Return Object When There Is a Line-Break Between the Return Statement and the Object

Javascript function fails to return object when there is a line-break between the return statement and the object?

tl;dr The line break is causing the 'undefined' in the second function. JavaScript doesn't require semicolons in a lot of cases and just assumes them in certain contexts (Automatic Semicolon Insertion).

---

In certain cases, to avoid this ASI problem and for aesthetic reasons, I use the so-called grouping operator. For example, with the hoquet templating DSL (it compiles Arrays as s-expressions into HTML), I like to group the Arrays so that they clearly show the HTML structure:

return (
  ["ul"
  , ["li"
    , ["span", {class: "name"}, this.name]
    , ["span", {id: "x"}, "x"]
    ]
  ]
);

which seems somewhat clearer, or more consistent to me than

return [
  "ul",
  [
    "li",
    ["span", {class: "name"}, this.name],
    ["span", {id: "x"}, "x"]
  ]
];

and they end up with the same number of lines. But it's a matter of aesthetics, really.

---

The grouping operator just evaluates whatever expression is inside of it. You see this commonly with Immediately Invoked Function Expressions, where you need to turn what would normally be a function declaration into an expression, which can then be immediately invoked (hence, the name). However, a perhaps lesser known feature of the grouping operator is that it can also take a comma-delimited list of expressions, e.g.

function() {
  return (
    doSideEffects(),
    console.log("this is the second side effect"),
    1 + 1
  );
}

In this case it evaluates each of these expressions and returns only the last one (1 + 1).

Why does a return statement on a new line not return any value?

The "rule" is automatic semicolon insertion.

return is a valid statement all on its own, so it is treated as a complete statement. The code starting on the next line is also syntactically valid (although it's not interpreted as an object at all in this case, but rather a code block containing a label and a single "statement" that consists of a string literal). So automatic semicolon insertion kicks in here and the two are treated as separate statements.

The code that starts on the line after the return is simply ignored.

Note that some IDEs and linters can help with this, since you essentially have unreachable code. Here is a screenshot of how VSCode's default syntax highlighting displays the two functions. You can see that the hello: world is shaded a dull color in the second function:

Why a newline between `return` and `(` breaks the code?

Seems like Automatic Semicolon Insertion might be biting you in the butt. I believe javascript will insert a ; at the end of a return statement automatically.

Why doesn't a Javascript return statement work when the return value is on a new line?

Returning an object from a function is not working as expected

The return statement is affected by automatic semicolon insertion (ASI). No line terminator is allowed between the return keyword and the expression.

To avoid this problem (to prevent ASI), you could use parentheses:

return (
//return statement.
);

function a(){return ({testing:1});}
function b(){return( {testing:1});}console.log(a());console.log(b());

Function theory in javascript - what does this return

It returns undefined, because of Automatic Semicolon Insertion. This is one of the major ASI hazards. Having a line break after return makes it get treated as return;. So your code ends up being:

function foo() {
  return;         // <=== Function returns here
  {               // \
    car: 'Audi'   //  > This is a freestanding block with a labelled statement which is the expression 'Audi'
  };              // /
}

Remove the line break and it returns an object:

function foo() {
  return {
    car: 'Audi'
  };
}

This is one reason that putting the opening { on things is standard practice in JavaScript, even more so than other C-like languages.

Returning an object from a function is not working as expected

The return statement is affected by automatic semicolon insertion (ASI). No line terminator is allowed between the return keyword and the expression.

To avoid this problem (to prevent ASI), you could use parentheses:

return (
//return statement.
);

function a(){return ({testing:1});}
function b(){return( {testing:1});}console.log(a());console.log(b());

In the JavaScript, Why is the different output coming for Two same properties function?

It's because you have a new line after your return statement in the second function.

So instead of returning the object with bar, it just returns without a specified value, which returns undefined.

Why doesn't a Javascript return statement work when the return value is on a new line?

Technically, semi colons in javascript are optional. But in reality it just inserts them for you at certain newline characters if it thinks they are missing. But the descisions it makes for you are not always what you actually want.

And a return statement followed by a new line tells the JS intepreter that a semi colon should be inserted after that return. Therefore your actual code is this:

function wrong()
{
    return;
          15;
}

Which is obviously wrong. So why does this work?

function wrong()
{
     return(
           15);
}

Well here we start an expression with an open(. JS knows we are in the middle of an expression when it finds the new line and is smart enough to not insert any semi colons in this case.

---

Related Topics