Semicolons

  • 21.1 Yup. eslint: semi

    Why? When JavaScript encounters a line break without a semicolon, it uses a set of rules called Automatic Semicolon Insertion to determine whether or not it should regard that line break as the end of a statement, and (as the name implies) place a semicolon into your code before the line break if it thinks so. ASI contains a few eccentric behaviors, though, and your code will break if JavaScript misinterprets your line break. These rules will become more complicated as new features become a part of JavaScript. Explicitly terminating your statements and configuring your linter to catch missing semicolons will help prevent you from encountering issues.

    1. // bad - raises exception
    2. const luke = {}
    3. const leia = {}
    4. [luke, leia].forEach(jedi => jedi.father = 'vader')
    6. // bad - raises exception
    7. const reaction = "No! That’s impossible!"
    8. (async function meanwhileOnTheFalcon() {
    9.   // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
    10.   // ...
    11. }())
    13. // bad - returns `undefined` instead of the value on the next line - always happens when `return` is on a line by itself because of ASI!
    14. function foo() {
    15.   return
    16.     'search your feelings, you know it to be foo'
    17. }
    19. // good
    20. const luke = {};
    21. const leia = {};
    22. [luke, leia].forEach((jedi) => {
    23.   jedi.father = 'vader';
    24. });
    26. // good
    27. const reaction = "No! That’s impossible!";
    28. (async function meanwhileOnTheFalcon() {
    29.   // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
    30.   // ...
    31. }());
    33. // good
    34. function foo() {
    35.   return 'search your feelings, you know it to be foo';
    36. }

    Read more.