Skip to content

Commit 8cf2c70

Browse files
thepeoplesbourgeoisljharb
authored andcommitted
[guide] Add explanation for semicolon enforcement rule
Also update code samples to highlight ways in which ES6 currently mishandles code when relying on Automatic Semicolon Insertion Revise hyperlink and example - Use more up-to-date TC39 reference page on github.io - wrap returnless function with side-effects in curly braces also, clean up punctuation on a long comment line Always use single-quoted strings Except for when the string needs to be double-quoted because the string contains apostrophes Update second example to incorporate IIFE An IIFE is a more realistic example of code that developers may encounter which would raise an exception when relying completely upon ASI
1 parent 44dbd0b commit 8cf2c70

File tree

1 file changed

+34
-13
lines changed

1 file changed

+34
-13
lines changed

README.md

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2767,24 +2767,45 @@ Other Style Guides
27672767
<a name="semicolons--required"></a><a name="20.1"></a>
27682768
- [21.1](#semicolons--required) **Yup.** eslint: [`semi`](https://eslint.org/docs/rules/semi.html) jscs: [`requireSemicolons`](http://jscs.info/rule/requireSemicolons)
27692769
2770+
> Why? When JavaScript encounters a line break without a semicolon, it uses a set of rules called [Automatic Semicolon Insertion](https://tc39.github.io/ecma262/#sec-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.
2771+
27702772
```javascript
2771-
// bad
2772-
(function () {
2773-
const name = 'Skywalker'
2774-
return name
2775-
})()
2773+
// bad - raises exception
2774+
const luke = {}
2775+
const leia = {}
2776+
[luke, leia].forEach(jedi => jedi.father = 'vader')
2777+
2778+
// bad - raises exception
2779+
const reaction = "No! That's impossible!"
2780+
(async function meanwhileOnTheFalcon(){
2781+
// handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
2782+
// ...
2783+
}())
2784+
2785+
// bad - returns `undefined` instead of the value on the next line - always happens when `return` is on a line by itself because of ASI!
2786+
function foo() {
2787+
return
2788+
'search your feelings, you know it to be foo'
2789+
}
27762790

27772791
// good
2778-
(function () {
2779-
const name = 'Skywalker';
2780-
return name;
2792+
const luke = {};
2793+
const leia = {};
2794+
[luke, leia].forEach((jedi) => {
2795+
jedi.father = 'vader';
2796+
});
2797+
2798+
// good
2799+
const reaction = "No! That's impossible!";
2800+
(async function meanwhileOnTheFalcon(){
2801+
// handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
2802+
// ...
27812803
}());
27822804

2783-
// good, but legacy (guards against the function becoming an argument when two files with IIFEs are concatenated)
2784-
;((() => {
2785-
const name = 'Skywalker';
2786-
return name;
2787-
})());
2805+
// good
2806+
function foo() {
2807+
return 'search your feelings, you know it to be foo';
2808+
}
27882809
```
27892810
27902811
[Read more](https://stackoverflow.com/questions/7365172/semicolon-before-self-invoking-function/7365214#7365214).

0 commit comments

Comments
 (0)