Semicolons

Semicolons can be omitted in certain situations.
When you do not include a semicolon one will be inserted for you automatically.
When you do not include them you will be relying on a process called Automatic Semicolon Insertion (ASI).
Your source code will not be changed because this "insertion" happens at compile time.
You should not rely on ASI because there are a number of cases when the ASI will insert one in the wrong place.


ASI - Declaring Variables (inserted correctly)

We can declare our variables without using semicolons.
This is an example of ASI when it finds a line terminator character.

'// before
var Var1
var Var2

'// after
var Var1;
var Var2;

ASI - Assigning Expression (inserted correctly)

We can declare our variables without using semicolons.
This is an example of ASI when it finds a line terminator character.

'// before
var Var1
Var1 = 10

'// after
var Var1;
Var1 = 10;

ASI - Function Return (inserted correctly)

We can return expressions from a function without terminating with a semicolon.
This is an example of ASI when it finds a closing curly brace.

'// before
function myFunc(a,b) { return a + b }

'// after
function myFunc(a,b) { return a + b; }

ASI - Function Expression (inserted correctly)

We can create function expressions and leave off the semicolon.
This is an example of ASI when it finds a closing curly brace.

'// before
var Fun1 = function myFunc() { return 100; }

'// after
var Fun1 = function myFunc() { return 100; } ;

However function declarations do not have to be terminated with a semicolon so ASI will not trigger for this.


ASI - Do While Loop (inserted correctly)

We do not have to include a semicolon at the end of a do-while loop.
This is an example of ASI because this statement must be terminated with a semicolon.

'// before
do { } while { }

'// after
do { } while { } ;

However (if-else, for, while, switch) do not have to be terminated with a semicolon so ASI will not trigger for these.


ASI - At the Very End of a File (inserted correctly)

We do not have to include a semicolon at the very end.
If you have two files that are then combined ASI will automatically insert a semicolon at the end of each file before they are combined.

'// before
' file1.js
var Var1
' file2.js
var Var2

'// after
' combined.js
var Var1;
var Var2;

ASI - Return Statements (NOT inserted correctly)

Do not put the return statement or expression on the next line.
The line terminator after the return prevents the second line being returned.

'// before
return
var1 = 'Mon';

'// after
return; // this will return undefined
var1 = 'Mon';

To avoid this always use curly brackets (or parentheses).

return { 
   var1 = 'Mon';
};

ASI - Starting a line with open brackets (NOT inserted correctly)

Do not leave off semicolons from the end of statements when the next line starts with an open parenthesis.
The parenthesised expression that begins the second line is interpreted as an argument list for a function call.

'// before
a = b + c
(d + e).print();

'// after
a = b + c(d + e).print();

To avoid this always use curly brackets (or parentheses).

a = b + c; 
(d + e).print();

ASI - Putting a postfix operator on the next line (NOT inserted correctly)

Do not put a postfix operator on a new line
The line terminator after the variable 'a' prevents the postfix operator being applied to it and instead moves it to a prefix operator on what is underneath.

'// before
Var1
++
somethingelse

'// after
Var1;
++somethingelse;


© 2020 Better Solutions Limited. All Rights Reserved. © 2020 Better Solutions Limited TopPrevNext