Understanding Automatic Semicolon Insertion in JavaScript

Semicolons and Automatic Semicolon Insertion are two of the most misunderstood topics in JavaScript. In this tutorial, you will learn about what ASI is. You will also learn about the rules that determine where semicolons are required. This will also help you understand when ASI can cause you troubles.

Introduction: Semicolons are … not required

When I started with JavaScript I’ve been told that semicolons are required. I was supposed to add semicolon at the end of each statement. I followed this rule for more than five years. Then, I came across a [JavaScript Standard Style], or standard.js for short. While reading this style guide I there was one rule that surprised me.

This rule was simple and straightforward: “No semicolons”. Wait, what? I thought that semicolons are required. How can this rule forbid using something that is required? As it turned out, semicolons in JavaScript are yet another confusing topics, just as this. In JavaScript, there is something called Automatic Semicolon Insertion, or ASI.

Automatic Semicolon Insertion made simple

First, what is this Automatic Semicolon Insertion? The ASI is one of JavaScript’s syntactic features. Without a doubt, it is probably one of JavaScript’s most controversial. Automatic Semicolon Insertion is something like a subprogram or process automatically running on a background when JavaScript parser parses your code.

What this subprogram, or process, does is it inserts semicolons where it is necessary when you run your code. In JavaScript, there are situations where semicolons are required. Otherwise, your code could break. The job of Automatic Semicolon Insertion is to make sure your code follows these rules. If some required semicolon is missing ASI will add it.

Rules of Automatic Semicolon Insertion

There are three main rules for Automatic Semicolon Insertion that state where semicolons are required, and will be inserted. These rules are, as specified in ECMAScript Language Specification, as following:

1. When the program contains a token that is not allowed by the formal grammar, then a semicolon is inserted if (a) there is a line terminator at that point, or (b) the unexpected token was a closing brace (}) or closing parenthesis ()).

2. When, as the source text is parsed from left to right, the end of the input stream of tokens is encountered and the parser is unable to parse the input token stream as a single instance of the goal nonterminal, then a semicolon is automatically inserted at the end of the input stream.

3. When a “restricted production” (return, break, continue, throw and ++ and -- postfix operators) is encountered and contains a line terminator in a place where the grammar contains the annotation, then a semicolon is inserted.

To make these rules easier to understand, we will break them down further to seven rules. I hope that this will also make them easier for you to remember and recall later. When you learn these rules you will know where missing semicolon can cause problems. Let’s take a look at each along with some examples of what can happen.

Rule no.1

The first rule is that ASI will add a semicolon when the next line starts with code that breaks the current one. This can happen when code spawns over multiple lines.

// EXAMPLE
const sum = 5 + 5
(sum).toFixed(3)

// Is interpreted as:
const sum = 5 + 5(sum).toFixed(3);
// ReferenceError: Cannot access 'sum' before initialization
// JavaScript parser basically assumes
// that what we want to do is a function call
// i.e.: 5(sum), calling function 5 with parameter sum
// FIX:
const sum = 5 + 5;
(sum).toFixed(3)
// Is interpreted as:
const sum = 5 + 5;
sum.toFixed(3);
// Or
// EXAMPLE
const mishmash = 13 + 'world'
[13].length
// TypeError: Cannot read property 'length' of undefined
// Is interpreted as:
const mishmash = 13 + 'world'[13].length;
// JavaScript parser basically assumes
// that we want to know the length of character on 12th index
// FIX:
const mishmash = 13 + 'world';
[13].length
// ;[13].length <= or add a semicolon before opening bracket
// Is interpreted as:
const mishmash = 13 + 'world';
[13].length;
// Or
// EXAMPLE
const mishmash = 13 + 'world'
([13].length)
// TypeError: "world" is not a function
// Is interpreted as:
const mishmash = 13 + 'world'([13].length)
// FIX:
const mishmash = 13 + 'world'; // <= Add semicolon here
([13].length)
// ;([13].length) <= or add a semicolon before opening parenthesis
// Is interpreted as:
const mishmash = 13 + 'world';
([13].length);

Rule no.2

