Semicolon Usage
Semicolons ; are not required in JavaScript. The following code is a valid JavaScript code:
const hello = 'Hello'
function greet() {
return hello
}This is because JavaScript has a feature called Automatic Semicolon Insertion aka ASI.
ASI puts semicolons in your JavaScript for you. It’s a part of the language and can not be disabled, it's always active.
ASI has a set of rules to insert semicolons. If there is already a semicolon, it won’t change anything.
Our previous code will be transformed into this one:
const hello = 'Hello'; // <-- ASI
function greet() {
return hello; // <-- ASI
}However, this source
a = b + c
( d + e ).print()is not transformed, because the expression that begins the second line can be interpreted as an argument list for a function call:
a = b + c( d + e ).print()Rules of ASI
The JavaScript parser will automatically add a semicolon when, during the parsing of the source code when:
1 - The next line starts with a }, closing the current block.
2 - There is a return, break, throw or continue statement on its own line.
3 - The end of the source code file is reached.
What does the following function return?
function foo() {
return
{
a: 1
}
;
}You forgot to put a semicolon, but doesn't matter. ASI kicked in and changed your code to:
function foo() {
return; // <-- ASI
{
a: 1
}
;
}Because of ASI, the compiler places a semicolon after the return keyword and therefore it returns undefined without an error being thrown.
Special characters
If you don't use semicolons, never start a line with [, (, ,, *, /, ,, ., +, -.
// ✖︎︎ problem
(function() {
console.log( 'hey, yo!' )
}())
// ✔ solution
;(function() {
console.log( 'hey, yo!' )
}())// ✖︎︎ problem
[1, 2, 3].forEach( dude )
// ✔ solution
;[1, 2, 3].forEach( dude )
// ✖︎︎ problem
`hey bro`.indexOf( 'o' )
// ✔ solution
;`hey bro`.indexOf( 'o' )