Skip to content

Commit 3b9504e

Browse files
authored
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.
1 parent 4d15e1c commit 3b9504e

File tree

1 file changed

+16
-13
lines changed

1 file changed

+16
-13
lines changed

README.md

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -643,26 +643,29 @@ console.log(newName); // ['Ryan', 'McDermott'];
643643

644644
### Avoid Side Effects (part 2)
645645

646-
In JavaScript, primitives are passed by value and objects/arrays are passed by
647-
reference. In the case of objects and arrays, if your function makes a change
648-
in a shopping cart array, for example, by adding an item to purchase,
649-
then any other function that uses that `cart` array will be affected by this
650-
addition. That may be great, however it can be bad too. Let's imagine a bad
651-
situation:
646+
In JavaScript, some values are unchangeable (immutable) and some are changeable
647+
(mutable). Objects and arrays are two kinds of mutable values so it's important
648+
to handle them carefully when they're passed as parameters to a function. A
649+
JavaScript function can change an object's properties or alter the contents of
650+
an array which could easily cause bugs elsewhere.
651+
652+
Suppose there's a function that accepts an array parameter representing a
653+
shopping cart. If the function makes a change in that shopping cart array
654+
- by adding an item to purchase, for example - then any other function that
655+
uses that same `cart` array will be affected by this addition. That may be
656+
great, however it could also be bad. Let's imagine a bad situation:
652657

653658
The user clicks the "Purchase" button which calls a `purchase` function that
654659
spawns a network request and sends the `cart` array to the server. Because
655660
of a bad network connection, the `purchase` function has to keep retrying the
656-
request. Now, what if in the meantime the user accidentally clicks "Add to Cart"
661+
request. Now, what if in the meantime the user accidentally clicks an "Add to Cart"
657662
button on an item they don't actually want before the network request begins?
658663
If that happens and the network request begins, then that purchase function
659-
will send the accidentally added item because it has a reference to a shopping
660-
cart array that the `addItemToCart` function modified by adding an unwanted
661-
item.
664+
will send the accidentally added item because the `cart` array was modified.
662665

663-
A great solution would be for the `addItemToCart` to always clone the `cart`,
664-
edit it, and return the clone. This ensures that no other functions that are
665-
holding onto a reference of the shopping cart will be affected by any changes.
666+
A great solution would be for the `addItemToCart` function to always clone the
667+
`cart`, edit it, and return the clone. This would ensure that functions that are still
668+
using the old shopping cart wouldn't be affected by the changes.
666669

667670
Two caveats to mention to this approach:
668671

0 commit comments

Comments
 (0)