ASI will add a semicolon when it encounters a closing curly brace (}) where it is not allowed by rules grammar. In this case, ASI will add a semicolon before the closing bracket.

// This is not valid, but ASI will intervene nonetheless
{ 0
 2 } 8

// Is interpreted as:
{ 0;
  2; } 8;
// Or, a valid example where ASI will also intervene
{ foo: 'barr' }
// Is interpreted as:
{ foo: 'barr'; }

Rule no.3

When JavaScript parses reaches the end of the file with your code ASI will also add a semicolon.

// EXAMPLE
const word = 'Hello'
const date = new Date().getFullYear()

console.log(`${word} from ${date}.`)
// Is interpreted as:
const word = 'Hello';
const date = new Date().getFullYear();
console.log(`${word} from ${date}.`); // <= Rule no.3

Rule no.4

Another situation when semicolon is added is when there is a return statement on a separate line.

// EXAMPLE
function sayHi() {
  return
  'Hello!'
}
// Is interpreted as:
function sayHi() {
  return; // <= Rule no.4 - semicolon after return statement
  'Hello!';
}
// NOTE:
// JavaScript assumes that end of line
// where return statement is is also end of the statement
// FIX:
function sayHi() {
  return 'Hello!'
}
// Or even
// NOTE: this is not recommended
function sayHi() {
  return (
    'Hello!'
  )
}
// Both are interpreted as:
function sayHi() {
  return 'Hello!';
}
// Or
// EXAMPLE
function returnObj() {
  return
  {
    name: 'John'
  }
}
// Is interpreted as:
function returnObj() {
  return;
  {
    name: 'John';
  }
}
// FIX:
function returnObj() {
  return {
    name: 'John'
  }; // <= New end of return statement
}
// Or
// NOTE: this is not recommended
function returnObj() {
  return (
    {
      name: 'John'
    }
  )
}
// Both are interpreted as:
function returnObj() {
  return {
    name: 'John'
  }; // <= New end of return statement
}

Rule no.5

Similarly to return statement ASI will also add a semicolon when it encounters break statement on a separate line.

// EXAMPLE
for (let idx = 6; idx > 0; idx--) {
  if (idx % 2 !== 0) {
    break
  }
}
// Is interpreted as:
for (let idx = 6; idx > 0; idx--) {
  if (idx % 2 !== 0) {
    break; // <= Rule no.5 - semicolon after break statement
  }
}

Rule no.6

When JavaScript parser encounters continue statement ASI will also add a semicolon at the end of the line where continue statement is.

// EXAMPLE
let x = 5
while (x > 0) {
  x--
  if (x % 2 === 0) {
    continue
  }
  console.log(x)
}
// Is interpreted as:
let x = 5;
while (x > 0) {
  x--;
  if (x % 2 === 0) {
    continue; // <= Rule no.6 - semicolon after continue statement
  }
  console.log(x);
}

Rule no.7

The last rule of ASI: add a semicolon when there is a throw statement on its own line.

// EXAMPLE:
function getError(message) {
  if (typeof message !== 'string') {
    throw 'Error: Message must be string.'
  }
}
// Is interpreted as:
function getError(message) {
  if (typeof message !== 'string') {
    throw 'Error: Message must be string.'; // <= Rule no.7 - semicolon after throw statement
  }
}

Note: The _return_, _break_, _continue_ and _throw_ statements are also known as “restricted productions”. Another two members of this group are also _++_ and _--_ postfix operators.

4 common misconceptions about Automatic Semicolon Insertion

There are some misconception about Automatic Semicolon Insertion. Let’s take a look at four of them that are the most common.

ASI will change your code

This misconception is probably caused by wrong understanding of how Automatic Semicolon Insertion works. The idea is that ASI will change your code directly, that it will add semicolons right into it. This is not the case. This is not how ASI works. Yes, when JavaScript parser parses your code ASI adds semicolons where necessary.

That said, JavaScript parser doesn’t save these changes in your source code. Think about this way. When you run your code, it is stored in a memory. It is stored there until either you terminate your code or until garbage collection does its job. When any of these two things happen, any changes JavaScript parser made are gone.

Semicolons are optional

