|
83 | 83 | var item ={}; |
84 | 84 | ``` |
85 | 85 |
|
86 | | -- Don't use [reserved words](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Reserved_Words) as keys. |
| 86 | +- Don't use [reserved words](http://es5.github.io/#x7.6.1) as keys. It won't work inIE8. [More info](https://github.com/airbnb/javascript/issues/61) |
87 | 87 |
|
88 | 88 | ```javascript |
89 | 89 | // bad |
90 | 90 | var superman ={ |
91 | | - class: 'superhero', |
92 | 91 | default:{clark: 'kent'}, |
93 | 92 | private: true |
94 | 93 | }; |
95 | 94 |
|
96 | 95 | // good |
97 | 96 | var superman ={ |
98 | | - klass: 'superhero', |
99 | 97 | defaults:{clark: 'kent'}, |
100 | 98 | hidden: true |
101 | 99 | }; |
102 | 100 | ``` |
| 101 | + |
| 102 | +- Use readable synonyms in place of reserved words. |
| 103 | + |
| 104 | +```javascript |
| 105 | + // bad |
| 106 | + var superman ={ |
| 107 | + class: 'alien' |
| 108 | + }; |
| 109 | +
|
| 110 | + // bad |
| 111 | + var superman ={ |
| 112 | + klass: 'alien' |
| 113 | + }; |
| 114 | +
|
| 115 | + // good |
| 116 | + var superman ={ |
| 117 | + type: 'alien' |
| 118 | + }; |
| 119 | +``` |
103 | 120 | **[[⬆]](#TOC)** |
104 | 121 |
|
105 | 122 | ## <a name='arrays'>Arrays</a> |
|
203 | 220 | ```javascript |
204 | 221 | var items, |
205 | 222 | messages, |
206 | | - length, i; |
| 223 | + length, |
| 224 | + i; |
207 | 225 |
|
208 | 226 | messages = [{ |
209 | 227 | state: 'success', |
|
503 | 521 | varnamed=functionsuperPower(){ |
504 | 522 | console.log('Flying'); |
505 | 523 | }; |
| 524 | + } |
506 | 525 |
|
| 526 | +// the same is true when the function name |
| 527 | +// is the same as the variable name. |
| 528 | +functionexample(){ |
| 529 | +console.log(named); // => undefined |
507 | 530 |
|
508 | | -// the same is true when the function name |
509 | | -// is the same as the variable name. |
510 | | -functionexample(){ |
511 | | -console.log(named); // => undefined |
512 | | - |
513 | | -named(); // => TypeError named is not a function |
| 531 | +named(); // => TypeError named is not a function |
514 | 532 |
|
515 | | -varnamed=functionnamed(){ |
516 | | -console.log('named'); |
517 | | - }; |
| 533 | +varnamed=functionnamed(){ |
| 534 | +console.log('named'); |
518 | 535 | } |
519 | 536 | } |
520 | 537 | ``` |
|
648 | 665 | } |
649 | 666 | ``` |
650 | 667 |
|
651 | | - - Use `//` for single line comments. Place single line comments on a newline above the subject of the comment. Put an emptyline before the comment. |
| 668 | + - 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. |
652 | 669 |
|
653 | 670 | ```javascript |
654 | 671 | // bad |
|
914 | 931 | ``` |
915 | 932 |
|
916 | 933 | - Use `parseInt` for Numbers and always with a radix for type casting. |
917 | | - - 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. |
918 | 934 |
|
919 | 935 | ```javascript |
920 | 936 | var inputValue = '4'; |
|
936 | 952 |
|
937 | 953 | // good |
938 | 954 | var val = parseInt(inputValue, 10); |
| 955 | + ``` |
| 956 | +
|
| 957 | + - 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. |
939 | 958 |
|
| 959 | +```javascript |
940 | 960 | // good |
941 | 961 | /** |
942 | 962 | * parseInt was the reason my code was slow. |
|
1250 | 1270 |
|
1251 | 1271 | ## <a name='modules'>Modules</a> |
1252 | 1272 |
|
1253 | | - - 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. |
| 1273 | + - 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) |
1254 | 1274 | - The file should be named with camelCase, live in a folder with the same name, and match the name of the single export. |
1255 | 1275 | - Add a method called noConflict() that sets the exported module to the previous version and returns this one. |
1256 | 1276 | - Always declare `'use strict'` at the top of the module. |
|
1323 | 1343 |
|
1324 | 1344 | ```javascript |
1325 | 1345 | // bad |
1326 | | - $('.sidebar', 'ul').hide(); |
| 1346 | + $('ul', '.sidebar').hide(); |
1327 | 1347 |
|
1328 | 1348 | // bad |
1329 | 1349 | $('.sidebar').find('ul').hide(); |
|
1334 | 1354 | // good |
1335 | 1355 | $('.sidebar > ul').hide(); |
1336 | 1356 |
|
1337 | | - // good (slower) |
| 1357 | + // good |
1338 | 1358 | $sidebar.find('ul'); |
1339 | | -
|
1340 | | - // good (faster) |
1341 | | - $($sidebar[0]).find('ul'); |
1342 | 1359 | ``` |
1343 | 1360 |
|
1344 | 1361 | **[[⬆]](#TOC)** |
|
1399 | 1416 | **Further Reading** |
1400 | 1417 |
|
1401 | 1418 | - [Understanding JavaScript Closures](http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/) - Angus Croll |
| 1419 | +- [Basic JavaScript for the impatient programmer](http://www.2ality.com/2013/06/basic-javascript.html) - Dr. Axel Rauschmayer |
1402 | 1420 |
|
1403 | 1421 | **Books** |
1404 | 1422 |
|
|
1410 | 1428 | - [JavaScript Web Applications](http://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X) - Alex MacCaw |
1411 | 1429 | - [Pro JavaScript Techniques](http://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273) - John Resig |
1412 | 1430 | - [Smashing Node.js: JavaScript Everywhere](http://www.amazon.com/Smashing-Node-js-JavaScript-Everywhere-Magazine/dp/1119962595) - Guillermo Rauch |
| 1431 | +- [Secrets of the JavaScript Ninja](http://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X) - John Resig and Bear Bibeault |
| 1432 | +- [Human JavaScript](http://humanjavascript.com/) - Henrik Joreteg |
| 1433 | +- [Superhero.js](http://superherojs.com/) - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy |
| 1434 | +- [JSBooks](http://jsbooks.revolunet.com/) |
1413 | 1435 |
|
1414 | 1436 | **Blogs** |
1415 | 1437 |
|
|
1437 | 1459 | - **ExactTarget**: [ExactTarget/javascript](https://github.com/ExactTarget/javascript) |
1438 | 1460 | - **GeneralElectric**: [GeneralElectric/javascript](https://github.com/GeneralElectric/javascript) |
1439 | 1461 | - **GoodData**: [gooddata/gdc-js-style](https://github.com/gooddata/gdc-js-style) |
| 1462 | + - **Grooveshark**: [grooveshark/javascript](https://github.com/grooveshark/javascript) |
1440 | 1463 | - **How About We**: [howaboutwe/javascript](https://github.com/howaboutwe/javascript) |
1441 | 1464 | - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript) |
1442 | 1465 | - **ModCloth**: [modcloth/javascript](https://github.com/modcloth/javascript) |
|
1456 | 1479 | - :jp: **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide) |
1457 | 1480 | - :br: **Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide) |
1458 | 1481 | - :cn: **Chinese**: [adamlu/javascript-style-guide](https://github.com/adamlu/javascript-style-guide) |
| 1482 | + - :es: **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) |
1459 | 1483 |
|
1460 | 1484 | ## <a name='guide-guide'>The JavaScript Style Guide Guide</a> |
1461 | 1485 |
|
|
0 commit comments