@@ -88,7 +88,7 @@ setTimeout(blastOff, 86400000);
88
88
89
89
** Good:**
90
90
``` javascript
91
- // Declare them as capitalized `const` globals .
91
+ // Declare them as capitalized named constants .
92
92
const MILLISECONDS_IN_A_DAY = 86400000 ;
93
93
94
94
setTimeout (blastOff, MILLISECONDS_IN_A_DAY );
@@ -192,7 +192,7 @@ function createMicrobrewery(name) {
192
192
193
193
** Good:**
194
194
``` javascript
195
- function createMicrobrewery (breweryName = ' Hipster Brew Co.' ) {
195
+ function createMicrobrewery (name = ' Hipster Brew Co.' ) {
196
196
// ...
197
197
}
198
198
@@ -295,7 +295,7 @@ function addToDate(date, month) {
295
295
296
296
const date = new Date ();
297
297
298
- // It's hard to to tell from the function name what is added
298
+ // It's hard to tell from the function name what is added
299
299
addToDate (date, 1 );
300
300
```
301
301
@@ -343,6 +343,14 @@ function parseBetterJSAlternative(code) {
343
343
344
344
** Good:**
345
345
``` javascript
346
+ function parseBetterJSAlternative (code ) {
347
+ const tokens = tokenize (code);
348
+ const ast = lexer (tokens);
349
+ ast .forEach ((node ) => {
350
+ // parse...
351
+ });
352
+ }
353
+
346
354
function tokenize (code ) {
347
355
const REGEXES = [
348
356
// ...
@@ -367,14 +375,6 @@ function lexer(tokens) {
367
375
368
376
return ast;
369
377
}
370
-
371
- function parseBetterJSAlternative (code ) {
372
- const tokens = tokenize (code);
373
- const ast = lexer (tokens);
374
- ast .forEach ((node ) => {
375
- // parse...
376
- });
377
- }
378
378
```
379
379
** [ ⬆ back to top] ( #table-of-contents ) **
380
380
@@ -440,22 +440,20 @@ function showEmployeeList(employees) {
440
440
const expectedSalary = employee .calculateExpectedSalary ();
441
441
const experience = employee .getExperience ();
442
442
443
- let portfolio;
443
+ const data = {
444
+ expectedSalary,
445
+ experience
446
+ };
447
+
444
448
switch (employee .type ) {
445
449
case ' manager' :
446
- portfolio = employee .getMBAProjects ();
450
+ data . portfolio = employee .getMBAProjects ();
447
451
break ;
448
452
case ' developer' :
449
- portfolio = employee .getGithubLink ();
453
+ data . githubLink = employee .getGithubLink ();
450
454
break ;
451
455
}
452
456
453
- const data = {
454
- expectedSalary,
455
- experience,
456
- portfolio
457
- };
458
-
459
457
render (data);
460
458
});
461
459
}
@@ -623,7 +621,7 @@ const addItemToCart = (cart, item) => {
623
621
** Good:**
624
622
``` javascript
625
623
const addItemToCart = (cart , item ) => {
626
- return [... cart, { item, date : Date .now () }];
624
+ return [... cart, { item, date: Date .now () }];
627
625
};
628
626
```
629
627
@@ -661,7 +659,7 @@ class SuperArray extends Array {
661
659
662
660
### Favor functional programming over imperative programming
663
661
JavaScript isn't a functional language in the way that Haskell is, but it has
664
- a functional flavor to it. Functional languages are cleaner and easier to test.
662
+ a functional flavor to it. Functional languages can be cleaner and easier to test.
665
663
Favor this style of programming when you can.
666
664
667
665
** Bad:**
@@ -707,11 +705,9 @@ const programmerOutput = [
707
705
}
708
706
];
709
707
710
- const INITIAL_VALUE = 0 ;
711
-
712
708
const totalOutput = programmerOutput
713
- .map (( programmer ) => programmer .linesOfCode )
714
- .reduce ((acc , linesOfCode ) => acc + linesOfCode, INITIAL_VALUE );
709
+ .map (output => output .linesOfCode )
710
+ .reduce ((totalLines , lines ) => totalLines + lines );
715
711
```
716
712
** [ ⬆ back to top] ( #table-of-contents ) **
717
713
@@ -843,7 +839,7 @@ function travelToTexas(vehicle) {
843
839
** [ ⬆ back to top] ( #table-of-contents ) **
844
840
845
841
### Avoid type-checking (part 2)
846
- If you are working with basic primitive values like strings, integers, and arrays ,
842
+ If you are working with basic primitive values like strings and integers ,
847
843
and you can't use polymorphism but you still feel the need to type-check,
848
844
you should consider using TypeScript. It is an excellent alternative to normal
849
845
JavaScript, as it provides you with static typing on top of standard JavaScript
@@ -1114,10 +1110,10 @@ and you can chain further class methods onto it.
1114
1110
** Bad:**
1115
1111
``` javascript
1116
1112
class Car {
1117
- constructor () {
1118
- this .make = ' Honda ' ;
1119
- this .model = ' Accord ' ;
1120
- this .color = ' white ' ;
1113
+ constructor (make , model , color ) {
1114
+ this .make = make ;
1115
+ this .model = model ;
1116
+ this .color = color ;
1121
1117
}
1122
1118
1123
1119
setMake (make ) {
@@ -1137,20 +1133,18 @@ class Car {
1137
1133
}
1138
1134
}
1139
1135
1140
- const car = new Car ();
1136
+ const car = new Car (' Ford ' , ' F-150 ' , ' red ' );
1141
1137
car .setColor (' pink' );
1142
- car .setMake (' Ford' );
1143
- car .setModel (' F-150' );
1144
1138
car .save ();
1145
1139
```
1146
1140
1147
1141
** Good:**
1148
1142
``` javascript
1149
1143
class Car {
1150
- constructor () {
1151
- this .make = ' Honda ' ;
1152
- this .model = ' Accord ' ;
1153
- this .color = ' white ' ;
1144
+ constructor (make , model , color ) {
1145
+ this .make = make ;
1146
+ this .model = model ;
1147
+ this .color = color ;
1154
1148
}
1155
1149
1156
1150
setMake (make ) {
@@ -1178,10 +1172,8 @@ class Car {
1178
1172
}
1179
1173
}
1180
1174
1181
- const car = new Car ()
1175
+ const car = new Car (' Ford ' , ' F-150 ' , ' red ' )
1182
1176
.setColor (' pink' )
1183
- .setMake (' Ford' )
1184
- .setModel (' F-150' )
1185
1177
.save ();
1186
1178
```
1187
1179
** [ ⬆ back to top] ( #table-of-contents ) **
@@ -1691,7 +1683,7 @@ you achieve very high confidence and developer peace of mind. This means that
1691
1683
in addition to having a great testing framework, you also need to use a
1692
1684
[ good coverage tool] ( http://gotwarlost.github.io/istanbul/ ) .
1693
1685
1694
- There's no excuse to not write tests. There's [ plenty of good JS test frameworks] ( http://jstherightway.org/#testing-tools ) , so find one that your team prefers.
1686
+ There's no excuse to not write tests. There are [ plenty of good JS test frameworks] ( http://jstherightway.org/#testing-tools ) , so find one that your team prefers.
1695
1687
When you find one that works for your team, then aim to always write tests
1696
1688
for every new feature/module you introduce. If your preferred method is
1697
1689
Test Driven Development (TDD), that is great, but the main point is to just
@@ -1945,8 +1937,8 @@ class Alpaca {}
1945
1937
const DAYS_IN_WEEK = 7 ;
1946
1938
const DAYS_IN_MONTH = 30 ;
1947
1939
1948
- const songs = [' Back In Black' , ' Stairway to Heaven' , ' Hey Jude' ];
1949
- const artists = [' ACDC' , ' Led Zeppelin' , ' The Beatles' ];
1940
+ const SONGS = [' Back In Black' , ' Stairway to Heaven' , ' Hey Jude' ];
1941
+ const ARTISTS = [' ACDC' , ' Led Zeppelin' , ' The Beatles' ];
1950
1942
1951
1943
function eraseDatabase () {}
1952
1944
function restoreDatabase () {}
@@ -2180,5 +2172,9 @@ This is also available in other languages:
2180
2172
- [ maksugr/clean-code-javascript] ( https://github.com/maksugr/clean-code-javascript )
2181
2173
- ![ vi] ( https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Vietnam.png ) ** Vietnamese** : [ hienvd/clean-code-javascript/] ( https://github.com/hienvd/clean-code-javascript/ )
2182
2174
- ![ ja] ( https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png ) ** Japanese** : [ mitsuruog/clean-code-javascript/] ( https://github.com/mitsuruog/clean-code-javascript/ )
2175
+ - ![ id] ( https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Indonesia.png ) ** Indonesia** :
2176
+ [ andirkh/clean-code-javascript/] ( https://github.com/andirkh/clean-code-javascript/ )
2177
+ - ![ it] ( https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Italy.png ) ** Italian** :
2178
+ [ frappacchio/clean-code-javascript/] ( https://github.com/frappacchio/clean-code-javascript/ )
2183
2179
2184
2180
** [ ⬆ back to top] ( #table-of-contents ) **
0 commit comments