Some JavaScript developers think that semicolons are optional. Well, yes and no. In the terms of JavaScript language, semicolons are not optional. There are specific situations where semicolons are required. These situations are defined by the rules we discussed above. If semicolons were optional these rules would not exist.

If those rules didn’t exist, Automatic Semicolon Insertion would have no purpose. It would not even work. These rules do exist and ASI does work. So, this is not true. Therefore, semicolons are not optional. That said, semicolons are optional when it comes to you and your code. JavaScript lets you decide whether you want to use them or not.

If you decide not to use them, JavaScript, or ASI, will add them when it is necessary. Otherwise, it will let your code as it is. So, are semicolons really optional? The only correct answer is, as usually, that it depends on the point of view.

Strict mode turns off ASI

The second misconception about ASI is that you can turn it of with strict mode. This doesn’t work. You can put as many 'use strict' statement across your code as you want and ASI will not care. The only way you can turn off, or avoid, this feature is to make sure that you put semicolons on all places where they are required.

When you do this, add semicolons where they are required, Automatic Semicolon Insertion will have no reason to intervene. The problem is that you have to know exactly where to put a semicolon. One solution is to learn the rules. Second option is to put semicolons everywhere. This will make it much harder to miss a semicolon where it should be.

Third solution is to outsource it. There are tools you can use that will warn you get into a situation where semicolon is required. Three most popular tools for this are jshint, jslint and eslint. These tools are very popular and it is very likely there will be a plugin you can install in your favorite IDE. This will make implementation easy.

Using semicolons everywhere is safer

The last common misconception is that using semicolons everywhere is safer. The idea is that this will help you avoid bugs in browser JavaScript engines. This is also supposed to protect you from compatibility issues between browsers. The problem is that while this idea may work in theory, it doesn’t really work in practice.

All existing browsers implement the specification of JavaScript with respect to how ASI works. What’s more, JavaScript, and browser JavaScript engines, have been around for a long time and any bugs that may have existed are long gone. What this means is that you don’t have to worry about whether all browsers are compatible with ASI.

The only thing you need to know is this. All browsers that implemented JavaScript engine also follow the same rules we discussed today. Also, remember that these rules of ASI were created by creators of JavaScript. So, don’t worry that missing semicolons and ASI will lead to bugs. It will not.

So, with semicolons or without

It is time for the most important question. Should you use semicolons or not? The answer is that it depends. It depends mostly on your personal preference. Your JavaScript code will work with semicolons as well as without them. Well, except those few situations with restricted productions, parenthesis and brackets and end of file we discussed.

In those rare cases it will be necessary to add semicolons to ensure your code will work properly. Knowing about the rules we discussed will help you recognize where you really need to add a semicolon and when not. You can also adjust how you write your code. For example, you should stop writing return statements on one line and returned value on another.

Also, you should never start a line with parenthesis. This can cause JavaScript parser to confuse statement with function call or array reference. If you do need to use parenthesis, or square brackets, at the start of the line? Add a semicolon right before the opening parenthesis or bracket.

Aside to those special cases, it is solely up to you and your preference whether you want to use semicolons or not.

#javascript #web development #development

What is GEEK

Buddha Community

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

• For single line comment in JavaScript we have to use // (double slashes)
• For multiple line comments we have to use / * – – * /

<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here https://bit.ly/31eZyDZ

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers

JS Development Company India | JavaScript Development Services

PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.

With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.

Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.

Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.

#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company

Definitive Guide to Understand Javascript Array reduce()

Javascript array reduce() is an inbuilt method that is used to apply a function to each element in the array to reduce the array to a single value. The reduce() function executes the provided function for each value of an array from left-to-right. The return value of a function is stored in an accumulator.

Understanding Javascript array reduce()

JavaScript array reduce() is one of the pioneer function of functional programming. The reduce() method accepts two parameters, the total and the current value. If you want to add all the values of an array, then use the array reduce() function.

It is similar to both  Javascript map() and  Javascript filter() but, it differs in the callback arguments.

The callback now receives an accumulator (it accumulates all the return values. Its value is the accumulation of a previously returned accumulations), a current value, a current index, and finally, the whole array.

#javascript #javascript map #javascript filter #javascript array reduce