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' )