Importance of Semicolon [;] In JavaScript

It is said that in JavaScript semicolons are not compulsory. It’s true, because JavaScript automatically inserts a semicolons at required place and it is know as “Automatic Semicolon Insertion”. This behavior of JavaScript confuses us a lot. This article is written for those who have just started writing JavaScript and for those who don’t know the “Automatic insertion of semicolon in JavaScript“.

function function1() {  
    return {  
        a: 10  
    };  
} 

function function2() {   
    return 
    {  
        a: 10  
    };  
}

At first look, the code given above looks same but look at the output given below.

Console.log(function1());

Output:

Object { a: 10 }

Console.log(function2());

Output:

undefined

It is quite surprising that function2() returns undefined without any error being thrown.

The reason behind the function returning undefined is the fact that in JavaScript semicolons are optional (although it is not a good practice to ignore them). Hence, when the line with the return statement is executed in function2(), it automatically places a semicolon immediately at the end of the return statement. In this case, no error is thrown as the remainder is perfectly valid, even though it is not invoked and doesn’t do anything.

This behavior also suggests following the convention of placing an opening curly brace at the end of the same line and not at the new line.

Following statements must be terminated with the semicolons

• empty statement
• let
• const
• import, and export
• expression statement
• var statement
• debugger statement
• continue statement
• break statement
• return statement
• throw statement

Rules of automatic semicolon insertion

There are three basic rules of semicolon insertion, which are given below.

• When a token is encountered (LineTerminator or }) that is not allowed by any production of the grammar, then a semicolon is automatically inserted before the offending token, if one or more of the following conditions is true.
  • If the token is separated from the previous token by at least one LineTerminator.
  • If the token is }.

{  1  
   2 } 3
  
This will transform to 

{ 1 //Meets first condition  
  ;2 ;} 3; //Meets second condition

• When the end of the input stream of tokens is encountered and the parser is unable to parse the input token stream as a single complete ECMAScript Script or Module, a semicolon is automatically inserted at the end of the input stream.

  a = b
  ++c
  //This will transform to
  a = b;
  ++c;
  

  Note, the token ++ is not treated as a postfix operator applying to the variable b. Because a LineTerminator occurs between b and ++.

• In this case, semicolon will be inserted, if the token is allowed by some production of the grammar, but it is restricted production.

UpdateExpression :  
  
LeftHandSideExpression [no LineTerminator here] ++  
  
LeftHandSideExpression [no LineTerminator here] --  
  
ContinueStatement :  
  
continue ;  
  
continue [no LineTerminator here] LabelIdentifier ;  
  
BreakStatement :  
  
break ;  
  
break [no LineTerminator here] LabelIdentifier ;  
  
ReturnStatement :  
  
return ;  
  
return [no LineTerminator here] Expression ;  
  
ThrowStatement :  
  
throw [no LineTerminator here] Expression ;  
  
ArrowFunction :  
  
ArrowParameters [no LineTerminator here] => ConciseBody  
  
YieldExpression :  
  
yield [no LineTerminator here] * AssignmentExpression  
  
yield [no LineTerminator here] AssignmentExpression

The example, which we have seen at the start of the article is the best for understanding ReturnStatement (restricted production).

Interested in JavaScript? Click here to read more JavaScript articles in Code4Developers

Yatendrasinh Joddha

I have healthy knowledge and experience in Azure, O365 and ASP.Net with c#, MVC, WebApi along with client-side frameworks and libraries like JavaScript, JQuery, KnockoutJs, AngularJs, Angular, ReactJs, NodeJs