Skip to content

Commit 6cbdf90

Browse files
devtancKevin Lacker
authored andcommitted
Remove spread operator (facebook#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
1 parent aca2e04 commit 6cbdf90

File tree

1 file changed

+11
-5
lines changed

1 file changed

+11
-5
lines changed

docs/tutorial/tutorial.md

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -209,18 +209,24 @@ Square no longer keeps its own state; it receives its value from its parent `Boa
209209

210210
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.
211211

212-
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.
212+
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.
213213

214214
#### Data change with mutation
215215
```javascript
216-
var player = {score: 1}
217-
player.score = 2 // same object mutated {score: 2}
216+
var player = {score: 1, name: 'Jeff'};
217+
player.score = 2;
218+
// Now player is {score: 2, name: 'Jeff'}
218219
```
219220

220221
#### Data change without mutation
221222
```javascript
222-
var player = {score: 1}
223-
player = {...player, score: 2} // new object not mutated {score: 2}
223+
var player = {score: 1, name: 'Jeff'};
224+
225+
var newPlayer = Object.assign({}, player, {score: 2});
226+
// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}
227+
228+
// Or if you are using object spread, you can write:
229+
// var newPlayer = {score: 2, ...player};
224230
```
225231

226232
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.

0 commit comments

Comments
 (0)