Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: dev-sabbir/clean-code-javascript
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: master
Choose a base ref
...
head repository: ryanmcdermott/clean-code-javascript
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref

Commits on Jan 2, 2020

  1. Merge pull request ryanmcdermott#277 from InsomniacSabbir/master

    Added source link for bengali translations
    ryanmcdermott authored Jan 2, 2020
    Copy the full SHA
    1c0b20a View commit details

Commits on Jan 10, 2020

  1. Copy the full SHA
    4503a25 View commit details

Commits on Jan 18, 2020

  1. Copy the full SHA
    3afe391 View commit details

Commits on Jan 19, 2020

  1. Merge pull request ryanmcdermott#283 from uxitten/patch-1

    Added numeric separator for improve readability
    ryanmcdermott authored Jan 19, 2020
    Copy the full SHA
    0ff4aba View commit details

Commits on Jan 20, 2020

  1. Merge pull request ryanmcdermott#280 from oger-p/patch-4

    Add advantage in function parameters
    ryanmcdermott authored Jan 20, 2020
    Copy the full SHA
    54492ac View commit details

Commits on Jan 21, 2020

  1. Copy the full SHA
    8491866 View commit details
  2. Update README.md

    Small grammar correction.
    justin0022 authored Jan 21, 2020
    Copy the full SHA
    ba9797e View commit details
  3. Update README.md

    Small grammar correction
    justin0022 authored Jan 21, 2020
    Copy the full SHA
    0ab8eba View commit details
  4. Copy the full SHA
    2e808e2 View commit details

Commits on Jan 22, 2020

  1. sort translations

    rudotriton committed Jan 22, 2020
    Copy the full SHA
    c18b976 View commit details
  2. Copy the full SHA
    a812aa9 View commit details
  3. Merge pull request ryanmcdermott#291 from rudotriton/master

    Sort translations
    ryanmcdermott authored Jan 22, 2020
    Copy the full SHA
    dd7e665 View commit details

Commits on Feb 7, 2020

  1. Fixed a small typo

    ristomcintosh authored Feb 7, 2020
    Copy the full SHA
    5f8daa0 View commit details
  2. Copy the full SHA
    e6f9934 View commit details
  3. Add an underscore to "Use explanatory variables"

    This makes the destructuring a little more readable
    ristomcintosh authored Feb 7, 2020
    Copy the full SHA
    c90b109 View commit details

Commits on Feb 12, 2020

  1. Copy the full SHA
    b8b16eb View commit details

Commits on Mar 26, 2020

  1. turkish added

    bsonmez committed Mar 26, 2020
    Copy the full SHA
    2edfeef View commit details
  2. Revert "turkish added"

    This reverts commit 2edfeef.
    bsonmez committed Mar 26, 2020
    Copy the full SHA
    87185d9 View commit details
  3. Turkish added

    bsonmez committed Mar 26, 2020
    Copy the full SHA
    60a3357 View commit details
  4. Turkish Added

    bsonmez committed Mar 26, 2020
    Copy the full SHA
    1470b0b View commit details

Commits on Mar 29, 2020

  1. fix

    bsonmez committed Mar 29, 2020
    Copy the full SHA
    46869c8 View commit details

Commits on Mar 31, 2020

  1. Copy the full SHA
    0dcac22 View commit details

Commits on Apr 1, 2020

  1. Copy the full SHA
    ec7baf2 View commit details

Commits on Apr 16, 2020

  1. Update README.md

    Oleksandr Zaychenko authored Apr 16, 2020
    Copy the full SHA
    9388808 View commit details

Commits on Apr 17, 2020

  1. Merge pull request ryanmcdermott#313 from mindfr1k/master

    Ukrainian translation is added
    ryanmcdermott authored Apr 17, 2020
    Copy the full SHA
    5f52d7d View commit details

Commits on May 3, 2020

  1. Merge pull request ryanmcdermott#312 from nebakry/patch-1

    Fix calling animationModule in ISP bad example
    ryanmcdermott authored May 3, 2020
    Copy the full SHA
    c56cc59 View commit details

