diff --git a/README.md b/README.md index 374b4bab..f1159781 100644 --- a/README.md +++ b/README.md @@ -100,9 +100,9 @@ setTimeout(blastOff, 86400000); ```javascript // Declare them as capitalized named constants. -const MILLISECONDS_IN_A_DAY = 86_400_000; +const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000; -setTimeout(blastOff, MILLISECONDS_IN_A_DAY); +setTimeout(blastOff, MILLISECONDS_PER_DAY); ``` **[⬆ back to top](#table-of-contents)** @@ -125,7 +125,7 @@ saveCityZipCode( ```javascript const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/; -const [, city, zipCode] = address.match(cityZipCodeRegex) || []; +const [_, city, zipCode] = address.match(cityZipCodeRegex) || []; saveCityZipCode(city, zipCode); ``` @@ -180,8 +180,8 @@ const Car = { carColor: "Blue" }; -function paintCar(car) { - car.carColor = "Red"; +function paintCar(car, color) { + car.carColor = color; } ``` @@ -194,16 +194,16 @@ const Car = { color: "Blue" }; -function paintCar(car) { - car.color = "Red"; +function paintCar(car, color) { + car.color = color; } ``` **[⬆ back to top](#table-of-contents)** -### Use default arguments instead of short circuiting or conditionals +### Use default parameters instead of short circuiting or conditionals -Default arguments are often cleaner than short circuiting. Be aware that if you +Default parameters are often cleaner than short circuiting. Be aware that if you use them, your function will only provide default values for `undefined` arguments. Other "falsy" values such as `''`, `""`, `false`, `null`, `0`, and `NaN`, will not be replaced by a default value. @@ -251,11 +251,12 @@ destructuring syntax. This has a few advantages: 1. When someone looks at the function signature, it's immediately clear what properties are being used. -2. Destructuring also clones the specified primitive values of the argument +2. It can be used to simulate named parameters. +3. Destructuring also clones the specified primitive values of the argument object passed into the function. This can help prevent side effects. Note: objects and arrays that are destructured from the argument object are NOT cloned. -3. Linters can warn you about unused properties, which would be impossible +4. Linters can warn you about unused properties, which would be impossible without destructuring. **Bad:** @@ -264,6 +265,9 @@ destructuring syntax. This has a few advantages: function createMenu(title, body, buttonText, cancellable) { // ... } + +createMenu("Foo", "Bar", "Baz", true); + ``` **Good:** @@ -287,7 +291,7 @@ createMenu({ This is by far the most important rule in software engineering. When functions do more than one thing, they are harder to compose, test, and reason about. -When you can isolate a function to just one action, they can be refactored +When you can isolate a function to just one action, it can be refactored easily and your code will read much cleaner. If you take nothing else away from this guide other than this, you'll be ahead of many developers. @@ -539,7 +543,7 @@ const menuConfig = { }; function createMenu(config) { - config = Object.assign( + let finalConfig = Object.assign( { title: "Foo", body: "Bar", @@ -548,7 +552,7 @@ function createMenu(config) { }, config ); - + return finalConfig // config now equals: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true} // ... } @@ -639,26 +643,29 @@ console.log(newName); // ['Ryan', 'McDermott']; ### Avoid Side Effects (part 2) -In JavaScript, primitives are passed by value and objects/arrays are passed by -reference. In the case of objects and arrays, if your function makes a change -in a shopping cart array, for example, by adding an item to purchase, -then any other function that uses that `cart` array will be affected by this -addition. That may be great, however it can be bad too. Let's imagine a bad -situation: +In JavaScript, some values are unchangeable (immutable) and some are changeable +(mutable). Objects and arrays are two kinds of mutable values so it's important +to handle them carefully when they're passed as parameters to a function. A +JavaScript function can change an object's properties or alter the contents of +an array which could easily cause bugs elsewhere. -The user clicks the "Purchase", button which calls a `purchase` function that +Suppose there's a function that accepts an array parameter representing a +shopping cart. If the function makes a change in that shopping cart array - +by adding an item to purchase, for example - then any other function that +uses that same `cart` array will be affected by this addition. That may be +great, however it could also be bad. Let's imagine a bad situation: + +The user clicks the "Purchase" button which calls a `purchase` function that spawns a network request and sends the `cart` array to the server. Because of a bad network connection, the `purchase` function has to keep retrying the -request. Now, what if in the meantime the user accidentally clicks "Add to Cart" +request. Now, what if in the meantime the user accidentally clicks an "Add to Cart" button on an item they don't actually want before the network request begins? If that happens and the network request begins, then that purchase function -will send the accidentally added item because it has a reference to a shopping -cart array that the `addItemToCart` function modified by adding an unwanted -item. +will send the accidentally added item because the `cart` array was modified. -A great solution would be for the `addItemToCart` to always clone the `cart`, -edit it, and return the clone. This ensures that no other functions that are -holding onto a reference of the shopping cart will be affected by any changes. +A great solution would be for the `addItemToCart` function to always clone the +`cart`, edit it, and return the clone. This would ensure that functions that are still +using the old shopping cart wouldn't be affected by the changes. Two caveats to mention to this approach: @@ -1668,7 +1675,7 @@ class DOMTraverser { setup() { this.rootNode = this.settings.rootNode; - this.animationModule.setup(); + this.settings.animationModule.setup(); } traverse() { @@ -2351,28 +2358,29 @@ const actions = function() { This is also available in other languages: -- ![fr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/France.png) **French**: - [GavBaros/clean-code-javascript-fr](https://github.com/GavBaros/clean-code-javascript-fr) +- ![am](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Armenia.png) **Armenian**: [hanumanum/clean-code-javascript/](https://github.com/hanumanum/clean-code-javascript) +- ![bd](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Bangladesh.png) **Bangla(বাংলা)**: [InsomniacSabbir/clean-code-javascript/](https://github.com/InsomniacSabbir/clean-code-javascript/) - ![br](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Brazilian Portuguese**: [fesnt/clean-code-javascript](https://github.com/fesnt/clean-code-javascript) -- ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Uruguay.png) **Spanish**: [andersontr15/clean-code-javascript](https://github.com/andersontr15/clean-code-javascript-es) -- ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [tureey/clean-code-javascript](https://github.com/tureey/clean-code-javascript) - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Simplified Chinese**: - [alivebao/clean-code-js](https://github.com/alivebao/clean-code-js) - [beginor/clean-code-javascript](https://github.com/beginor/clean-code-javascript) - ![tw](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Taiwan.png) **Traditional Chinese**: [AllJointTW/clean-code-javascript](https://github.com/AllJointTW/clean-code-javascript) +- ![fr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/France.png) **French**: [eugene-augier/clean-code-javascript-fr](https://github.com/eugene-augier/clean-code-javascript-fr) - ![de](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Germany.png) **German**: [marcbruederlin/clean-code-javascript](https://github.com/marcbruederlin/clean-code-javascript) +- ![id](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Indonesia.png) **Indonesia**: [andirkh/clean-code-javascript/](https://github.com/andirkh/clean-code-javascript/) +- ![it](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Italy.png) **Italian**: [frappacchio/clean-code-javascript/](https://github.com/frappacchio/clean-code-javascript/) +- ![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/) - ![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [qkraudghgh/clean-code-javascript-ko](https://github.com/qkraudghgh/clean-code-javascript-ko) - ![pl](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Poland.png) **Polish**: [greg-dev/clean-code-javascript-pl](https://github.com/greg-dev/clean-code-javascript-pl) - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: - [BoryaMogila/clean-code-javascript-ru/](https://github.com/BoryaMogila/clean-code-javascript-ru/) - [maksugr/clean-code-javascript](https://github.com/maksugr/clean-code-javascript) +- ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [tureey/clean-code-javascript](https://github.com/tureey/clean-code-javascript) +- ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Uruguay.png) **Spanish**: [andersontr15/clean-code-javascript](https://github.com/andersontr15/clean-code-javascript-es) +- ![rs](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Serbia.png) **Serbian**: [doskovicmilos/clean-code-javascript/](https://github.com/doskovicmilos/clean-code-javascript) +- ![tr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Turkey.png) **Turkish**: [bsonmez/clean-code-javascript](https://github.com/bsonmez/clean-code-javascript/tree/turkish-translation) +- ![ua](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Ukraine.png) **Ukrainian**: [mindfr1k/clean-code-javascript-ua](https://github.com/mindfr1k/clean-code-javascript-ua) - ![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/) -- ![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/) -- ![id](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Indonesia.png) **Indonesia**: - [andirkh/clean-code-javascript/](https://github.com/andirkh/clean-code-javascript/) -- ![it](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Italy.png) **Italian**: - [frappacchio/clean-code-javascript/](https://github.com/frappacchio/clean-code-javascript/) -- ![bd](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Bangladesh.png) **Bangla(বাংলা)**: - [InsomniacSabbir/clean-code-javascript/](https://github.com/InsomniacSabbir/clean-code-javascript/) - +- ![ir](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Iran.png) **Persian**: [hamettio/clean-code-javascript](https://github.com/hamettio/clean-code-javascript) + **[⬆ back to top](#table-of-contents)**