Merge pull request #132 from odsantos/fix-advanced-functions

Update 06-rest-parameters

Author: odsantos

1-js/06-advanced-functions/02-rest-parameters-spread-operator/article.md renamed to 1-js/06-advanced-functions/02-rest-parameters-spread/article.md

@@ -1,4 +1,4 @@
-# Rest parameters and spread operator
+# Rest parameters and spread syntax
 
 Many JavaScript built-in functions support an arbitrary number of arguments.
 
@@ -8,7 +8,7 @@ For instance:
 - `Object.assign(dest, src1, ..., srcN)` -- copies properties from `src1..N` into `dest`.
 - ...and so on.
 
-In this chapter we'll learn how to do the same. And, more importantly, how to feel comfortable working with such functions and arrays.
+In this chapter we'll learn how to do the same. And also, how to pass arrays to such functions as parameters.
 
 ## Rest parameters `...`
 
@@ -25,7 +25,7 @@ alert( sum(1, 2, 3, 4, 5) );
 
 There will be no error because of "excessive" arguments. But of course in the result only the first two will be counted.
 
-The rest parameters can be mentioned in a function definition with three dots `...`. They literally mean "gather the remaining parameters into an array".
+The rest of the parameters can be included in the function definition by using three dots `...` followed by the name of the array that will contain them. The dots literally mean "gather the remaining parameters into an array".
 
 For instance, to gather all arguments into array `args`:
 
@@ -96,9 +96,7 @@ showName("Julius", "Caesar");
 showName("Ilya");
 ```
 
-In old times, rest parameters did not exist in the language, and using `arguments` was the only way to get all arguments of the function, no matter their total number.
-
-And it still works, we can use it today.
+In old times, rest parameters did not exist in the language, and using `arguments` was the only way to get all arguments of the function. And it still works, we can find it in the old code.
 
 But the downside is that although `arguments` is both array-like and iterable, it's not an array. It does not support array methods, so we can't call `arguments.map(...)` for example.
 
@@ -119,11 +117,12 @@ function f() {
 
 f(1); // 1
 ```
-````
 
 As we remember, arrow functions don't have their own `this`. Now we know they don't have the special `arguments` object either.
+````
 
-## Spread operator [#spread-operator]
+
+## Spread syntax [#spread-syntax]
 
 We've just seen how to get an array from the list of parameters.
 
@@ -149,7 +148,7 @@ alert( Math.max(arr) ); // NaN
 
 And surely we can't manually list items in the code `Math.max(arr[0], arr[1], arr[2])`, because we may be unsure how many there are. As our script executes, there could be a lot, or there could be none. And that would get ugly.
 
-*Spread operator* to the rescue! It looks similar to rest parameters, also using `...`, but does quite the opposite.
+*Spread syntax* to the rescue! It looks similar to rest parameters, also using `...`, but does quite the opposite.
 
 When `...arr` is used in the function call, it "expands" an iterable object `arr` into the list of arguments.
 
@@ -170,7 +169,7 @@ let arr2 = [8, 3, -8, 1];
 alert( Math.max(...arr1, ...arr2) ); // 8
 ```
 
-We can even combine the spread operator with normal values:
+We can even combine the spread syntax with normal values:
 
 
 ```js run
@@ -180,7 +179,7 @@ let arr2 = [8, 3, -8, 1];
 alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25
 ```
 
-Also, the spread operator can be used to merge arrays:
+Also, the spread syntax can be used to merge arrays:
 
 ```js run
 let arr = [3, 5, 1];
@@ -193,17 +192,17 @@ let merged = [0, ...arr, 2, ...arr2];
 alert(merged); // 0,3,5,1,2,8,9,15 (0, then arr, then 2, then arr2)
 ```
 
-In the examples above we used an array to demonstrate the spread operator, but any iterable will do.
+In the examples above we used an array to demonstrate the spread syntax, but any iterable will do.
 
-For instance, here we use the spread operator to turn the string into array of characters:
+For instance, here we use the spread syntax to turn the string into array of characters:
 
 ```js run
 let str = "Hello";
 
 alert( [...str] ); // H,e,l,l,o
 ```
 
-The spread operator internally uses iterators to gather elements, the same way as `for..of` does.
+The spread syntax internally uses iterators to gather elements, the same way as `for..of` does.
 
 So, for a string, `for..of` returns characters and `...str` becomes `"H","e","l","l","o"`. The list of characters is passed to array initializer `[...str]`.
 
@@ -221,24 +220,69 @@ The result is the same as `[...str]`.
 But there's a subtle difference between `Array.from(obj)` and `[...obj]`:
 
 - `Array.from` operates on both array-likes and iterables.
-- The spread operator operates only on iterables.
+- The spread syntax works only with iterables.
 
 So, for the task of turning something into an array, `Array.from` tends to be more universal.
 
 
+## Get a new copy of an array/object
+
+Remember when we talked about `Object.assign()` [in the past](https://javascript.info/object#cloning-and-merging-object-assign)?
+
+It is possible to do the same thing with the spread syntax.
+
+```js run
+let arr = [1, 2, 3];
+let arrCopy = [...arr]; // spread the array into a list of parameters
+                        // then put the result into a new array
+
+// do the arrays have the same contents?
+alert(JSON.stringify(arr) === JSON.stringify(arrCopy)); // true
+
+// are the arrays equal?
+alert(arr === arrCopy); // false (not same reference)
+
+// modifying our initial array does not modify the copy:
+arr.push(4);
+alert(arr); // 1, 2, 3, 4
+alert(arrCopy); // 1, 2, 3
+```
+
+Note that it is possible to do the same thing to make a copy of an object:
+
+```js run
+let obj = { a: 1, b: 2, c: 3 };
+let objCopy = { ...obj }; // spread the object into a list of parameters
+                          // then return the result in a new object
+
+// do the objects have the same contents?
+alert(JSON.stringify(obj) === JSON.stringify(objCopy)); // true
+
+// are the objects equal?
+alert(obj === objCopy); // false (not same reference)
+
+// modifying our initial object does not modify the copy:
+obj.d = 4;
+alert(JSON.stringify(obj)); // {"a":1,"b":2,"c":3,"d":4}
+alert(JSON.stringify(objCopy)); // {"a":1,"b":2,"c":3}
+```
+
+This way of copying an object is much shorter than `let objCopy = Object.assign({}, obj);` or for an array `let arrCopy = Object.assign([], arr);` so we prefer to use it whenever we can.
+
+
 ## Summary
 
-When we see `"..."` in the code, it is either rest parameters or the spread operator.
+When we see `"..."` in the code, it is either rest parameters or the spread syntax.
 
 There's an easy way to distinguish between them:
 
 - When `...` is at the end of function parameters, it's "rest parameters" and gathers the rest of the list of arguments into an array.
-- When `...` occurs in a function call or alike, it's called a "spread operator" and expands an array into a list.
+- When `...` occurs in a function call or alike, it's called a "spread syntax" and expands an array into a list.
 
 Use patterns:
 
 - Rest parameters are used to create functions that accept any number of arguments.
-- The spread operator is used to pass an array to functions that normally require a list of many arguments.
+- The spread syntax is used to pass an array to functions that normally require a list of many arguments.
 
 Together they help to travel between a list and an array of parameters with ease.