What To Watch Out For When Writing JavaScript Without Semi-colons

✅ Wrap📋
01: var name = "John"; console.log(name);

A semi-colon is used to mark the end of a statement or to separate multiple statements on one line in many programming languages such as Javascript.

However, the use of semi-colons in Javascript is optional as the parser appends missing semi-colons behind the scenes by following a set of rules in a process known as Automatic Semicolon Insertion(ASI)

Some developers and teams use semi-colons whiles others decide not to. In situations where they are not present, the parser is smart enough to know where to place them, but this is not always the case.

Take the following code below:

✅ Wrap📋
01: var initialList = 'Hanna,Sarah'
02: var nameList = 'John'+','+initialList//[a,b,c] = nameList.split(',') 
03: [a,b,c] = nameList.split(',')
04: console.log(a,b,c)

During the ASI process, the parser appends the second line of code to the first and then checks if the syntax is valid. If it is the parser will append a semi-colon ; at the end of the second line.

Thus the parser joins line 03 to line 02 , with the joining point being initialList[a,b,c] and says "ooh you are trying to get a substring from the initialList variable, this is correct syntax, I will put the semi-colon at the end of it" leading to a the following var nameList = 'John'+','+initialList[a,b,c] = nameList.split(',');.

Well, the problem is the rest of the code is not right and when executed leads to an error, in this case, Uncaught SyntaxError: Invalid left-hand side in assignment.

If you plan on writing Javascript code without semi-colons it's worth knowing the rules Javascript follows when appending semi-colons. This way you don't end up with errors, particularly silent ones.

Javascript automatic semicolon insertion(ASI) rules

Rule 1:

• If appending the second line of code to the first is a valid syntax then JS will append the semi-colon at the end of the second line of code.

Example

✅ Wrap📋
01: var total = 2 + 3
02: (total).toString()

The parser will append it all into one line because it thinks 3 is a function and (total) is the parameter body. var total = 2 + 3(total).toString() Because the parser is only building an abstract syntax tree, 3 will not be flagged as an invalid function name.

Rule 2:

• Whenever the parser encounters return, break, continue, throw on a line alone, it will end it with a semicolon.

Example

✅ Wrap📋
01: function isAllowed(state) {
02:   if (state != true) {
03:     throw 'You do not have access'
04:   }
05:   return 
06:   'allowed'
07: }
08: 
09: function isAllowed(state) {
10:   if (state != true) {
11:     throw 'You do not have access'; //<== semi colon will be added here
12:   }
13:   return; //<== semi colon will be added here 
14:   'allowed'; //<== semi colon will be added here
15: }

Rule 3:

• A semi-colon is always appended at the end of a Javascript file.

Example

✅ Wrap📋
01: function isAllowed(state) {
02:   if (state != true) {
03:     throw 'You do not have access';
04:   }
05:   return; 
06:   'allowed';
07: }
08: 
09: console.log(isAllowed(true)); //<== The parser will append a semi-colon here since it marks the end of the file.

Rule 4:

• A semi-colon will be placed right before a closing parenthesis }

Example

✅ Wrap📋
01: { name: "Jeff" }
02: 
03: { name: "Jeff"; } //<== The semi colon is placed just before the closing tag

Here is another article you might like 😊 Why add noopener & noreferrer to your links?