JavaScript Gotchas – Part 1 – Automatic Semicolon Insertion

January 16, 2014

no comments

As I mentioned in previous posts, I spent the recent year getting closer to front end development. During that time period, I wrote more and more JavaScript code. I love JavaScript and I think that it’s one of the most powerful and expressive languages that I have ever used. But, like any other language, JavaScript has its problems and occasional WTF moments. In this series, I’ll highlight some of JavaScript’s most notorious gotchas. The first one I want to tackle is a feature called Automatic Semicolon Insertion (ASI).

ASI is actually a feature that is meant to make the programmer’s life easier. It allows you to omit the semicolon at the end of some statements, and let JavaScript insert them for you. The following snippet is a perfectly fine JavaScript program, even though none of the statements are terminated by a semicolon:

   1: function getSomeValue() {

   2:      console.log("Doing some crazy things inside the function")

   3:      return 10

   4: }

   5:  

   6: var value = getSomeValue()

   7: console.log(value)

Putting style preferences aside (I personally don’t like this coding style), in some cases, a semicolon omission can be the difference between a working code and a broken code. The reason for that is that JavaScript has specific rules for where it can automatically insert a semicolon, and sometimes, those rules are not what you expect. Let’s change the above snippet so the method will return an object:

   1: function getSomeValue() {

   2:      console.log("Doing some crazy things inside the function")

   3:      return 

   4:      {

   5:           firstName: "Moshe",

   6:           lastName: "Levi"

   7:      }

   8: }

   9:  

  10: var value = getSomeValue()

  11: console.log(value.lastName)

The output of the above snippet will not contain Levi. Instead, the program will throw a SyntaxError exception. Why? Because JavaScript will automatically insert a semicolon after the return statement (because it is perfectly fine for a function to return without a value), and by doing so, unintentionally make the program syntactically incorrect (an object literal cannot be used as a declaration, only as an expression). To fix the error, we need to place the opening bracket on the same line as the return statement. This will prevent JavaScript from treating the return as a standalone statement. Now, the object literal is used as an expression, which is syntactically correct:

   1: function getSomeValue() {

   2:     console.log("Doing some crazy things inside the function")

   3:     return {

   4:         firstName: "Moshe",

   5:         lastName: "Levi"

   6:     }

   7: }

   8:  

   9: var value = getSomeValue()

  10: console.log(value.lastName)

To sum up, be aware of JavaScript’s ASI feature and know when and where it can bite you. Also, to maintain a uniform coding style, I suggest that you won’t rely on that feature at all, and always terminate statements with a semicolon.

Cross-posted from http://www.programmingtidbits.com/post/2014/01/16/JavaScript-Gotchas-Part-1-Automatic-Semicolon-Insertion.aspx

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*