JSHint strange behavior

Question

I think that i should ask new question about jSHint, discussion started here, i can see now strange warning from JSHint, i just want to know why.

This services was suggested.

So i have this code in JSHint:

var foo = function() {
   return {
       hi: console.log("foo")
   } //line 15 <------ why we have to put ; here?
};

var foo1 = function() {
    return // i know about ; here, please read post
    {
        hi: console.log("foo1")
    }; // line 22 <---- why we don't need to put ; here?
};

I marked lines where i am getting warning via comment "this line" above.

So, question:

I have 2 strange warnings:

First warning 15 Missing semicolon. about 15 line

Second warning 22 Unnecessary semicolon. about 22 line

But those 2 lines looks for me identical, what am i missing? why we have 2 different warnings here?

EDIT

Question is not about behavior, question is about warnings. Why are they different?

I know that i missed semicolon in second return!

Answer 1

Your first example runs in the way you would expect. The function will return an object with the hi property. The return statement includes an optional expression and must be terminated by a semicolon (either explicit or implicit via automatic semicolon insertion). JSHint by default prefers explicit semicolons and therefore points out that you've missed one.

Your second example does not run in the way you may expect. The function will return undefined. The reason for this is that the parser believes the return statement is not followed by an expression. This is because the grammar is somewhat ambiguous to allow for automatic semicolon insertion. This example is parsed as an empty return statement followed by a block. Blocks do not need to be terminated by a semicolon, hence JSHint points out that the semicolon used in your second example is unnecessary.

Answer 2

Semicolons should follow statements. They do not need to follow blocks. For example, here's an unnecessary semicolon with if:

if(foo === bar) {
    //...
};

The semicolon after the if block is never necessary.

What does this have to do with your case? Well, sometimes { ... } is a block, and sometimes { ... } is an object literal. The surrounding context lets the grammar determine which it is. In your first case, it's a an object; in the second case, it's a block.

The characters following a return statement on the same line are parsed as an expression. When { ... } is parsed as an expression, it is an object literal. In your first example, return { ... } is a return statement with an object expression. It should have a terminating semicolon, because it is a statement.

The critical thing to understand here is that the ECMAScript grammar doesn't allow a line break to separate return and its return-value expression. It's in ES2015 §11.9.1, Rules of Automatic Semicolon Insertion:

ReturnStatement_[Yield] :

• return [no LineTerminator here] Expression ;
• return [no LineTerminator here] Expression_{[In, ?Yield]} ;

A ReturnStatement can't have a LineTerminator character between the return and the Expression.

Since you do have a newline character between your return and the { ... }, the { ... } part is not parsed as belonging to the return. It is standalone, which means it is a parsed as a block. The { ... } sequence can only be parsed as an object when it is part of a larger statement or expression, like

• assignment, foo = { ... }
• function argument (bar({ ... })
• a return value (return { ... })
• etc.

When { ... } is purely on a line by itself, it is treated as a block.

Since the second case has a block, not an object, it does not need a semicolon, as described at the beginning of this answer.

Answer 3

2 things, firstly here

return {
       hi: console.log("foo")
   } 

you need ; to specify end of object literal and here

 return
    {
        hi: console.log("foo1")
    };

because you didn't put { after return, a ; it is put there for you by js engine (optional semicolon).