|
| 1 | + |
1 | 2 | # clean-code-javascript
|
2 | 3 |
|
3 | 4 | ## Table of Contents
|
@@ -48,7 +49,7 @@ improvement. Beat up the code instead!
|
48 | 49 | const yyyymmdstr = moment().format('YYYY/MM/DD');
|
49 | 50 | ```
|
50 | 51 |
|
51 |
| -**Good**: |
| 52 | +**Good:** |
52 | 53 | ```javascript
|
53 | 54 | const currentDate = moment().format('YYYY/MM/DD');
|
54 | 55 | ```
|
@@ -63,7 +64,7 @@ getClientData();
|
63 | 64 | getCustomerRecord();
|
64 | 65 | ```
|
65 | 66 |
|
66 |
| -**Good**: |
| 67 | +**Good:** |
67 | 68 | ```javascript
|
68 | 69 | getUser();
|
69 | 70 | ```
|
@@ -85,7 +86,7 @@ setTimeout(blastOff, 86400000);
|
85 | 86 |
|
86 | 87 | ```
|
87 | 88 |
|
88 |
| -**Good**: |
| 89 | +**Good:** |
89 | 90 | ```javascript
|
90 | 91 | // Declare them as capitalized `const` globals.
|
91 | 92 | const MILLISECONDS_IN_A_DAY = 86400000;
|
@@ -103,7 +104,7 @@ const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
|
103 | 104 | saveCityZipCode(address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2]);
|
104 | 105 | ```
|
105 | 106 |
|
106 |
| -**Good**: |
| 107 | +**Good:** |
107 | 108 | ```javascript
|
108 | 109 | const address = 'One Infinite Loop, Cupertino 95014';
|
109 | 110 | const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
|
@@ -129,7 +130,7 @@ locations.forEach((l) => {
|
129 | 130 | });
|
130 | 131 | ```
|
131 | 132 |
|
132 |
| -**Good**: |
| 133 | +**Good:** |
133 | 134 | ```javascript
|
134 | 135 | const locations = ['Austin', 'New York', 'San Francisco'];
|
135 | 136 | locations.forEach((location) => {
|
@@ -160,7 +161,7 @@ function paintCar(car) {
|
160 | 161 | }
|
161 | 162 | ```
|
162 | 163 |
|
163 |
| -**Good**: |
| 164 | +**Good:** |
164 | 165 | ```javascript
|
165 | 166 | const Car = {
|
166 | 167 | make: 'Honda',
|
@@ -185,7 +186,7 @@ function createMicrobrewery(name) {
|
185 | 186 |
|
186 | 187 | ```
|
187 | 188 |
|
188 |
| -**Good**: |
| 189 | +**Good:** |
189 | 190 | ```javascript
|
190 | 191 | function createMicrobrewery(breweryName = 'Hipster Brew Co.') {
|
191 | 192 | // ...
|
@@ -218,7 +219,7 @@ function createMenu(title, body, buttonText, cancellable) {
|
218 | 219 | }
|
219 | 220 | ```
|
220 | 221 |
|
221 |
| -**Good**: |
| 222 | +**Good:** |
222 | 223 | ```javascript
|
223 | 224 | function createMenu(config) {
|
224 | 225 | // ...
|
@@ -253,7 +254,7 @@ function emailClients(clients) {
|
253 | 254 | }
|
254 | 255 | ```
|
255 | 256 |
|
256 |
| -**Good**: |
| 257 | +**Good:** |
257 | 258 | ```javascript
|
258 | 259 | function emailClients(clients) {
|
259 | 260 | clients
|
@@ -282,7 +283,7 @@ const date = new Date();
|
282 | 283 | addToDate(date, 1);
|
283 | 284 | ```
|
284 | 285 |
|
285 |
| -**Good**: |
| 286 | +**Good:** |
286 | 287 | ```javascript
|
287 | 288 | function addMonthToDate(month, date) {
|
288 | 289 | // ...
|
@@ -324,7 +325,7 @@ function parseBetterJSAlternative(code) {
|
324 | 325 | }
|
325 | 326 | ```
|
326 | 327 |
|
327 |
| -**Good**: |
| 328 | +**Good:** |
328 | 329 | ```javascript
|
329 | 330 | function tokenize(code) {
|
330 | 331 | const REGEXES = [
|
@@ -416,7 +417,7 @@ function showManagerList(managers) {
|
416 | 417 | }
|
417 | 418 | ```
|
418 | 419 |
|
419 |
| -**Good**: |
| 420 | +**Good:** |
420 | 421 | ```javascript
|
421 | 422 | function showList(employees) {
|
422 | 423 | employees.forEach((employee) => {
|
@@ -462,7 +463,7 @@ function createMenu(config) {
|
462 | 463 | createMenu(menuConfig);
|
463 | 464 | ```
|
464 | 465 |
|
465 |
| -**Good**: |
| 466 | +**Good:** |
466 | 467 | ```javascript
|
467 | 468 | const menuConfig = {
|
468 | 469 | title: 'Order',
|
@@ -502,7 +503,7 @@ function createFile(name, temp) {
|
502 | 503 | }
|
503 | 504 | ```
|
504 | 505 |
|
505 |
| -**Good**: |
| 506 | +**Good:** |
506 | 507 | ```javascript
|
507 | 508 | function createFile(name) {
|
508 | 509 | fs.create(name);
|
@@ -545,7 +546,7 @@ splitIntoFirstAndLastName();
|
545 | 546 | console.log(name); // ['Ryan', 'McDermott'];
|
546 | 547 | ```
|
547 | 548 |
|
548 |
| -**Good**: |
| 549 | +**Good:** |
549 | 550 | ```javascript
|
550 | 551 | function splitIntoFirstAndLastName(name) {
|
551 | 552 | return name.split(' ');
|
@@ -668,7 +669,7 @@ for (let i = 0; i < programmerOutput.length; i++) {
|
668 | 669 | }
|
669 | 670 | ```
|
670 | 671 |
|
671 |
| -**Good**: |
| 672 | +**Good:** |
672 | 673 | ```javascript
|
673 | 674 | const programmerOutput = [
|
674 | 675 | {
|
@@ -701,7 +702,7 @@ if (fsm.state === 'fetching' && isEmpty(listNode)) {
|
701 | 702 | }
|
702 | 703 | ```
|
703 | 704 |
|
704 |
| -**Good**: |
| 705 | +**Good:** |
705 | 706 | ```javascript
|
706 | 707 | function shouldShowSpinner(fsm, listNode) {
|
707 | 708 | return fsm.state === 'fetching' && isEmpty(listNode);
|
@@ -726,7 +727,7 @@ if (!isDOMNodeNotPresent(node)) {
|
726 | 727 | }
|
727 | 728 | ```
|
728 | 729 |
|
729 |
| -**Good**: |
| 730 | +**Good:** |
730 | 731 | ```javascript
|
731 | 732 | function isDOMNodePresent(node) {
|
732 | 733 | // ...
|
@@ -765,7 +766,7 @@ class Airplane {
|
765 | 766 | }
|
766 | 767 | ```
|
767 | 768 |
|
768 |
| -**Good**: |
| 769 | +**Good:** |
769 | 770 | ```javascript
|
770 | 771 | class Airplane {
|
771 | 772 | // ...
|
@@ -811,7 +812,7 @@ function travelToTexas(vehicle) {
|
811 | 812 | }
|
812 | 813 | ```
|
813 | 814 |
|
814 |
| -**Good**: |
| 815 | +**Good:** |
815 | 816 | ```javascript
|
816 | 817 | function travelToTexas(vehicle) {
|
817 | 818 | vehicle.move(this.currentLocation, new Location('texas'));
|
@@ -842,7 +843,7 @@ function combine(val1, val2) {
|
842 | 843 | }
|
843 | 844 | ```
|
844 | 845 |
|
845 |
| -**Good**: |
| 846 | +**Good:** |
846 | 847 | ```javascript
|
847 | 848 | function combine(val1, val2) {
|
848 | 849 | return val1 + val2;
|
@@ -867,7 +868,7 @@ for (let i = 0, len = list.length; i < len; i++) {
|
867 | 868 | }
|
868 | 869 | ```
|
869 | 870 |
|
870 |
| -**Good**: |
| 871 | +**Good:** |
871 | 872 | ```javascript
|
872 | 873 | for (let i = 0; i < list.length; i++) {
|
873 | 874 | // ...
|
@@ -895,7 +896,7 @@ inventoryTracker('apples', req, 'www.inventory-awesome.io');
|
895 | 896 |
|
896 | 897 | ```
|
897 | 898 |
|
898 |
| -**Good**: |
| 899 | +**Good:** |
899 | 900 | ```javascript
|
900 | 901 | function newRequestModule(url) {
|
901 | 902 | // ...
|
@@ -938,7 +939,7 @@ const bankAccount = new BankAccount();
|
938 | 939 | bankAccount.balance -= 100;
|
939 | 940 | ```
|
940 | 941 |
|
941 |
| -**Good**: |
| 942 | +**Good:** |
942 | 943 | ```javascript
|
943 | 944 | class BankAccount {
|
944 | 945 | constructor(balance = 1000) {
|
@@ -993,7 +994,7 @@ delete employee.name;
|
993 | 994 | console.log(`Employee name: ${employee.getName()}`); // Employee name: undefined
|
994 | 995 | ```
|
995 | 996 |
|
996 |
| -**Good**: |
| 997 | +**Good:** |
997 | 998 | ```javascript
|
998 | 999 | const Employee = function (name) {
|
999 | 1000 | this.getName = function getName() {
|
@@ -1039,7 +1040,7 @@ class UserSettings {
|
1039 | 1040 | }
|
1040 | 1041 | ```
|
1041 | 1042 |
|
1042 |
| -**Good**: |
| 1043 | +**Good:** |
1043 | 1044 | ```javascript
|
1044 | 1045 | class UserAuth {
|
1045 | 1046 | constructor(user) {
|
@@ -1116,7 +1117,7 @@ function makeHttpCall(url) {
|
1116 | 1117 | }
|
1117 | 1118 | ```
|
1118 | 1119 |
|
1119 |
| -**Good**: |
| 1120 | +**Good:** |
1120 | 1121 | ```javascript
|
1121 | 1122 | class AjaxAdapter extends Adapter {
|
1122 | 1123 | constructor() {
|
@@ -1223,7 +1224,7 @@ const rectangles = [new Rectangle(), new Rectangle(), new Square()];
|
1223 | 1224 | renderLargeRectangles(rectangles);
|
1224 | 1225 | ```
|
1225 | 1226 |
|
1226 |
| -**Good**: |
| 1227 | +**Good:** |
1227 | 1228 | ```javascript
|
1228 | 1229 | class Shape {
|
1229 | 1230 | setColor(color) {
|
@@ -1331,7 +1332,7 @@ const $ = new DOMTraverser({
|
1331 | 1332 |
|
1332 | 1333 | ```
|
1333 | 1334 |
|
1334 |
| -**Good**: |
| 1335 | +**Good:** |
1335 | 1336 | ```javascript
|
1336 | 1337 | class DOMTraverser {
|
1337 | 1338 | constructor(settings) {
|
@@ -1418,7 +1419,7 @@ const inventoryTracker = new InventoryTracker(['apples', 'bananas']);
|
1418 | 1419 | inventoryTracker.requestItems();
|
1419 | 1420 | ```
|
1420 | 1421 |
|
1421 |
| -**Good**: |
| 1422 | +**Good:** |
1422 | 1423 | ```javascript
|
1423 | 1424 | class InventoryTracker {
|
1424 | 1425 | constructor(items, requester) {
|
@@ -1576,7 +1577,7 @@ car.setModel('F-150');
|
1576 | 1577 | car.save();
|
1577 | 1578 | ```
|
1578 | 1579 |
|
1579 |
| -**Good**: |
| 1580 | +**Good:** |
1580 | 1581 | ```javascript
|
1581 | 1582 | class Car {
|
1582 | 1583 | constructor() {
|
@@ -1659,7 +1660,7 @@ class EmployeeTaxData extends Employee {
|
1659 | 1660 | }
|
1660 | 1661 | ```
|
1661 | 1662 |
|
1662 |
| -**Good**: |
| 1663 | +**Good:** |
1663 | 1664 | ```javascript
|
1664 | 1665 | class EmployeeTaxData {
|
1665 | 1666 | constructor(ssn, salary) {
|
@@ -1726,7 +1727,7 @@ describe('MakeMomentJSGreatAgain', () => {
|
1726 | 1727 | });
|
1727 | 1728 | ```
|
1728 | 1729 |
|
1729 |
| -**Good**: |
| 1730 | +**Good:** |
1730 | 1731 | ```javascript
|
1731 | 1732 | const assert = require('assert');
|
1732 | 1733 |
|
@@ -1775,7 +1776,7 @@ require('request').get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin', (req
|
1775 | 1776 |
|
1776 | 1777 | ```
|
1777 | 1778 |
|
1778 |
| -**Good**: |
| 1779 | +**Good:** |
1779 | 1780 | ```javascript
|
1780 | 1781 | require('request-promise').get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin')
|
1781 | 1782 | .then((response) => {
|
@@ -1813,7 +1814,7 @@ require('request-promise').get('https://en.wikipedia.org/wiki/Robert_Cecil_Marti
|
1813 | 1814 |
|
1814 | 1815 | ```
|
1815 | 1816 |
|
1816 |
| -**Good**: |
| 1817 | +**Good:** |
1817 | 1818 | ```javascript
|
1818 | 1819 | async function getCleanCodeArticle() {
|
1819 | 1820 | try {
|
@@ -1931,7 +1932,7 @@ class animal {}
|
1931 | 1932 | class Alpaca {}
|
1932 | 1933 | ```
|
1933 | 1934 |
|
1934 |
| -**Good**: |
| 1935 | +**Good:** |
1935 | 1936 | ```javascript
|
1936 | 1937 | const DAYS_IN_WEEK = 7;
|
1937 | 1938 | const DAYS_IN_MONTH = 30;
|
@@ -1992,7 +1993,7 @@ const review = new PerformanceReview(user);
|
1992 | 1993 | review.perfReview();
|
1993 | 1994 | ```
|
1994 | 1995 |
|
1995 |
| -**Good**: |
| 1996 | +**Good:** |
1996 | 1997 | ```javascript
|
1997 | 1998 | class PerformanceReview {
|
1998 | 1999 | constructor(employee) {
|
@@ -2058,7 +2059,7 @@ function hashIt(data) {
|
2058 | 2059 | }
|
2059 | 2060 | ```
|
2060 | 2061 |
|
2061 |
| -**Good**: |
| 2062 | +**Good:** |
2062 | 2063 | ```javascript
|
2063 | 2064 |
|
2064 | 2065 | function hashIt(data) {
|
@@ -2088,7 +2089,7 @@ doStuff();
|
2088 | 2089 | // doSoMuchStuff();
|
2089 | 2090 | ```
|
2090 | 2091 |
|
2091 |
| -**Good**: |
| 2092 | +**Good:** |
2092 | 2093 | ```javascript
|
2093 | 2094 | doStuff();
|
2094 | 2095 | ```
|
@@ -2111,7 +2112,7 @@ function combine(a, b) {
|
2111 | 2112 | }
|
2112 | 2113 | ```
|
2113 | 2114 |
|
2114 |
| -**Good**: |
| 2115 | +**Good:** |
2115 | 2116 | ```javascript
|
2116 | 2117 | function combine(a, b) {
|
2117 | 2118 | return a + b;
|
@@ -2141,7 +2142,7 @@ const actions = function() {
|
2141 | 2142 | };
|
2142 | 2143 | ```
|
2143 | 2144 |
|
2144 |
| -**Good**: |
| 2145 | +**Good:** |
2145 | 2146 | ```javascript
|
2146 | 2147 | $scope.model = {
|
2147 | 2148 | menu: 'foo',
|
|
0 commit comments