Add Side Effects pt.2 #123
Conversation
| @@ -550,6 +550,32 @@ console.log(newName); // ['Ryan', 'McDermott']; | |||
| ``` | |||
| **[⬆ back to top](#table-of-contents)** | |||
|
|
|||
| ### Avoid Side Effects pt.2 | |||
There was a problem hiding this comment.
This should read (part 2). The example before should say (part 1)
| @@ -550,6 +550,32 @@ console.log(newName); // ['Ryan', 'McDermott']; | |||
| ``` | |||
| **[⬆ back to top](#table-of-contents)** | |||
|
|
|||
| ### Avoid Side Effects pt.2 | |||
| Side effects could also occur from inside a function. In Javascript, function arguments | |||
| are always passed by value except when they(functions) are passed reference values such as | |||
There was a problem hiding this comment.
We can reword this sentence. We are saying here "JavaScript always does this, except when it doesn't." Many guides word it this way, but it's kind of a pedantic way of saying it. Yes technically that's true, you are passing a value in every case, but if your value is a pointer then it's a reference. Anyway, we can just say "In JavaScript, primitives are passed by value and objects are passed by reference."
| ### Avoid Side Effects pt.2 | ||
| Side effects could also occur from inside a function. In Javascript, function arguments | ||
| are always passed by value except when they(functions) are passed reference values such as | ||
| objects and arrays. In that case, we should be carefull not to change any of these |
| are always passed by value except when they(functions) are passed reference values such as | ||
| objects and arrays. In that case, we should be carefull not to change any of these | ||
| argument's properties. A possible solution would be to always clone the variable, | ||
| edit it and return the clone. |
There was a problem hiding this comment.
We probably want to mention, as a caveat, that there are some times where people want to modify the passed in object. Also, we might want to mention the performance implications of cloning large objects. All in all, I agree with the sentiment though that intentional side effects can be good, but oftentimes it's better to avoid them altogether if you can.
| ``` | ||
|
|
||
| **Good:** | ||
| ```javascript |
There was a problem hiding this comment.
This is a good start. I think we can do something that's not Flux/Redux specific, as these examples can go over the heads of a lot of beginners. Simple things like Planes, Trains, and Automobiles are understood by everyone! Let's think of an example along those lines.
There was a problem hiding this comment.
I could only think of an e-commerce kind of example. I believe it's very common among beginners. :)
| cart.push({ item: item, date: Date.now() }); | ||
|
|
||
| return cart; | ||
| } |
| c.push({ item: item, date: Date.now() }); | ||
|
|
||
| return c; | ||
| } |
There was a problem hiding this comment.
And here semicolon.
| **Bad:** | ||
| ```javascript | ||
| const addItemToCart = function (cart, item) { | ||
| cart.push({ item: item, date: Date.now() }); |
There was a problem hiding this comment.
Maybe just { item, date:... ?
| const addItemToCart = function (cart, item) { | ||
| const c = Object.assign({}, cart); | ||
|
|
||
| c.push({ item: item, date: Date.now() }); |
There was a problem hiding this comment.
Maybe just { item, date:... ?
|
Thanks for all your help, this is great! |
|
@ryanmcdermott you are obviously a much better writer than me! 😄 |
Regarding #108. Is the example clear?