JavaScript Semicolons
Statements are the basic building blocks of programs in JavaScript. Semicolons ( ; ) are typically used to end sentences and divide statements from one another, much like periods do. By keeping the end of one statement from being mistakenly read as the start of the next, or vice versa, this division helps to make your code’s meaning clear.
Automatic Insertion of Semicolons (ASI)
JavaScript separates statements using semicolons, like many languages. JavaScript, on the other hand, is meant to be understanding and will recognize a lot of scenarios that you might have overlooked. Automated Semicolon Insertion allows this.
In some situations, ASI corrects syntax problems. JavaScript usually interprets a line break as an implicit semicolon if it cannot parse the second line as a continuation of the first. Because of this, semicolons are frequently omitted when writing two statements on different lines. For example, the code alert(‘Hello’); alert(‘World’); can also be written with a line break as alert(‘Hello’);\nalert(‘World’); and it will work because JavaScript treats the line break as a semicolon delimiter
Situations in Which Semicolons Are Usually Not Required
Semicolons are not necessary after code blocks ({…}) and grammar structures that utilise them, like if statements or loops, even if they are used to divide statements. Block statements end without a semicolon, unlike most others. In a similar vein, you shouldn’t use a semicolon to finish a code block that you specify, such as an if statement or loop. It only applies to distinct statements that are either inside or outside of the block.
Furthermore, it is generally not advised to use semicolons following declarations of export classes or export functions. The majority of JavaScript style guidelines do not advise using semicolons after function and class declarations, thus placing export before a class or function still counts as a declaration.
When Semicolons Are Necessary or Suggested
A semicolon is not necessarily implied by a newline. The code is susceptible to errors because ASI isn’t always reliable and there are some circumstances in which a line break isn’t translated as a semicolon. If the line ends with a token, such as +, ASI will not insert a semicolon. Given that it is regarded as a “incomplete expression,” this is intuitively clear. But ASI can also malfunction in less evident circumstances.
Here are few specific situations when using ASI is dangerous or where semicolons are usually needed:
- One line containing several statements.
- lines that begin with symbols like ( (for function calls), [ (for array literals or property access), or (for template literals) that could be mistaken for a continuation of the line before them. One conservative way to put a semicolon before such lines is as follows: ;[x,x+1,x+2].forEach(console.log).
- The guidelines governing whether semicolons can be safely removed are somewhat intricate and prone to mistakes. Subtle errors may result from relying on ASI without a thorough understanding.
JavaScript always interprets line breaks after return, throw, yield, break, and continue as semicolons. If you want to return a value, it must be on the same line as the return keyword, else a semicolon will be put after return and the value on the following line will be disregarded.
Unintentional Semicolons
Accidentally using a semicolon in unexpected locations might also cause hard-to-find issues. Semicolons after right parenthesis in if statements, for loops, and while loops are common mistakes. As a result, a “empty statement” is produced, in which the control structure accomplishes nothing and the subsequent block of code is always run, independent of the condition or loop status. It’s best practice to include a comment to explain the purpose of a deliberately empty statement (only a semicolon).
Best Practices and Optionality
JavaScript semicolon usage varies due of ASI’s complexity.
- The Argument in Favour of Always Using Semicolons: Although they are not technically necessary, many JavaScript programmers and the code examples support the explicit use of semicolons to indicate the endings of statements. The neighbourhood is said to have embraced this style extensively. This method has several advantages, such as giving the code a visual structure that makes it obvious where each statement finishes, requiring fewer rules to remember, and assisting in avoiding certain problems and errors brought on by ASI. It is advised since it is safer, particularly for novices. Beginners should add one after every line of code.
- The Argument in Favour of Semicolons: Another approach is to use semicolons sparingly, only in the few circumstances that absolutely demand them. Because they believe that semicolons create extra visual clutter, some developers like this design.
In the end, style is individualized. If you skip semicolons, use automatic code formatters like Prettier or static checkers like ESLint to avoid mistakes and enforce uniformity. These tools can automatically rectify errors or alert you to important concerns, such making sure lines that begin with are appropriately preceded by a semicolon when necessary. The engine will just overlook an extra semicolon; it is not a mistake. Because of this, using semicolons consistently is a safer default, especially for language learners.