Why Doesn't a JavaScript Return Statement Work When the Return Value Is on a New Line

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.

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?

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).

NodeJS Bug? Error when a return statement with a line feed before the string to be returned is executed

This has to do with JavaScript, and not Node.js specifically. Most JavaScript engines implement Automatic Semi-colon Insertion, meaning that it will try to automatically separate two clauses with a semi-colon. The statement return on its own is valid, as it will return undefined, and a string is a valid statement as well. For example:

"use strict";

The reason why ASI is triggered is due to both the line break, and return being a restricted production. Not a bug, but a feature.

Is 'return' necessary in the last line of JS function?

what's the best practice of finishing the JS function if it doesn't
return anything?

A function returns undefined by default. The use of return is therefore only necessary if you want to override the default behaviour.

---

Why most leave it out when they can

The Javascript community seem to dislike unnecessary verbose code. It might even be said to be a sport to make the code as short and compact as possible.

Why this may not be the best practice for all

The habit of always using return may serve as a good reminder that a function always returns something and thereby remind you to reflect on whether the default behaviour should be overridden.

However an experienced programmer will have such considerations deeply internalized and therefore rarely have need for such reminders.

Conclusion

As one gains experience the sport for less verbose code intensifies and in that context writing code just confirming default behaviour is an absolute no-go.

So: in the long run I would say most people end up leaving it out and that it is justified to do so because of the high degree of internalization.

Javascript function returns undefined when using ternary statement

JavaScript has semicolon insertion after return. You should put an expression after it so that it can continue.

You can read up on the rules here: What are the rules for JavaScript's automatic semicolon insertion (ASI)?

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.

Javascript why does this function returns undefined

Because you made a newline:

function aaa() {  return {    test: 1  };}console.log(aaa());

---

Related Topics