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

🚫 Wrap Code📋 Copy
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 Code📋 Copy
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 Code📋 Copy
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 Code📋 Copy
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 Code📋 Copy
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 Code📋 Copy
01: { name: "Jeff" }
02: 
03: { name: "Jeff"; } //<== The semi colon is placed just before the closing tag

Here is another article you might like 😊 "Diary Of Insights: A Documentation Of My Discoveries"