github/javascript
1
1
Fork 0
mirror of https://github.com/airbnb/javascript.git synced 2026-01-14 10:18:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

[links] id => name

Browse Source
This commit is contained in:
Harrison Shoff
2015-05-13 18:01:20 -07:00
parent 535c4f73d0
commit 43a5f84462
1 changed files with 100 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
README.md
View File

@@ -47,7 +47,7 @@
## Types
- [1.1](#1.1) <a id='1.1'></a> **Primitives**: When you access a primitive type you work directly on its value.
- [1.1](#1.1) <a name='1.1'></a> **Primitives**: When you access a primitive type you work directly on its value.
+ `string`
+ `number`
@@ -63,7 +63,7 @@
console.log(foo, bar); // => 1, 9
```
- [1.2](#1.2) <a id='1.2'></a> **Complex**: When you access a complex type you work on a reference to its value.
- [1.2](#1.2) <a name='1.2'></a> **Complex**: When you access a complex type you work on a reference to its value.
+ `object`
+ `array`
@@ -82,7 +82,7 @@
## References
- [2.1](#2.1) <a id='2.1'></a> Use `const` for all of your references; avoid using `var`.
- [2.1](#2.1) <a name='2.1'></a> Use `const` for all of your references; avoid using `var`.
> Why? This ensures that you can't reassign your references (mutation), which can lead to bugs and difficult to comprehend code.
@@ -96,7 +96,7 @@
const b = 2;
```
- [2.2](#2.2) <a id='2.2'></a> If you must mutate references, use `let` instead of `var`.
- [2.2](#2.2) <a name='2.2'></a> If you must mutate references, use `let` instead of `var`.
> Why? `let` is block-scoped rather than function-scoped like `var`.
@@ -114,7 +114,7 @@
}
```
- [2.3](#2.3) <a id='2.3'></a> Note that both `let` and `const` are block-scoped.
- [2.3](#2.3) <a name='2.3'></a> Note that both `let` and `const` are block-scoped.
```javascript
// const and let only exist in the blocks they are defined in.
@@ -130,7 +130,7 @@
## Objects
- [3.1](#3.1) <a id='3.1'></a> Use the literal syntax for object creation.
- [3.1](#3.1) <a name='3.1'></a> Use the literal syntax for object creation.
```javascript
// bad
@@ -140,7 +140,7 @@
const item = {};
```
- [3.2](#3.2) <a id='3.2'></a> Don't use [reserved words](http://es5.github.io/#x7.6.1) as keys. It won't work in IE8. [More info](https://github.com/airbnb/javascript/issues/61).
- [3.2](#3.2) <a name='3.2'></a> Don't use [reserved words](http://es5.github.io/#x7.6.1) as keys. It won't work in IE8. [More info](https://github.com/airbnb/javascript/issues/61).
```javascript
// bad
@@ -156,7 +156,7 @@
};
```
- [3.3](#3.3) <a id='3.3'></a> Use readable synonyms in place of reserved words.
- [3.3](#3.3) <a name='3.3'></a> Use readable synonyms in place of reserved words.
```javascript
// bad
@@ -176,7 +176,7 @@
```
<a name="es6-computed-properties"></a>
- [3.4](#3.4) <a id='3.4'></a> Use computed property names when creating objects with dynamic property names.
- [3.4](#3.4) <a name='3.4'></a> Use computed property names when creating objects with dynamic property names.
> Why? They allow you to define all the properties of an object in one place.
@@ -202,7 +202,7 @@
```
<a name="es6-object-shorthand"></a>
- [3.5](#3.5) <a id='3.5'></a> Use object method shorthand.
- [3.5](#3.5) <a name='3.5'></a> Use object method shorthand.
```javascript
// bad
@@ -225,7 +225,7 @@
```
<a name="es6-object-concise"></a>
- [3.6](#3.6) <a id='3.6'></a> Use property value shorthand.
- [3.6](#3.6) <a name='3.6'></a> Use property value shorthand.
> Why? It is shorter to write and descriptive.
@@ -243,7 +243,7 @@
};
```
- [3.7](#3.7) <a id='3.7'></a> Group your shorthand properties at the beginning of your object declaration.
- [3.7](#3.7) <a name='3.7'></a> Group your shorthand properties at the beginning of your object declaration.
> Why? It's easier to tell which properties are using the shorthand.
@@ -276,7 +276,7 @@
## Arrays
- [4.1](#4.1) <a id='4.1'></a> Use the literal syntax for array creation.
- [4.1](#4.1) <a name='4.1'></a> Use the literal syntax for array creation.
```javascript
// bad
@@ -286,7 +286,7 @@
const items = [];
```
- [4.2](#4.2) <a id='4.2'></a> Use Array#push instead of direct assignment to add items to an array.
- [4.2](#4.2) <a name='4.2'></a> Use Array#push instead of direct assignment to add items to an array.
```javascript
const someStack = [];
@@ -300,7 +300,7 @@
```
<a name="es6-array-spreads"></a>
- [4.3](#4.3) <a id='4.3'></a> Use array spreads `...` to copy arrays.
- [4.3](#4.3) <a name='4.3'></a> Use array spreads `...` to copy arrays.
```javascript
// bad
@@ -315,7 +315,7 @@
// good
const itemsCopy = [...items];
```
- [4.4](#4.4) <a id='4.4'></a> To convert an array-like object to an array, use Array#from.
- [4.4](#4.4) <a name='4.4'></a> To convert an array-like object to an array, use Array#from.
```javascript
const foo = document.querySelectorAll('.foo');
@@ -326,7 +326,7 @@
## Destructuring
- [5.1](#5.1) <a id='5.1'></a> Use object destructuring when accessing and using multiple properties of an object.
- [5.1](#5.1) <a name='5.1'></a> Use object destructuring when accessing and using multiple properties of an object.
> Why? Destructuring saves you from creating temporary references for those properties.
@@ -351,7 +351,7 @@
}
```
- [5.2](#5.2) <a id='5.2'></a> Use array destructuring.
- [5.2](#5.2) <a name='5.2'></a> Use array destructuring.
```javascript
const arr = [1, 2, 3, 4];
@@ -364,7 +364,7 @@
const [first, second] = arr;
```
- [5.3](#5.3) <a id='5.3'></a> Use object destructuring for multiple return values, not array destructuring.
- [5.3](#5.3) <a name='5.3'></a> Use object destructuring for multiple return values, not array destructuring.
> Why? You can add new properties over time or change the order of things without breaking call sites.
@@ -393,7 +393,7 @@
## Strings
- [6.1](#6.1) <a id='6.1'></a> Use single quotes `''` for strings.
- [6.1](#6.1) <a name='6.1'></a> Use single quotes `''` for strings.
```javascript
// bad
@@ -403,8 +403,8 @@
const name = 'Capt. Janeway';
```
- [6.2](#6.2) <a id='6.2'></a> Strings longer than 80 characters should be written across multiple lines using string concatenation.
- [6.3](#6.3) <a id='6.3'></a> Note: If overused, long strings with concatenation could impact performance. [jsPerf](http://jsperf.com/ya-string-concat) & [Discussion](https://github.com/airbnb/javascript/issues/40).
- [6.2](#6.2) <a name='6.2'></a> Strings longer than 80 characters should be written across multiple lines using string concatenation.
- [6.3](#6.3) <a name='6.3'></a> Note: If overused, long strings with concatenation could impact performance. [jsPerf](http://jsperf.com/ya-string-concat) & [Discussion](https://github.com/airbnb/javascript/issues/40).
```javascript
// bad
@@ -423,7 +423,7 @@
```
<a name="es6-template-literals"></a>
- [6.4](#6.4) <a id='6.4'></a> When programmatically building up strings, use template strings instead of concatenation.
- [6.4](#6.4) <a name='6.4'></a> When programmatically building up strings, use template strings instead of concatenation.
> Why? Template strings give you a readable, concise syntax with proper newlines and string interpolation features.
@@ -449,7 +449,7 @@
## Functions
- [7.1](#7.1) <a id='7.1'></a> Use function declarations instead of function expressions.
- [7.1](#7.1) <a name='7.1'></a> Use function declarations instead of function expressions.
> Why? Function declarations are named, so they're easier to identify in call stacks. Also, the whole body of a function declaration is hoisted, whereas only the reference of a function expression is hoisted. This rule makes it possible to always use [Arrow Functions](#arrow-functions) in place of function expressions.
@@ -463,7 +463,7 @@
}
```
- [7.2](#7.2) <a id='7.2'></a> Function expressions:
- [7.2](#7.2) <a name='7.2'></a> Function expressions:
```javascript
// immediately-invoked function expression (IIFE)
@@ -472,8 +472,8 @@
})();
```
- [7.3](#7.3) <a id='7.3'></a> 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.
- [7.4](#7.4) <a id='7.4'></a> **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).
- [7.3](#7.3) <a name='7.3'></a> 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.
- [7.4](#7.4) <a name='7.4'></a> **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).
```javascript
// bad
@@ -492,7 +492,7 @@
}
```
- [7.5](#7.5) <a id='7.5'></a> Never name a parameter `arguments`. This will take precedence over the `arguments` object that is given to every function scope.
- [7.5](#7.5) <a name='7.5'></a> Never name a parameter `arguments`. This will take precedence over the `arguments` object that is given to every function scope.
```javascript
// bad
@@ -507,7 +507,7 @@
```
<a name="es6-rest"></a>
- [7.6](#7.6) <a id='7.6'></a> Never use `arguments`, opt to use rest syntax `...` instead.
- [7.6](#7.6) <a name='7.6'></a> Never use `arguments`, opt to use rest syntax `...` instead.
> Why? `...` is explicit about which arguments you want pulled. Plus rest arguments are a real Array and not Array-like like `arguments`.
@@ -525,7 +525,7 @@
```
<a name="es6-default-parameters"></a>
- [7.7](#7.7) <a id='7.7'></a> Use default parameter syntax rather than mutating function arguments.
- [7.7](#7.7) <a name='7.7'></a> Use default parameter syntax rather than mutating function arguments.
```javascript
// really bad
@@ -551,7 +551,7 @@
}
```
- [7.8](#7.8) <a id='7.8'></a> Avoid side effects with default parameters
- [7.8](#7.8) <a name='7.8'></a> Avoid side effects with default parameters
> Why? They are confusing to reason about.
@@ -572,7 +572,7 @@
## Arrow Functions
- [8.1](#8.1) <a id='8.1'></a> When you must use function expressions (as when passing an anonymous function), use arrow function notation.
- [8.1](#8.1) <a name='8.1'></a> When you must use function expressions (as when passing an anonymous function), use arrow function notation.
> Why? It creates a version of the function that executes in the context of `this`, which is usually what you want, and is a more concise syntax.
@@ -590,7 +590,7 @@
});
```
- [8.2](#8.2) <a id='8.2'></a> If the function body fits on one line, feel free to omit the braces and use implicit return. Otherwise, add the braces and use a `return` statement.
- [8.2](#8.2) <a name='8.2'></a> If the function body fits on one line, feel free to omit the braces and use implicit return. Otherwise, add the braces and use a `return` statement.
> Why? Syntactic sugar. It reads well when multiple functions are chained together.
@@ -606,7 +606,7 @@
});
```
- [8.3](#8.3) <a id='8.3'></a> Always use parentheses around the arguments. Omitting the parentheses makes the functions less readable and only works for single arguments.
- [8.3](#8.3) <a name='8.3'></a> Always use parentheses around the arguments. Omitting the parentheses makes the functions less readable and only works for single arguments.
> Why? These declarations read better with parentheses. They are also required when you have multiple parameters so this enforces consistency.
@@ -623,7 +623,7 @@
## Constructors
- [9.1](#9.1) <a id='9.1'></a> Always use `class`. Avoid manipulating `prototype` directly.
- [9.1](#9.1) <a name='9.1'></a> Always use `class`. Avoid manipulating `prototype` directly.
> Why? `class` syntax is more concise and easier to reason about.
@@ -652,7 +652,7 @@
}
```
- [9.2](#9.2) <a id='9.2'></a> Use `extends` for inheritance.
- [9.2](#9.2) <a name='9.2'></a> Use `extends` for inheritance.
> Why? It is a built-in way to inherit prototype functionality without breaking `instanceof`.
@@ -675,7 +675,7 @@
}
```
- [9.3](#9.3) <a id='9.3'></a> Methods can return `this` to help with method chaining.
- [9.3](#9.3) <a name='9.3'></a> Methods can return `this` to help with method chaining.
```javascript
// bad
@@ -712,7 +712,7 @@
```
- [9.4](#9.4) <a id='9.4'></a> It's okay to write a custom toString() method, just make sure it works successfully and causes no side effects.
- [9.4](#9.4) <a name='9.4'></a> It's okay to write a custom toString() method, just make sure it works successfully and causes no side effects.
```javascript
class Jedi {
@@ -735,7 +735,7 @@
## Modules
- [10.1](#10.1) <a id='10.1'></a> Always use modules (`import`/`export`) over a non-standard module system. You can always transpile to your preferred module system.
- [10.1](#10.1) <a name='10.1'></a> Always use modules (`import`/`export`) over a non-standard module system. You can always transpile to your preferred module system.
> Why? Modules are the future, let's start using the future now.
@@ -753,7 +753,7 @@
export default es6;
```
- [10.2](#10.2) <a id='10.2'></a> Do not use wildcard imports.
- [10.2](#10.2) <a name='10.2'></a> Do not use wildcard imports.
> Why? This makes sure you have a single default export.
@@ -765,7 +765,7 @@
import AirbnbStyleGuide from './AirbnbStyleGuide';
```
- [10.3](#10.3) <a id='10.3'></a>And do not export directly from an import.
- [10.3](#10.3) <a name='10.3'></a>And do not export directly from an import.
> Why? Although the one-liner is concise, having one clear way to import and one clear way to export makes things consistent.
@@ -784,7 +784,7 @@
## Iterators and Generators
- [11.1](#11.1) <a id='11.1'></a> Don't use iterators. Prefer JavaScript's higher-order functions like `map()` and `reduce()` instead of loops like `for-of`.
- [11.1](#11.1) <a name='11.1'></a> Don't use iterators. Prefer JavaScript's higher-order functions like `map()` and `reduce()` instead of loops like `for-of`.
> Why? This enforces our immutable rule. Dealing with pure functions that return values is easier to reason about than side-effects.
@@ -809,7 +809,7 @@
sum === 15;
```
- [11.2](#11.2) <a id='11.2'></a> Don't use generators for now.
- [11.2](#11.2) <a name='11.2'></a> Don't use generators for now.
> Why? They don't transpile well to ES5.
@@ -818,7 +818,7 @@
## Properties
- [12.1](#12.1) <a id='12.1'></a> Use dot notation when accessing properties.
- [12.1](#12.1) <a name='12.1'></a> Use dot notation when accessing properties.
```javascript
const luke = {
@@ -833,7 +833,7 @@
const isJedi = luke.jedi;
```
- [12.2](#12.2) <a id='12.2'></a> Use subscript notation `[]` when accessing properties with a variable.
- [12.2](#12.2) <a name='12.2'></a> Use subscript notation `[]` when accessing properties with a variable.
```javascript
const luke = {
@@ -853,7 +853,7 @@
## Variables
- [13.1](#13.1) <a id='13.1'></a> Always use `const` to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that.
- [13.1](#13.1) <a name='13.1'></a> Always use `const` to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that.
```javascript
// bad
@@ -863,7 +863,7 @@
const superPower = new SuperPower();
```
- [13.2](#13.2) <a id='13.2'></a> Use one `const` declaration per variable.
- [13.2](#13.2) <a name='13.2'></a> Use one `const` declaration per variable.
> Why? It's easier to add new variable declarations this way, and you never have to worry about swapping out a `;` for a `,` or introducing punctuation-only diffs.
@@ -885,7 +885,7 @@
const dragonball = 'z';
```
- [13.3](#13.3) <a id='13.3'></a> Group all your `const`s and then group all your `let`s.
- [13.3](#13.3) <a name='13.3'></a> Group all your `const`s and then group all your `let`s.
> Why? This is helpful when later on you might need to assign a variable depending on one of the previous assigned variables.
@@ -910,7 +910,7 @@
let length;
```
- [13.4](#13.4) <a id='13.4'></a> Assign variables where you need them, but place them in a reasonable place.
- [13.4](#13.4) <a name='13.4'></a> Assign variables where you need them, but place them in a reasonable place.
> Why? `let` and `const` are block scoped and not function scoped.
@@ -962,7 +962,7 @@
## Hoisting
- [14.1](#14.1) <a id='14.1'></a> `var` declarations get hoisted to the top of their scope, their assignment does not. `const` and `let` declarations are blessed with a new concept called [Temporal Dead Zones (TDZ)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let). It's important to know why [typeof is no longer safe](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15).
- [14.1](#14.1) <a name='14.1'></a> `var` declarations get hoisted to the top of their scope, their assignment does not. `const` and `let` declarations are blessed with a new concept called [Temporal Dead Zones (TDZ)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let). It's important to know why [typeof is no longer safe](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15).
```javascript
// we know this wouldn't work (assuming there
@@ -997,7 +997,7 @@
}
```
- [14.2](#14.2) <a id='14.2'></a> Anonymous function expressions hoist their variable name, but not the function assignment.
- [14.2](#14.2) <a name='14.2'></a> Anonymous function expressions hoist their variable name, but not the function assignment.
```javascript
function example() {
@@ -1011,7 +1011,7 @@
}
```
- [14.3](#14.3) <a id='14.3'></a> Named function expressions hoist the variable name, not the function name or the function body.
- [14.3](#14.3) <a name='14.3'></a> Named function expressions hoist the variable name, not the function name or the function body.
```javascript
function example() {
@@ -1039,7 +1039,7 @@
}
```
- [14.4](#14.4) <a id='14.4'></a> Function declarations hoist their name and the function body.
- [14.4](#14.4) <a name='14.4'></a> Function declarations hoist their name and the function body.
```javascript
function example() {
@@ -1058,8 +1058,8 @@
## Comparison Operators & Equality
- [15.1](#15.1) <a id='15.1'></a> Use `===` and `!==` over `==` and `!=`.
- [15.2](#15.2) <a id='15.2'></a> Conditional statements such as the `if` statement evaulate their expression using coercion with the `ToBoolean` abstract method and always follow these simple rules:
- [15.1](#15.1) <a name='15.1'></a> Use `===` and `!==` over `==` and `!=`.
- [15.2](#15.2) <a name='15.2'></a> Conditional statements such as the `if` statement evaulate their expression using coercion with the `ToBoolean` abstract method and always follow these simple rules:
+ **Objects** evaluate to **true**
+ **Undefined** evaluates to **false**
@@ -1075,7 +1075,7 @@
}
```
- [15.3](#15.3) <a id='15.3'></a> Use shortcuts.
- [15.3](#15.3) <a name='15.3'></a> Use shortcuts.
```javascript
// bad
@@ -1099,14 +1099,14 @@
}
```
- [15.4](#15.4) <a id='15.4'></a> For more information see [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) by Angus Croll.
- [15.4](#15.4) <a name='15.4'></a> For more information see [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) by Angus Croll.
**[⬆ back to top](#table-of-contents)**
## Blocks
- [16.1](#16.1) <a id='16.1'></a> Use braces with all multi-line blocks.
- [16.1](#16.1) <a name='16.1'></a> Use braces with all multi-line blocks.
```javascript
// bad
@@ -1130,7 +1130,7 @@
}
```
- [16.2](#16.2) <a id='16.2'></a> If you're using multi-line blocks with `if` and `else`, put `else` on the same line as your
- [16.2](#16.2) <a name='16.2'></a> If you're using multi-line blocks with `if` and `else`, put `else` on the same line as your
`if` block's closing brace.
```javascript
@@ -1158,7 +1158,7 @@
## Comments
- [17.1](#17.1) <a id='17.1'></a> Use `/** ... */` for multi-line comments. Include a description, specify types and values for all parameters and return values.
- [17.1](#17.1) <a name='17.1'></a> Use `/** ... */` for multi-line comments. Include a description, specify types and values for all parameters and return values.
```javascript
// bad
@@ -1190,7 +1190,7 @@
}
```
- [17.2](#17.2) <a id='17.2'></a> 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.
- [17.2](#17.2) <a name='17.2'></a> 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.
```javascript
// bad
@@ -1220,9 +1220,9 @@
}
```
- [17.3](#17.3) <a id='17.3'></a> 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`.
- [17.3](#17.3) <a name='17.3'></a> 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`.
- [17.4](#17.4) <a id='17.4'></a> Use `// FIXME:` to annotate problems.
- [17.4](#17.4) <a name='17.4'></a> Use `// FIXME:` to annotate problems.
```javascript
class Calculator {
@@ -1233,7 +1233,7 @@
}
```
- [17.5](#17.5) <a id='17.5'></a> Use `// TODO:` to annotate solutions to problems.
- [17.5](#17.5) <a name='17.5'></a> Use `// TODO:` to annotate solutions to problems.
```javascript
class Calculator {
@@ -1249,7 +1249,7 @@
## Whitespace
- [18.1](#18.1) <a id='18.1'></a> Use soft tabs set to 2 spaces.
- [18.1](#18.1) <a name='18.1'></a> Use soft tabs set to 2 spaces.
```javascript
// bad
@@ -1268,7 +1268,7 @@
}
```
- [18.2](#18.2) <a id='18.2'></a> Place 1 space before the leading brace.
- [18.2](#18.2) <a name='18.2'></a> Place 1 space before the leading brace.
```javascript
// bad
@@ -1294,7 +1294,7 @@
});
```
- [18.3](#18.3) <a id='18.3'></a> Place 1 space before the opening parenthesis in control statements (`if`, `while` etc.). Place no space before the argument list in function calls and declarations.
- [18.3](#18.3) <a name='18.3'></a> Place 1 space before the opening parenthesis in control statements (`if`, `while` etc.). Place no space before the argument list in function calls and declarations.
```javascript
// bad
@@ -1318,7 +1318,7 @@
}
```
- [18.4](#18.4) <a id='18.4'></a> Set off operators with spaces.
- [18.4](#18.4) <a name='18.4'></a> Set off operators with spaces.
```javascript
// bad
@@ -1328,7 +1328,7 @@
const x = y + 5;
```
- [18.5](#18.5) <a id='18.5'></a> End files with a single newline character.
- [18.5](#18.5) <a name='18.5'></a> End files with a single newline character.
```javascript
// bad
@@ -1352,7 +1352,7 @@
})(this);↵
```
- [18.5](#18.5) <a id='18.5'></a> Use indentation when making long method chains. Use a leading dot, which
- [18.5](#18.5) <a name='18.5'></a> Use indentation when making long method chains. Use a leading dot, which
emphasizes that the line is a method call, not a new statement.
```javascript
@@ -1392,7 +1392,7 @@
.call(tron.led);
```
- [18.6](#18.6) <a id='18.6'></a> Leave a blank line after blocks and before the next statement
- [18.6](#18.6) <a name='18.6'></a> Leave a blank line after blocks and before the next statement
```javascript
// bad
@@ -1434,7 +1434,7 @@
## Commas
- [19.1](#19.1) <a id='19.1'></a> Leading commas: **Nope.**
- [19.1](#19.1) <a name='19.1'></a> Leading commas: **Nope.**
```javascript
// bad
@@ -1468,7 +1468,7 @@
};
```
- [19.2](#19.2) <a id='19.2'></a> Additional trailing comma: **Yup.**
- [19.2](#19.2) <a name='19.2'></a> Additional trailing comma: **Yup.**
> 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](es5/README.md#commas) in legacy browsers.
@@ -1516,7 +1516,7 @@
## Semicolons
- [20.1](#20.1) <a id='20.1'></a> **Yup.**
- [20.1](#20.1) <a name='20.1'></a> **Yup.**
```javascript
// bad
@@ -1545,8 +1545,8 @@
## Type Casting & Coercion
- [21.1](#21.1) <a id='21.1'></a> Perform type coercion at the beginning of the statement.
- [21.2](#21.2) <a id='21.2'></a> Strings:
- [21.1](#21.1) <a name='21.1'></a> Perform type coercion at the beginning of the statement.
- [21.2](#21.2) <a name='21.2'></a> Strings:
```javascript
// => this.reviewScore = 9;
@@ -1558,7 +1558,7 @@
const totalScore = String(this.reviewScore);
```
- [21.3](#21.3) <a id='21.3'></a> Use `parseInt` for Numbers and always with a radix for type casting.
- [21.3](#21.3) <a name='21.3'></a> Use `parseInt` for Numbers and always with a radix for type casting.
```javascript
const inputValue = '4';
@@ -1582,7 +1582,7 @@
const val = parseInt(inputValue, 10);
```
- [21.4](#21.4) <a id='21.4'></a> If for whatever reason you are doing something wild and `parseInt` is your bottleneck and need to use Bitshift for [performance reasons](http://jsperf.com/coercion-vs-casting/3), leave a comment explaining why and what you're doing.
- [21.4](#21.4) <a name='21.4'></a> If for whatever reason you are doing something wild and `parseInt` is your bottleneck and need to use Bitshift for [performance reasons](http://jsperf.com/coercion-vs-casting/3), leave a comment explaining why and what you're doing.
```javascript
// good
@@ -1594,7 +1594,7 @@
const val = inputValue >> 0;
```
- [21.5](#21.5) <a id='21.5'></a> **Note:** Be careful when using bitshift operations. Numbers are represented as [64-bit values](http://es5.github.io/#x4.3.19), but Bitshift operations always return a 32-bit integer ([source](http://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:
- [21.5](#21.5) <a name='21.5'></a> **Note:** Be careful when using bitshift operations. Numbers are represented as [64-bit values](http://es5.github.io/#x4.3.19), but Bitshift operations always return a 32-bit integer ([source](http://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
@@ -1602,7 +1602,7 @@
2147483649 >> 0 //=> -2147483647
```
- [21.6](#21.6) <a id='21.6'></a> Booleans:
- [21.6](#21.6) <a name='21.6'></a> Booleans:
```javascript
const age = 0;
@@ -1622,7 +1622,7 @@
## Naming Conventions
- [22.1](#22.1) <a id='22.1'></a> Avoid single letter names. Be descriptive with your naming.
- [22.1](#22.1) <a name='22.1'></a> Avoid single letter names. Be descriptive with your naming.
```javascript
// bad
@@ -1636,7 +1636,7 @@
}
```
- [22.2](#22.2) <a id='22.2'></a> Use camelCase when naming objects, functions, and instances.
- [22.2](#22.2) <a name='22.2'></a> Use camelCase when naming objects, functions, and instances.
```javascript
// bad
@@ -1649,7 +1649,7 @@
function thisIsMyFunction() {}
```
- [22.3](#22.3) <a id='22.3'></a> Use PascalCase when naming constructors or classes.
- [22.3](#22.3) <a name='22.3'></a> Use PascalCase when naming constructors or classes.
```javascript
// bad
@@ -1673,7 +1673,7 @@
});
```
- [22.4](#22.4) <a id='22.4'></a> Use a leading underscore `_` when naming private properties.
- [22.4](#22.4) <a name='22.4'></a> Use a leading underscore `_` when naming private properties.
```javascript
// bad
@@ -1684,7 +1684,7 @@
this._firstName = 'Panda';
```
- [22.5](#22.5) <a id='22.5'></a> Don't save references to `this`. Use arrow functions or Function#bind.
- [22.5](#22.5) <a name='22.5'></a> Don't save references to `this`. Use arrow functions or Function#bind.
```javascript
// bad
@@ -1711,7 +1711,7 @@
}
```
- [22.6](#22.6) <a id='22.6'></a> If your file exports a single class, your filename should be exactly the name of the class.
- [22.6](#22.6) <a name='22.6'></a> If your file exports a single class, your filename should be exactly the name of the class.
```javascript
// file contents
class CheckBox {
@@ -1730,7 +1730,7 @@
import CheckBox from './CheckBox';
```
- [22.7](#22.7) <a id='22.7'></a> Use camelCase when you export-default a function. Your filename should be identical to your function's name.
- [22.7](#22.7) <a name='22.7'></a> Use camelCase when you export-default a function. Your filename should be identical to your function's name.
```javascript
function makeStyleGuide() {
@@ -1739,7 +1739,7 @@
export default makeStyleGuide;
```
- [22.8](#22.8) <a id='22.8'></a> Use PascalCase when you export a singleton / function library / bare object.
- [22.8](#22.8) <a name='22.8'></a> Use PascalCase when you export a singleton / function library / bare object.
```javascript
const AirbnbStyleGuide = {
@@ -1756,8 +1756,8 @@
## Accessors
- [23.1](#23.1) <a id='23.1'></a> Accessor functions for properties are not required.
- [23.2](#23.2) <a id='23.2'></a> If you do make accessor functions use getVal() and setVal('hello').
- [23.1](#23.1) <a name='23.1'></a> Accessor functions for properties are not required.
- [23.2](#23.2) <a name='23.2'></a> If you do make accessor functions use getVal() and setVal('hello').
```javascript
// bad
@@ -1773,7 +1773,7 @@
dragon.setAge(25);
```
- [23.3](#23.3) <a id='23.3'></a> If the property is a boolean, use isVal() or hasVal().
- [23.3](#23.3) <a name='23.3'></a> If the property is a boolean, use isVal() or hasVal().
```javascript
// bad
@@ -1787,7 +1787,7 @@
}
```
- [23.4](#23.4) <a id='23.4'></a> It's okay to create get() and set() functions, but be consistent.
- [23.4](#23.4) <a name='23.4'></a> It's okay to create get() and set() functions, but be consistent.
```javascript
class Jedi {
@@ -1811,7 +1811,7 @@
## Events
- [24.1](#24.1) <a id='24.1'></a> 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:
- [24.1](#24.1) <a name='24.1'></a> 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
@@ -1842,7 +1842,7 @@
## jQuery
- [25.1](#25.1) <a id='25.1'></a> Prefix jQuery object variables with a `$`.
- [25.1](#25.1) <a name='25.1'></a> Prefix jQuery object variables with a `$`.
```javascript
// bad
@@ -1852,7 +1852,7 @@
const $sidebar = $('.sidebar');
```
- [25.2](#25.2) <a id='25.2'></a> Cache jQuery lookups.
- [25.2](#25.2) <a name='25.2'></a> Cache jQuery lookups.
```javascript
// bad
@@ -1879,8 +1879,8 @@
}
```
- [25.3](#25.3) <a id='25.3'></a> For DOM queries use Cascading `$('.sidebar ul')` or parent > child `$('.sidebar > ul')`. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16)
- [25.4](#25.4) <a id='25.4'></a> Use `find` with scoped jQuery object queries.
- [25.3](#25.3) <a name='25.3'></a> For DOM queries use Cascading `$('.sidebar ul')` or parent > child `$('.sidebar > ul')`. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16)
- [25.4](#25.4) <a name='25.4'></a> Use `find` with scoped jQuery object queries.
```javascript
// bad
@@ -1904,13 +1904,13 @@
## ECMAScript 5 Compatibility
- [26.1](#26.1) <a id='26.1'></a> Refer to [Kangax](https://twitter.com/kangax/)'s ES5 [compatibility table](http://kangax.github.com/es5-compat-table/).
- [26.1](#26.1) <a name='26.1'></a> Refer to [Kangax](https://twitter.com/kangax/)'s ES5 [compatibility table](http://kangax.github.com/es5-compat-table/).
**[⬆ back to top](#table-of-contents)**
## ECMAScript 6 Styles
[27.1](#27.1) <a id='27.1'></a> This is a collection of links to the various es6 features.
[27.1](#27.1) <a name='27.1'></a> This is a collection of links to the various es6 features.
1. [Arrow Functions](#arrow-functions)
1. [Classes](#constructors)
@@ -1930,7 +1930,7 @@
## Testing
- [28.1](#28.1) <a id='28.1'></a> **Yup.**
- [28.1](#28.1) <a name='28.1'></a> **Yup.**
```javascript
function() {