github/javascript
1
1
Fork 0
mirror of https://github.com/airbnb/javascript.git synced 2026-04-25 03:00:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add "Control statements" section

Browse Source
This commit is contained in:
Martin Veith
2017-04-29 21:03:35 +02:00
parent ee6b23d862
commit 275d4bba98
1 changed files with 110 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
README.md
View File

@@ -31,6 +31,7 @@ Other Style Guides
1. [Hoisting](#hoisting)
1. [Comparison Operators & Equality](#comparison-operators--equality)
1. [Blocks](#blocks)
1. [Control Statements](#control-statements)
1. [Comments](#comments)
1. [Whitespace](#whitespace)
1. [Commas](#commas)
@@ -647,7 +648,7 @@ Other Style Guides
```
<a name="functions--in-blocks"></a><a name="7.3"></a>
- [7.3](#functions--in-blocks) Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears. eslint: [`no-loop-func`](http://eslint.org/docs/rules/no-loop-func.html)
- [7.3](#functions--in-blocks) Never declare a function in a non-function block (`if`, `while`, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears. eslint: [`no-loop-func`](http://eslint.org/docs/rules/no-loop-func.html)
<a name="functions--note-on-blocks"></a><a name="7.4"></a>
- [7.4](#functions--note-on-blocks) **Note:** ECMA-262 defines a `block` as a list of statements. A function declaration is not a statement. [Read ECMA-262's note on this issue](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97).
@@ -1963,10 +1964,68 @@ Other Style Guides
**[⬆ back to top](#table-of-contents)**
## Control Statements
<a name="control-statements"></a>
- [17.1](#control-statements) In case your control statement (`if`, `while` etc.) gets too long or exceeds the maximum line length, each (grouped) condition could be put into a new line. It's up to you whether the logical operator should begin or end the line.
```javascript
// bad
if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
thing1();
}
// bad
if (foo === 123 &&
bar === 'abc') {
thing1();
}
// bad
if (foo === 123
&& bar === 'abc') {
thing1();
}
// good
if (
(foo === 123 || bar === "abc") &&
doesItLookGoodWhenItBecomesThatLong() &&
isThisReallyHappening()
) {
thing1();
}
// good
if (foo === 123 && bar === 'abc') {
thing1();
}
// good
if (
foo === 123 &&
bar === 'abc'
) {
thing1();
}
// good
if (
foo === 123
&& bar === 'abc'
) {
thing1();
}
```
**[⬆ back to top](#table-of-contents)**
## Comments
<a name="comments--multiline"></a><a name="17.1"></a>
- [17.1](#comments--multiline) Use `/** ... */` for multi-line comments.
- [18.1](#comments--multiline) Use `/** ... */` for multi-line comments.
```javascript
// bad
@@ -1996,7 +2055,7 @@ Other Style Guides
```
<a name="comments--singleline"></a><a name="17.2"></a>
- [17.2](#comments--singleline) Use `//` for single line comments. Place single line comments on a newline above the subject of the comment. Put an empty line before the comment unless it's on the first line of a block.
- [18.2](#comments--singleline) Use `//` for single line comments. Place single line comments on a newline above the subject of the comment. Put an empty line before the comment unless it's on the first line of a block.
```javascript
// bad
@@ -2034,7 +2093,7 @@ Other Style Guides
}
```
- [17.3](#comments--spaces) Start all comments with a space to make it easier to read. eslint: [`spaced-comment`](http://eslint.org/docs/rules/spaced-comment)
- [18.3](#comments--spaces) Start all comments with a space to make it easier to read. eslint: [`spaced-comment`](http://eslint.org/docs/rules/spaced-comment)
```javascript
// bad
@@ -2071,10 +2130,10 @@ Other Style Guides
```
<a name="comments--actionitems"></a><a name="17.3"></a>
- [17.4](#comments--actionitems) Prefixing your comments with `FIXME` or `TODO` helps other developers quickly understand if you're pointing out a problem that needs to be revisited, or if you're suggesting a solution to the problem that needs to be implemented. These are different than regular comments because they are actionable. The actions are `FIXME: -- need to figure this out` or `TODO: -- need to implement`.
- [18.4](#comments--actionitems) Prefixing your comments with `FIXME` or `TODO` helps other developers quickly understand if you're pointing out a problem that needs to be revisited, or if you're suggesting a solution to the problem that needs to be implemented. These are different than regular comments because they are actionable. The actions are `FIXME: -- need to figure this out` or `TODO: -- need to implement`.
<a name="comments--fixme"></a><a name="17.4"></a>
- [17.5](#comments--fixme) Use `// FIXME:` to annotate problems.
- [18.5](#comments--fixme) Use `// FIXME:` to annotate problems.
```javascript
class Calculator extends Abacus {
@@ -2088,7 +2147,7 @@ Other Style Guides
```
<a name="comments--todo"></a><a name="17.5"></a>
- [17.6](#comments--todo) Use `// TODO:` to annotate solutions to problems.
- [18.6](#comments--todo) Use `// TODO:` to annotate solutions to problems.
```javascript
class Calculator extends Abacus {
@@ -2107,7 +2166,7 @@ Other Style Guides
## Whitespace
<a name="whitespace--spaces"></a><a name="18.1"></a>
- [18.1](#whitespace--spaces) Use soft tabs (space character) set to 2 spaces. eslint: [`indent`](http://eslint.org/docs/rules/indent.html) jscs: [`validateIndentation`](http://jscs.info/rule/validateIndentation)
- [19.1](#whitespace--spaces) Use soft tabs (space character) set to 2 spaces. eslint: [`indent`](http://eslint.org/docs/rules/indent.html) jscs: [`validateIndentation`](http://jscs.info/rule/validateIndentation)
```javascript
// bad
@@ -2127,7 +2186,7 @@ Other Style Guides
```
<a name="whitespace--before-blocks"></a><a name="18.2"></a>
- [18.2](#whitespace--before-blocks) Place 1 space before the leading brace. eslint: [`space-before-blocks`](http://eslint.org/docs/rules/space-before-blocks.html) jscs: [`requireSpaceBeforeBlockStatements`](http://jscs.info/rule/requireSpaceBeforeBlockStatements)
- [19.2](#whitespace--before-blocks) Place 1 space before the leading brace. eslint: [`space-before-blocks`](http://eslint.org/docs/rules/space-before-blocks.html) jscs: [`requireSpaceBeforeBlockStatements`](http://jscs.info/rule/requireSpaceBeforeBlockStatements)
```javascript
// bad
@@ -2154,7 +2213,7 @@ Other Style Guides
```
<a name="whitespace--around-keywords"></a><a name="18.3"></a>
- [18.3](#whitespace--around-keywords) Place 1 space before the opening parenthesis in control statements (`if`, `while` etc.). Place no space between the argument list and the function name in function calls and declarations. eslint: [`keyword-spacing`](http://eslint.org/docs/rules/keyword-spacing.html) jscs: [`requireSpaceAfterKeywords`](http://jscs.info/rule/requireSpaceAfterKeywords)
- [19.3](#whitespace--around-keywords) Place 1 space before the opening parenthesis in control statements (`if`, `while` etc.). Place no space between the argument list and the function name in function calls and declarations. eslint: [`keyword-spacing`](http://eslint.org/docs/rules/keyword-spacing.html) jscs: [`requireSpaceAfterKeywords`](http://jscs.info/rule/requireSpaceAfterKeywords)
```javascript
// bad
@@ -2179,7 +2238,7 @@ Other Style Guides
```
<a name="whitespace--infix-ops"></a><a name="18.4"></a>
- [18.4](#whitespace--infix-ops) Set off operators with spaces. eslint: [`space-infix-ops`](http://eslint.org/docs/rules/space-infix-ops.html) jscs: [`requireSpaceBeforeBinaryOperators`](http://jscs.info/rule/requireSpaceBeforeBinaryOperators), [`requireSpaceAfterBinaryOperators`](http://jscs.info/rule/requireSpaceAfterBinaryOperators)
- [19.4](#whitespace--infix-ops) Set off operators with spaces. eslint: [`space-infix-ops`](http://eslint.org/docs/rules/space-infix-ops.html) jscs: [`requireSpaceBeforeBinaryOperators`](http://jscs.info/rule/requireSpaceBeforeBinaryOperators), [`requireSpaceAfterBinaryOperators`](http://jscs.info/rule/requireSpaceAfterBinaryOperators)
```javascript
// bad
@@ -2190,7 +2249,7 @@ Other Style Guides
```
<a name="whitespace--newline-at-end"></a><a name="18.5"></a>
- [18.5](#whitespace--newline-at-end) End files with a single newline character. eslint: [`eol-last`](https://github.com/eslint/eslint/blob/master/docs/rules/eol-last.md)
- [19.5](#whitespace--newline-at-end) End files with a single newline character. eslint: [`eol-last`](https://github.com/eslint/eslint/blob/master/docs/rules/eol-last.md)
```javascript
// bad
@@ -2215,7 +2274,7 @@ Other Style Guides
```
<a name="whitespace--chains"></a><a name="18.6"></a>
- [18.6](#whitespace--chains) Use indentation when making long method chains (more than 2 method chains). Use a leading dot, which
- [19.6](#whitespace--chains) Use indentation when making long method chains (more than 2 method chains). Use a leading dot, which
emphasizes that the line is a method call, not a new statement. eslint: [`newline-per-chained-call`](http://eslint.org/docs/rules/newline-per-chained-call) [`no-whitespace-before-property`](http://eslint.org/docs/rules/no-whitespace-before-property)
```javascript
@@ -2259,7 +2318,7 @@ Other Style Guides
```
<a name="whitespace--after-blocks"></a><a name="18.7"></a>
- [18.7](#whitespace--after-blocks) Leave a blank line after blocks and before the next statement. jscs: [`requirePaddingNewLinesAfterBlocks`](http://jscs.info/rule/requirePaddingNewLinesAfterBlocks)
- [19.7](#whitespace--after-blocks) Leave a blank line after blocks and before the next statement. jscs: [`requirePaddingNewLinesAfterBlocks`](http://jscs.info/rule/requirePaddingNewLinesAfterBlocks)
```javascript
// bad
@@ -2317,7 +2376,7 @@ Other Style Guides
```
<a name="whitespace--padded-blocks"></a><a name="18.8"></a>
- [18.8](#whitespace--padded-blocks) Do not pad your blocks with blank lines. eslint: [`padded-blocks`](http://eslint.org/docs/rules/padded-blocks.html) jscs: [`disallowPaddingNewlinesInBlocks`](http://jscs.info/rule/disallowPaddingNewlinesInBlocks)
- [19.8](#whitespace--padded-blocks) Do not pad your blocks with blank lines. eslint: [`padded-blocks`](http://eslint.org/docs/rules/padded-blocks.html) jscs: [`disallowPaddingNewlinesInBlocks`](http://jscs.info/rule/disallowPaddingNewlinesInBlocks)
```javascript
// bad
@@ -2350,7 +2409,7 @@ Other Style Guides
```
<a name="whitespace--in-parens"></a><a name="18.9"></a>
- [18.9](#whitespace--in-parens) Do not add spaces inside parentheses. eslint: [`space-in-parens`](http://eslint.org/docs/rules/space-in-parens.html) jscs: [`disallowSpacesInsideParentheses`](http://jscs.info/rule/disallowSpacesInsideParentheses)
- [19.9](#whitespace--in-parens) Do not add spaces inside parentheses. eslint: [`space-in-parens`](http://eslint.org/docs/rules/space-in-parens.html) jscs: [`disallowSpacesInsideParentheses`](http://jscs.info/rule/disallowSpacesInsideParentheses)
```javascript
// bad
@@ -2375,7 +2434,7 @@ Other Style Guides
```
<a name="whitespace--in-brackets"></a><a name="18.10"></a>
- [18.10](#whitespace--in-brackets) Do not add spaces inside brackets. eslint: [`array-bracket-spacing`](http://eslint.org/docs/rules/array-bracket-spacing.html) jscs: [`disallowSpacesInsideArrayBrackets`](http://jscs.info/rule/disallowSpacesInsideArrayBrackets)
- [19.10](#whitespace--in-brackets) Do not add spaces inside brackets. eslint: [`array-bracket-spacing`](http://eslint.org/docs/rules/array-bracket-spacing.html) jscs: [`disallowSpacesInsideArrayBrackets`](http://jscs.info/rule/disallowSpacesInsideArrayBrackets)
```javascript
// bad
@@ -2388,7 +2447,7 @@ Other Style Guides
```
<a name="whitespace--in-braces"></a><a name="18.11"></a>
- [18.11](#whitespace--in-braces) Add spaces inside curly braces. eslint: [`object-curly-spacing`](http://eslint.org/docs/rules/object-curly-spacing.html) jscs: [`requireSpacesInsideObjectBrackets`](http://jscs.info/rule/requireSpacesInsideObjectBrackets)
- [19.11](#whitespace--in-braces) Add spaces inside curly braces. eslint: [`object-curly-spacing`](http://eslint.org/docs/rules/object-curly-spacing.html) jscs: [`requireSpacesInsideObjectBrackets`](http://jscs.info/rule/requireSpacesInsideObjectBrackets)
```javascript
// bad
@@ -2399,7 +2458,7 @@ Other Style Guides
```
<a name="whitespace--max-len"></a><a name="18.12"></a>
- [18.12](#whitespace--max-len) Avoid having lines of code that are longer than 100 characters (including whitespace). Note: per [above](#strings--line-length), long strings are exempt from this rule, and should not be broken up. eslint: [`max-len`](http://eslint.org/docs/rules/max-len.html) jscs: [`maximumLineLength`](http://jscs.info/rule/maximumLineLength)
- [19.12](#whitespace--max-len) Avoid having lines of code that are longer than 100 characters (including whitespace). Note: per [above](#strings--line-length), long strings are exempt from this rule, and should not be broken up. eslint: [`max-len`](http://eslint.org/docs/rules/max-len.html) jscs: [`maximumLineLength`](http://jscs.info/rule/maximumLineLength)
> Why? This ensures readability and maintainability.
@@ -2433,7 +2492,7 @@ Other Style Guides
## Commas
<a name="commas--leading-trailing"></a><a name="19.1"></a>
- [19.1](#commas--leading-trailing) Leading commas: **Nope.** eslint: [`comma-style`](http://eslint.org/docs/rules/comma-style.html) jscs: [`requireCommaBeforeLineBreak`](http://jscs.info/rule/requireCommaBeforeLineBreak)
- [20.1](#commas--leading-trailing) Leading commas: **Nope.** eslint: [`comma-style`](http://eslint.org/docs/rules/comma-style.html) jscs: [`requireCommaBeforeLineBreak`](http://jscs.info/rule/requireCommaBeforeLineBreak)
```javascript
// bad
@@ -2468,7 +2527,7 @@ Other Style Guides
```
<a name="commas--dangling"></a><a name="19.2"></a>
- [19.2](#commas--dangling) Additional trailing comma: **Yup.** eslint: [`comma-dangle`](http://eslint.org/docs/rules/comma-dangle.html) jscs: [`requireTrailingComma`](http://jscs.info/rule/requireTrailingComma)
- [20.2](#commas--dangling) Additional trailing comma: **Yup.** eslint: [`comma-dangle`](http://eslint.org/docs/rules/comma-dangle.html) jscs: [`requireTrailingComma`](http://jscs.info/rule/requireTrailingComma)
> Why? This leads to cleaner git diffs. Also, transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don't have to worry about the [trailing comma problem](https://github.com/airbnb/javascript/blob/es5-deprecated/es5/README.md#commas) in legacy browsers.
@@ -2569,7 +2628,7 @@ Other Style Guides
## Semicolons
<a name="semicolons--required"></a><a name="20.1"></a>
- [20.1](#semicolons--required) **Yup.** eslint: [`semi`](http://eslint.org/docs/rules/semi.html) jscs: [`requireSemicolons`](http://jscs.info/rule/requireSemicolons)
- [21.1](#semicolons--required) **Yup.** eslint: [`semi`](http://eslint.org/docs/rules/semi.html) jscs: [`requireSemicolons`](http://jscs.info/rule/requireSemicolons)
```javascript
// bad
@@ -2599,10 +2658,10 @@ Other Style Guides
## Type Casting & Coercion
<a name="coercion--explicit"></a><a name="21.1"></a>
- [21.1](#coercion--explicit) Perform type coercion at the beginning of the statement.
- [22.1](#coercion--explicit) Perform type coercion at the beginning of the statement.
<a name="coercion--strings"></a><a name="21.2"></a>
- [21.2](#coercion--strings) Strings:
- [22.2](#coercion--strings) Strings:
```javascript
// => this.reviewScore = 9;
@@ -2618,7 +2677,7 @@ Other Style Guides
```
<a name="coercion--numbers"></a><a name="21.3"></a>
- [21.3](#coercion--numbers) Numbers: Use `Number` for type casting and `parseInt` always with a radix for parsing strings. eslint: [`radix`](http://eslint.org/docs/rules/radix)
- [22.3](#coercion--numbers) Numbers: Use `Number` for type casting and `parseInt` always with a radix for parsing strings. eslint: [`radix`](http://eslint.org/docs/rules/radix)
```javascript
const inputValue = '4';
@@ -2643,7 +2702,7 @@ Other Style Guides
```
<a name="coercion--comment-deviations"></a><a name="21.4"></a>
- [21.4](#coercion--comment-deviations) If for whatever reason you are doing something wild and `parseInt` is your bottleneck and need to use Bitshift for [performance reasons](https://jsperf.com/coercion-vs-casting/3), leave a comment explaining why and what you're doing.
- [22.4](#coercion--comment-deviations) If for whatever reason you are doing something wild and `parseInt` is your bottleneck and need to use Bitshift for [performance reasons](https://jsperf.com/coercion-vs-casting/3), leave a comment explaining why and what you're doing.
```javascript
// good
@@ -2656,7 +2715,7 @@ Other Style Guides
```
<a name="coercion--bitwise"></a><a name="21.5"></a>
- [21.5](#coercion--bitwise) **Note:** Be careful when using bitshift operations. Numbers are represented as [64-bit values](https://es5.github.io/#x4.3.19), but bitshift operations always return a 32-bit integer ([source](https://es5.github.io/#x11.7)). Bitshift can lead to unexpected behavior for integer values larger than 32 bits. [Discussion](https://github.com/airbnb/javascript/issues/109). Largest signed 32-bit Int is 2,147,483,647:
- [22.5](#coercion--bitwise) **Note:** Be careful when using bitshift operations. Numbers are represented as [64-bit values](https://es5.github.io/#x4.3.19), but bitshift operations always return a 32-bit integer ([source](https://es5.github.io/#x11.7)). Bitshift can lead to unexpected behavior for integer values larger than 32 bits. [Discussion](https://github.com/airbnb/javascript/issues/109). Largest signed 32-bit Int is 2,147,483,647:
```javascript
2147483647 >> 0; // => 2147483647
@@ -2665,7 +2724,7 @@ Other Style Guides
```
<a name="coercion--booleans"></a><a name="21.6"></a>
- [21.6](#coercion--booleans) Booleans:
- [22.6](#coercion--booleans) Booleans:
```javascript
const age = 0;
@@ -2686,7 +2745,7 @@ Other Style Guides
## Naming Conventions
<a name="naming--descriptive"></a><a name="22.1"></a>
- [22.1](#naming--descriptive) Avoid single letter names. Be descriptive with your naming. eslint: [`id-length`](http://eslint.org/docs/rules/id-length)
- [23.1](#naming--descriptive) Avoid single letter names. Be descriptive with your naming. eslint: [`id-length`](http://eslint.org/docs/rules/id-length)
```javascript
// bad
@@ -2701,7 +2760,7 @@ Other Style Guides
```
<a name="naming--camelCase"></a><a name="22.2"></a>
- [22.2](#naming--camelCase) Use camelCase when naming objects, functions, and instances. eslint: [`camelcase`](http://eslint.org/docs/rules/camelcase.html) jscs: [`requireCamelCaseOrUpperCaseIdentifiers`](http://jscs.info/rule/requireCamelCaseOrUpperCaseIdentifiers)
- [23.2](#naming--camelCase) Use camelCase when naming objects, functions, and instances. eslint: [`camelcase`](http://eslint.org/docs/rules/camelcase.html) jscs: [`requireCamelCaseOrUpperCaseIdentifiers`](http://jscs.info/rule/requireCamelCaseOrUpperCaseIdentifiers)
```javascript
// bad
@@ -2715,7 +2774,7 @@ Other Style Guides
```
<a name="naming--PascalCase"></a><a name="22.3"></a>
- [22.3](#naming--PascalCase) Use PascalCase only when naming constructors or classes. eslint: [`new-cap`](http://eslint.org/docs/rules/new-cap.html) jscs: [`requireCapitalizedConstructors`](http://jscs.info/rule/requireCapitalizedConstructors)
- [23.3](#naming--PascalCase) Use PascalCase only when naming constructors or classes. eslint: [`new-cap`](http://eslint.org/docs/rules/new-cap.html) jscs: [`requireCapitalizedConstructors`](http://jscs.info/rule/requireCapitalizedConstructors)
```javascript
// bad
@@ -2740,7 +2799,7 @@ Other Style Guides
```
<a name="naming--leading-underscore"></a><a name="22.4"></a>
- [22.4](#naming--leading-underscore) Do not use trailing or leading underscores. eslint: [`no-underscore-dangle`](http://eslint.org/docs/rules/no-underscore-dangle.html) jscs: [`disallowDanglingUnderscores`](http://jscs.info/rule/disallowDanglingUnderscores)
- [23.4](#naming--leading-underscore) Do not use trailing or leading underscores. eslint: [`no-underscore-dangle`](http://eslint.org/docs/rules/no-underscore-dangle.html) jscs: [`disallowDanglingUnderscores`](http://jscs.info/rule/disallowDanglingUnderscores)
> Why? JavaScript does not have the concept of privacy in terms of properties or methods. Although a leading underscore is a common convention to mean “private”, in fact, these properties are fully public, and as such, are part of your public API contract. This convention might lead developers to wrongly think that a change won't count as breaking, or that tests aren't needed. tl;dr: if you want something to be “private”, it must not be observably present.
@@ -2755,7 +2814,7 @@ Other Style Guides
```
<a name="naming--self-this"></a><a name="22.5"></a>
- [22.5](#naming--self-this) Don't save references to `this`. Use arrow functions or [Function#bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind). jscs: [`disallowNodeTypes`](http://jscs.info/rule/disallowNodeTypes)
- [23.5](#naming--self-this) Don't save references to `this`. Use arrow functions or [Function#bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind). jscs: [`disallowNodeTypes`](http://jscs.info/rule/disallowNodeTypes)
```javascript
// bad
@@ -2783,7 +2842,7 @@ Other Style Guides
```
<a name="naming--filename-matches-export"></a><a name="22.6"></a>
- [22.6](#naming--filename-matches-export) A base filename should exactly match the name of its default export.
- [23.6](#naming--filename-matches-export) A base filename should exactly match the name of its default export.
```javascript
// file 1 contents
@@ -2819,7 +2878,7 @@ Other Style Guides
```
<a name="naming--camelCase-default-export"></a><a name="22.7"></a>
- [22.7](#naming--camelCase-default-export) Use camelCase when you export-default a function. Your filename should be identical to your function's name.
- [23.7](#naming--camelCase-default-export) Use camelCase when you export-default a function. Your filename should be identical to your function's name.
```javascript
function makeStyleGuide() {
@@ -2830,7 +2889,7 @@ Other Style Guides
```
<a name="naming--PascalCase-singleton"></a><a name="22.8"></a>
- [22.8](#naming--PascalCase-singleton) Use PascalCase when you export a constructor / class / singleton / function library / bare object.
- [23.8](#naming--PascalCase-singleton) Use PascalCase when you export a constructor / class / singleton / function library / bare object.
```javascript
const AirbnbStyleGuide = {
@@ -2842,7 +2901,7 @@ Other Style Guides
```
<a name="naming--Acronyms-and-Initialisms"></a>
- [22.9](#naming--Acronyms-and-Initialisms) Acronyms and initialisms should always be all capitalized, or all lowercased.
- [23.9](#naming--Acronyms-and-Initialisms) Acronyms and initialisms should always be all capitalized, or all lowercased.
> Why? Names are for readability, not to appease a computer algorithm.
@@ -2878,10 +2937,10 @@ Other Style Guides
## Accessors
<a name="accessors--not-required"></a><a name="23.1"></a>
- [23.1](#accessors--not-required) Accessor functions for properties are not required.
- [24.1](#accessors--not-required) Accessor functions for properties are not required.
<a name="accessors--no-getters-setters"></a><a name="23.2"></a>
- [23.2](#accessors--no-getters-setters) Do not use JavaScript getters/setters as they cause unexpected side effects and are harder to test, maintain, and reason about. Instead, if you do make accessor functions, use getVal() and setVal('hello').
- [24.2](#accessors--no-getters-setters) Do not use JavaScript getters/setters as they cause unexpected side effects and are harder to test, maintain, and reason about. Instead, if you do make accessor functions, use getVal() and setVal('hello').
```javascript
// bad
@@ -2908,7 +2967,7 @@ Other Style Guides
```
<a name="accessors--boolean-prefix"></a><a name="23.3"></a>
- [23.3](#accessors--boolean-prefix) If the property/method is a `boolean`, use `isVal()` or `hasVal()`.
- [24.3](#accessors--boolean-prefix) If the property/method is a `boolean`, use `isVal()` or `hasVal()`.
```javascript
// bad
@@ -2923,7 +2982,7 @@ Other Style Guides
```
<a name="accessors--consistent"></a><a name="23.4"></a>
- [23.4](#accessors--consistent) It's okay to create get() and set() functions, but be consistent.
- [24.4](#accessors--consistent) It's okay to create get() and set() functions, but be consistent.
```javascript
class Jedi {
@@ -2948,7 +3007,7 @@ Other Style Guides
## Events
<a name="events--hash"></a><a name="24.1"></a>
- [24.1](#events--hash) When attaching data payloads to events (whether DOM events or something more proprietary like Backbone events), pass a hash instead of a raw value. This allows a subsequent contributor to add more data to the event payload without finding and updating every handler for the event. For example, instead of:
- [25.1](#events--hash) When attaching data payloads to events (whether DOM events or something more proprietary like Backbone events), pass a hash instead of a raw value. This allows a subsequent contributor to add more data to the event payload without finding and updating every handler for the event. For example, instead of:
```javascript
// bad
@@ -2980,7 +3039,7 @@ Other Style Guides
## jQuery
<a name="jquery--dollar-prefix"></a><a name="25.1"></a>
- [25.1](#jquery--dollar-prefix) Prefix jQuery object variables with a `$`. jscs: [`requireDollarBeforejQueryAssignment`](http://jscs.info/rule/requireDollarBeforejQueryAssignment)
- [26.1](#jquery--dollar-prefix) Prefix jQuery object variables with a `$`. jscs: [`requireDollarBeforejQueryAssignment`](http://jscs.info/rule/requireDollarBeforejQueryAssignment)
```javascript
// bad
@@ -2994,7 +3053,7 @@ Other Style Guides
```
<a name="jquery--cache"></a><a name="25.2"></a>
- [25.2](#jquery--cache) Cache jQuery lookups.
- [26.2](#jquery--cache) Cache jQuery lookups.
```javascript
// bad
@@ -3022,10 +3081,10 @@ Other Style Guides
```
<a name="jquery--queries"></a><a name="25.3"></a>
- [25.3](#jquery--queries) For DOM queries use Cascading `$('.sidebar ul')` or parent > child `$('.sidebar > ul')`. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16)
- [26.3](#jquery--queries) For DOM queries use Cascading `$('.sidebar ul')` or parent > child `$('.sidebar > ul')`. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16)
<a name="jquery--find"></a><a name="25.4"></a>
- [25.4](#jquery--find) Use `find` with scoped jQuery object queries.
- [26.4](#jquery--find) Use `find` with scoped jQuery object queries.
```javascript
// bad
@@ -3050,7 +3109,7 @@ Other Style Guides
## ECMAScript 5 Compatibility
<a name="es5-compat--kangax"></a><a name="26.1"></a>
- [26.1](#es5-compat--kangax) Refer to [Kangax](https://twitter.com/kangax/)'s ES5 [compatibility table](https://kangax.github.io/es5-compat-table/).
- [27.1](#es5-compat--kangax) Refer to [Kangax](https://twitter.com/kangax/)'s ES5 [compatibility table](https://kangax.github.io/es5-compat-table/).
**[⬆ back to top](#table-of-contents)**
@@ -3058,7 +3117,7 @@ Other Style Guides
## ECMAScript 6+ (ES 2015+) Styles
<a name="es6-styles"></a><a name="27.1"></a>
- [27.1](#es6-styles) This is a collection of links to the various ES6 features.
- [28.1](#es6-styles) This is a collection of links to the various ES6 features.
1. [Arrow Functions](#arrow-functions)
1. [Classes](#classes--constructors)
@@ -3075,7 +3134,7 @@ Other Style Guides
1. [Modules](#modules)
<a name="tc39-proposals"></a>
- [27.2](#tc39-proposals) Do not use [TC39 proposals](https://github.com/tc39/proposals) that have not reached stage 3.
- [28.2](#tc39-proposals) Do not use [TC39 proposals](https://github.com/tc39/proposals) that have not reached stage 3.
> Why? [They are not finalized](https://tc39.github.io/process-document/), and they are subject to change or to be withdrawn entirely. We want to use JavaScript, and proposals are not JavaScript yet.
@@ -3084,7 +3143,7 @@ Other Style Guides
## Testing
<a name="testing--yup"></a><a name="28.1"></a>
- [28.1](#testing--yup) **Yup.**
- [29.1](#testing--yup) **Yup.**
```javascript
function foo() {
@@ -3093,7 +3152,7 @@ Other Style Guides
```
<a name="testing--for-real"></a><a name="28.2"></a>
- [28.2](#testing--for-real) **No, but seriously**:
- [29.2](#testing--for-real) **No, but seriously**:
- Whichever testing framework you use, you should be writing tests!
- Strive to write many small pure functions, and minimize where mutations occur.
- Be cautious about stubs and mocks - they can make your tests more brittle.