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 the 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. 1
3. 2
4. }
5. 3
6. This will transform to {
7. 1;
8. 2;
9. }
10. 3;

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 into

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, a semicolon will be inserted, if the token is allowed by some production of the grammar, but it is restricted production.
1. UpdateExpression: LeftHandSideExpression[no LineTerminator here]++
2. LeftHandSideExpression[no LineTerminator here]--
3. ContinueStatement: continue;
4. continue [no LineTerminator here] LabelIdentifier;
5. BreakStatement: break;
6. break [no LineTerminator here] LabelIdentifier;
7. ReturnStatement: return;
8. return [no LineTerminator here] Expression;
9. ThrowStatement: throw [no LineTerminator here] Expression;
10. ArrowFunction: ArrowParameters[no LineTerminator here] => ConciseBody
11. YieldExpression: yield [no LineTerminator here] * AssignmentExpression
12. 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).