|
3 | 3 | *A mostly reasonable approach to JavaScript* |
4 | 4 |
|
5 | 5 |
|
6 | | -## <a name='TOC'>Table of Contents</a> |
| 6 | +## Table of Contents |
7 | 7 |
|
8 | 8 | 1. [Types](#types) |
9 | 9 | 1. [Objects](#objects) |
|
13 | 13 | 1. [Properties](#properties) |
14 | 14 | 1. [Variables](#variables) |
15 | 15 | 1. [Hoisting](#hoisting) |
16 | | - 1. [Conditional Expressions & Equality](#conditionals) |
| 16 | + 1. [Conditional Expressions & Equality](#conditional-expressions--equality) |
17 | 17 | 1. [Blocks](#blocks) |
18 | 18 | 1. [Comments](#comments) |
19 | 19 | 1. [Whitespace](#whitespace) |
20 | 20 | 1. [Commas](#commas) |
21 | 21 | 1. [Semicolons](#semicolons) |
22 | | - 1. [Type Casting & Coercion](#type-coercion) |
| 22 | + 1. [Type Casting & Coercion](#type-casting--coercion) |
23 | 23 | 1. [Naming Conventions](#naming-conventions) |
24 | 24 | 1. [Accessors](#accessors) |
25 | 25 | 1. [Constructors](#constructors) |
26 | 26 | 1. [Events](#events) |
27 | 27 | 1. [Modules](#modules) |
28 | 28 | 1. [jQuery](#jquery) |
29 | | - 1. [ES5 Compatibility](#es5) |
| 29 | + 1. [ECMAScript 5 Compatibility](#ecmascript-5-compatibility) |
30 | 30 | 1. [Testing](#testing) |
31 | 31 | 1. [Performance](#performance) |
32 | 32 | 1. [Resources](#resources) |
33 | 33 | 1. [In the Wild](#in-the-wild) |
34 | 34 | 1. [Translation](#translation) |
35 | | - 1. [The JavaScript Style Guide Guide](#guide-guide) |
| 35 | + 1. [The JavaScript Style Guide Guide](#the-javascript-style-guide-guide) |
36 | 36 | 1. [Contributors](#contributors) |
37 | 37 | 1. [License](#license) |
38 | 38 |
|
39 | | -## <a name='types'>Types</a> |
| 39 | +## Types |
40 | 40 |
|
41 | 41 | - **Primitives**: When you access a primitive type you work directly on its value |
42 | 42 |
|
|
71 | 71 |
|
72 | 72 | **[[⬆]](#TOC)** |
73 | 73 |
|
74 | | -## <a name='objects'>Objects</a> |
| 74 | +## Objects |
75 | 75 |
|
76 | 76 | - Use the literal syntax for object creation. |
77 | 77 |
|
|
119 | 119 | ``` |
120 | 120 | **[[⬆]](#TOC)** |
121 | 121 |
|
122 | | -## <a name='arrays'>Arrays</a> |
| 122 | +## Arrays |
123 | 123 |
|
124 | 124 | - Use the literal syntax for array creation |
125 | 125 |
|
|
172 | 172 | **[[⬆]](#TOC)** |
173 | 173 |
|
174 | 174 |
|
175 | | -## <a name='strings'>Strings</a> |
| 175 | +## Strings |
176 | 176 |
|
177 | 177 | - Use single quotes `''` for strings |
178 | 178 |
|
|
262 | 262 | **[[⬆]](#TOC)** |
263 | 263 |
|
264 | 264 |
|
265 | | -## <a name='functions'>Functions</a> |
| 265 | +## Functions |
266 | 266 |
|
267 | 267 | - Function expressions: |
268 | 268 |
|
|
321 | 321 |
|
322 | 322 |
|
323 | 323 |
|
324 | | -## <a name='properties'>Properties</a> |
| 324 | +## Properties |
325 | 325 |
|
326 | 326 | - Use dot notation when accessing properties. |
327 | 327 |
|
|
356 | 356 | **[[⬆]](#TOC)** |
357 | 357 |
|
358 | 358 |
|
359 | | -## <a name='variables'>Variables</a> |
| 359 | +## Variables |
360 | 360 |
|
361 | 361 | - Always use `var` 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. |
362 | 362 |
|
|
465 | 465 | **[[⬆]](#TOC)** |
466 | 466 |
|
467 | 467 |
|
468 | | -## <a name='hoisting'>Hoisting</a> |
| 468 | +## Hoisting |
469 | 469 |
|
470 | 470 | - Variable declarations get hoisted to the top of their scope, their assignment does not. |
471 | 471 |
|
|
555 | 555 |
|
556 | 556 |
|
557 | 557 |
|
558 | | -## <a name='conditionals'>Conditional Expressions & Equality</a> |
| 558 | +## Conditional Expressions & Equality |
559 | 559 |
|
560 | 560 | - Use `===` and `!==` over `==` and `!=`. |
561 | 561 | - Conditional expressions are evaluated using coercion with the `ToBoolean` method and always follow these simple rules: |
|
603 | 603 | **[[⬆]](#TOC)** |
604 | 604 |
|
605 | 605 |
|
606 | | -## <a name='blocks'>Blocks</a> |
| 606 | +## Blocks |
607 | 607 |
|
608 | 608 | - Use braces with all multi-line blocks. |
609 | 609 |
|
|
632 | 632 | **[[⬆]](#TOC)** |
633 | 633 |
|
634 | 634 |
|
635 | | -## <a name='comments'>Comments</a> |
| 635 | +## Comments |
636 | 636 |
|
637 | 637 | - Use `/** ... */` for multiline comments. Include a description, specify types and values for all parameters and return values. |
638 | 638 |
|
|
725 | 725 | **[[⬆]](#TOC)** |
726 | 726 |
|
727 | 727 |
|
728 | | -## <a name='whitespace'>Whitespace</a> |
| 728 | +## Whitespace |
729 | 729 |
|
730 | 730 | - Use soft tabs set to 2 spaces |
731 | 731 |
|
|
832 | 832 |
|
833 | 833 | **[[⬆]](#TOC)** |
834 | 834 |
|
835 | | -## <a name='commas'>Commas</a> |
| 835 | +## Commas |
836 | 836 |
|
837 | 837 | - Leading commas: **Nope.** |
838 | 838 |
|
|
895 | 895 | **[[⬆]](#TOC)** |
896 | 896 |
|
897 | 897 |
|
898 | | -## <a name='semicolons'>Semicolons</a> |
| 898 | +## Semicolons |
899 | 899 |
|
900 | 900 | - **Yup.** |
901 | 901 |
|
|
922 | 922 | **[[⬆]](#TOC)** |
923 | 923 |
|
924 | 924 |
|
925 | | -## <a name='type-coercion'>Type Casting & Coercion</a> |
| 925 | +## Type Casting & Coercion |
926 | 926 |
|
927 | 927 | - Perform type coercion at the beginning of the statement. |
928 | 928 | - Strings: |
|
998 | 998 | **[[⬆]](#TOC)** |
999 | 999 |
|
1000 | 1000 |
|
1001 | | -## <a name='naming-conventions'>Naming Conventions</a> |
| 1001 | +## Naming Conventions |
1002 | 1002 |
|
1003 | 1003 | - Avoid single letter names. Be descriptive with your naming. |
1004 | 1004 |
|
|
1111 | 1111 | **[[⬆]](#TOC)** |
1112 | 1112 |
|
1113 | 1113 |
|
1114 | | -## <a name='accessors'>Accessors</a> |
| 1114 | +## Accessors |
1115 | 1115 |
|
1116 | 1116 | - Accessor functions for properties are not required |
1117 | 1117 | - If you do make accessor functions use getVal() and setVal('hello') |
|
1165 | 1165 | **[[⬆]](#TOC)** |
1166 | 1166 |
|
1167 | 1167 |
|
1168 | | -## <a name='constructors'>Constructors</a> |
| 1168 | +## Constructors |
1169 | 1169 |
|
1170 | 1170 | - Assign methods to the prototype object, instead of overwriting the prototype with a new object. Overwriting the prototype makes inheritance impossible: by resetting the prototype you'll overwrite the base! |
1171 | 1171 |
|
|
1250 | 1250 | **[[⬆]](#TOC)** |
1251 | 1251 |
|
1252 | 1252 |
|
1253 | | -## <a name='events'>Events</a> |
| 1253 | +## Events |
1254 | 1254 |
|
1255 | 1255 | - 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: |
1256 | 1256 |
|
|
1281 | 1281 | **[[⬆]](#TOC)** |
1282 | 1282 |
|
1283 | 1283 |
|
1284 | | -## <a name='modules'>Modules</a> |
| 1284 | +## Modules |
1285 | 1285 |
|
1286 | 1286 | - The module should start with a `!`. This ensures that if a malformed module forgets to include a final semicolon there aren't errors in production when the scripts get concatenated. [Explanation](https://github.com/airbnb/javascript/issues/44#issuecomment-13063933) |
1287 | 1287 | - The file should be named with camelCase, live in a folder with the same name, and match the name of the single export. |
|
1312 | 1312 | **[[⬆]](#TOC)** |
1313 | 1313 |
|
1314 | 1314 |
|
1315 | | -## <a name='jquery'>jQuery</a> |
| 1315 | +## jQuery |
1316 | 1316 |
|
1317 | 1317 | - Prefix jQuery object variables with a `$`. |
1318 | 1318 |
|
|
1374 | 1374 | **[[⬆]](#TOC)** |
1375 | 1375 |
|
1376 | 1376 |
|
1377 | | -## <a name='es5'>ECMAScript 5 Compatibility</a> |
| 1377 | +## ECMAScript 5 Compatibility |
1378 | 1378 |
|
1379 | 1379 | - Refer to [Kangax](https://twitter.com/kangax/)'s ES5 [compatibility table](http://kangax.github.com/es5-compat-table/) |
1380 | 1380 |
|
1381 | 1381 | **[[⬆]](#TOC)** |
1382 | 1382 |
|
1383 | 1383 |
|
1384 | | -## <a name='testing'>Testing</a> |
| 1384 | +## Testing |
1385 | 1385 |
|
1386 | 1386 | - **Yup.** |
1387 | 1387 |
|
|
1394 | 1394 | **[[⬆]](#TOC)** |
1395 | 1395 |
|
1396 | 1396 |
|
1397 | | -## <a name='performance'>Performance</a> |
| 1397 | +## Performance |
1398 | 1398 |
|
1399 | 1399 | - [On Layout & Web Performance](http://kellegous.com/j/2013/01/26/layout-performance/) |
1400 | 1400 | - [String vs Array Concat](http://jsperf.com/string-vs-array-concat/2) |
|
1408 | 1408 | **[[⬆]](#TOC)** |
1409 | 1409 |
|
1410 | 1410 |
|
1411 | | -## <a name='resources'>Resources</a> |
| 1411 | +## Resources |
1412 | 1412 |
|
1413 | 1413 |
|
1414 | 1414 | **Read This** |
|
1466 | 1466 |
|
1467 | 1467 | **[[⬆]](#TOC)** |
1468 | 1468 |
|
1469 | | -## <a name='in-the-wild'>In the Wild</a> |
| 1469 | +## In the Wild |
1470 | 1470 |
|
1471 | 1471 | This is a list of organizations that are using this style guide. Send us a pull request or open an issue and we'll add you to the list. |
1472 | 1472 |
|
|
1495 | 1495 | - **Zillow**: [zillow/javascript](https://github.com/zillow/javascript) |
1496 | 1496 | - **ZocDoc**: [ZocDoc/javascript](https://github.com/ZocDoc/javascript) |
1497 | 1497 |
|
1498 | | -## <a name='translation'>Translation</a> |
| 1498 | +## Translation |
1499 | 1499 |
|
1500 | 1500 | This style guide is also available in other languages: |
1501 | 1501 |
|
|
1509 | 1509 | - :ru: **Russian**: [uprock/javascript](https://github.com/uprock/javascript) |
1510 | 1510 | - :bg: **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript) |
1511 | 1511 |
|
1512 | | -## <a name='guide-guide'>The JavaScript Style Guide Guide</a> |
| 1512 | +## The JavaScript Style Guide Guide |
1513 | 1513 |
|
1514 | 1514 | - [Reference](https://github.com/airbnb/javascript/wiki/The-JavaScript-Style-Guide-Guide) |
1515 | 1515 |
|
1516 | | -## <a name='authors'>Contributors</a> |
| 1516 | +## Contributors |
1517 | 1517 |
|
1518 | 1518 | - [View Contributors](https://github.com/airbnb/javascript/graphs/contributors) |
1519 | 1519 |
|
1520 | 1520 |
|
1521 | | -## <a name='license'>License</a> |
| 1521 | +## License |
1522 | 1522 |
|
1523 | 1523 | (The MIT License) |
1524 | 1524 |
|
|
0 commit comments