Commits on Jul 31, 2020

  1. Merge pull request ryanmcdermott#288 from sbimochan/patch-1

    Change argument name from inner variable name
    ryanmcdermott authored Jul 31, 2020
    Copy the full SHA
    4d15e1c View commit details

Commits on Sep 6, 2020

  1. Copy the full SHA
    365717f View commit details

Commits on Oct 5, 2020

  1. Replace pass-by-reference with mutability, clean up

    This edit only affects the Avoid Side Effects (part 2) section.
    It replaces the discussion of pass by reference with an explanation in terms of mutability. 
    By avoiding the confusing terminology and possible links to the implementation details of 
    different JS engines the explanation can be kept at an abstraction level that's great for 
    beginners and experts alike. I also cleaned up some grammar, typos, etc.
    jdsandifer authored Oct 5, 2020
    Copy the full SHA
    3b9504e View commit details

Commits on Oct 6, 2020

  1. Merge pull request ryanmcdermott#323 from jdsandifer/issue-321-remove…

    …-pass-by-reference
    
    Replace pass-by-reference with mutability, clean up
    ryanmcdermott authored Oct 6, 2020
    Copy the full SHA
    597a510 View commit details

Commits on Oct 7, 2020

  1. Merge pull request ryanmcdermott#320 from ychek/add-calculation-for-m…

    …illiseconds
    
    Add calculation for milliseconds in a day
    ryanmcdermott authored Oct 7, 2020
    Copy the full SHA
    8f678c8 View commit details

Commits on Oct 8, 2020

  1. Copy the full SHA
    3028219 View commit details
  2. Merge pull request ryanmcdermott#325 from jdsandifer/issue-321-remove…

    …-pass-by-reference
    
    Fix stray hyphen turning into a random bullet
    ryanmcdermott authored Oct 8, 2020
    Copy the full SHA
    ca37c9c View commit details

Commits on Oct 10, 2020

  1. Copy the full SHA
    029c4c2 View commit details

Commits on Jan 21, 2021

  1. Merge pull request ryanmcdermott#326 from doskovicmilos/patch-1

    Add Serbian translation.
    ryanmcdermott authored Jan 21, 2021
    Copy the full SHA
    da76556 View commit details

Commits on Mar 29, 2021

  1. Make example more succinct

    "PER" has the same meaning as "IN_A" but is less verbose
    jamestharpe authored Mar 29, 2021
    Copy the full SHA
    753d6d8 View commit details

Commits on May 23, 2021

  1. Merge pull request ryanmcdermott#341 from jamestharpe/patch-1

    Make example more succinct
    ryanmcdermott authored May 23, 2021
    Copy the full SHA
    20563d0 View commit details
  2. Copy the full SHA
    3ff9eba View commit details

Commits on Jul 23, 2021

  1. Copy the full SHA
    384665f View commit details

Commits on Apr 13, 2022

  1. French translation

    eugene-augier authored Apr 13, 2022
    Copy the full SHA
    98f1d4a View commit details

Commits on Jul 10, 2022

  1. fixed naming

    agilatakishiyev committed Jul 10, 2022
    Copy the full SHA
    2cab77b View commit details

Commits on Aug 21, 2022

  1. Merge pull request ryanmcdermott#392 from agilatakishiyev/master

    Fix wrong naming of `default parameters`
    ryanmcdermott authored Aug 21, 2022
    Copy the full SHA
    5b49d62 View commit details
  2. Merge pull request ryanmcdermott#383 from eugene-augier/french-transl…

    …ation
    
    French translation
    ryanmcdermott authored Aug 21, 2022
    Copy the full SHA
    a4c884f View commit details

Commits on Feb 11, 2023

  1. Merge pull request ryanmcdermott#356 from hamettio/master

    Persian translation added (Fluent + RTL styled)
    ryanmcdermott authored Feb 11, 2023
    Copy the full SHA
    5311f64 View commit details
Showing with 49 additions and 41 deletions.
  1. +49 −41 README.md
90 changes: 49 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
@@ -100,9 +100,9 @@ setTimeout(blastOff, 86400000);

```javascript
// Declare them as capitalized named constants.
const MILLISECONDS_IN_A_DAY = 86400000;
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)**