Automatic Semicolon [;] Insertion In JavaScript

Introduction

In JavaScript, it is said that semicolons are optional. It's true, because JavaScript automatically inserts a semicolon, where it is required. Sometimes this feature 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 fun1() {
    return {
        a: 10
    };
}

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

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

Console.log(fun1());

Output

Object { a: 10 }

Console.log(fun2());

Output

undefined

It is surprising that fun2() 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 fun2(), 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).