Empty Statements in JavaScript
Empty Statements are an interesting feature of JavaScript you might not know about. They can certainly cause you some grief if used incorrectly, or added accidentally. Before we get into what they are, it’s important to quickly cover semicolon use in JavaScript.
Semicolons are essential to JavaScript. When your code is run, semicolons are what the compiler uses to distinguish between separate statements, keeping your lines of code from being mashed into one giant single statement. But as you likely know, you don’t have to add them to your code for it to compile correctly. This is due to automatic semicolon insertion. There are rules to where and how this happens, which you can read all about here. But the important part is to know that it does happen.
Some people still do prefer to manually add semicolons to their code, although semicolon use in JavaScript doesn’t seem to be as prominent as it used to be. This can make our empty statement problem easier to spot when debugging. But remember, you might not always be working on the codebase of your dreams.
Now, according to the MDN definition:
An empty statement is used to provide no statement, although the JavaScript syntax would expect one.
The reason this can cause problems, is because an empty statement is triggered with a semicolon. It can look something like this:
The semicolon after our if(dogIsSmelly) conditional statement is used to provide no statement, although the JavaScript syntax would expect one. The compiler thinks anything that comes next is going to be a completely new, unrelated statement. The if statement finishes, and washDog() is run. This makes perfect sense, because the semicolon is what tells the compiler a statement is finished. But note that if we remove the semicolon, the next line is considered to be the conditional’s execution statement.
You can see here that washDog() is only getting called when dogIsSmelly === true . You can also see automatic semicolon insertion at work! When compiled with no curly braces provided to clearly indicate the execution statement, only the first line after a conditional is considered to be part of that conditional. When compiled, a semicolon is added automagically after the washDog(“false”) line, ending the conditional execution statement, and the following console.log() is run as normal.
There may even be times you want to purposefully use an empty statement. One example is if your for loop logic is being handled before the execution block is even run.
Keep in mind, that in this instance, not even ASI will help you. If run the for loop without the semicolon at the end, you will get an Uncaught SyntaxError: Unexpected end of input .
A semicolon is also often used at the beginning of JavaScript libraries or files, so that you can concatenate multiple files together easily. If one of your files was missing a semicolon at the end, and ASI didn’t handle it for some reason, you could end up accidentally compiling with some code smashed together. Adding a semicolon to the beginning of a file will prevent whatever is compiled before it from prepending onto it.
It is important to note that if purposefully using empty statements in your code, it’s a good idea to leave a comment stating that you are doing so. Since they’re not used all that often, it may not be obvious what you’re doing from an outsiders perspective. Especially if you’re working in a codebase that is full of semicolons anyway.
While it may not be the most useful feature of JavaScript, it is very important to know about empty statements, as well as the implementation of semicolons in general. You can read the MDN documentation on empty statements here.
