From 6cbdf90f19e2d54b03d2461d608d31193f542bee Mon Sep 17 00:00:00 2001 From: Tanner Date: Wed, 16 Nov 2016 12:59:16 -0700 Subject: [PATCH] Remove spread operator (#8273) * Remove spread operator I believe what was meant here was to express that you would create the new player object with all the previous properties of the existing player object in addition to now updating the score value. That being said, this is a simple example, and the player object clearly has no other values. Objects are not (by default) iterable using this operator, so this little piece does more harm than good. I believe the new example to be much clearer. * Using Object.assign() * Tweak wording --- docs/tutorial/tutorial.md | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/docs/tutorial/tutorial.md b/docs/tutorial/tutorial.md index 1ab7206dc3..ed0d2290e9 100644 --- a/docs/tutorial/tutorial.md +++ b/docs/tutorial/tutorial.md @@ -209,18 +209,24 @@ Square no longer keeps its own state; it receives its value from its parent `Boa In the previous code example, I suggest using the `.slice()` operator to copy the `squares` array prior to making changes and to prevent mutating the existing array. Let's talk about what this means and why it is an important concept to learn. -There are generally two ways for changing data. The first, and most common method in past, has been to *mutate* the data by directly changing the values of a variable. The second method is to replace the data with a new copy of the object that also includes desired changes. +There are generally two ways for changing data. The first method is to *mutate* the data by directly changing the values of a variable. The second method is to replace the data with a new copy of the object that also includes desired changes. #### Data change with mutation ```javascript -var player = {score: 1} -player.score = 2 // same object mutated {score: 2} +var player = {score: 1, name: 'Jeff'}; +player.score = 2; +// Now player is {score: 2, name: 'Jeff'} ``` #### Data change without mutation ```javascript -var player = {score: 1} -player = {...player, score: 2} // new object not mutated {score: 2} +var player = {score: 1, name: 'Jeff'}; + +var newPlayer = Object.assign({}, player, {score: 2}); +// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'} + +// Or if you are using object spread, you can write: +// var newPlayer = {score: 2, ...player}; ``` The end result is the same but by not mutating (or changing the underlying data) directly we now have an added benefit that can help us increase component and overall application performance.