Merge branch 'master' of github.com:javascript-tutorial/en.javascript.info into sync-62299ed8

Author: iliakan

1-js/02-first-steps/01-hello-world/article.md

@@ -46,7 +46,7 @@ The `<script>` tag contains JavaScript code which is automatically executed when
 The `<script>` tag has a few attributes that are rarely used nowadays but can still be found in old code:
 
 The `type` attribute: <code>&lt;script <u>type</u>=...&gt;</code>
-: The old HTML standard, HTML4, required a script to have a `type`. Usually it was `type="text/javascript"`. It's not required anymore. Also, the modern HTML standard totally changed the meaning of this attribute. Now, it can be used for JavaScript modules. But that's an advanced topic; we'll talk about modules in another part of the tutorial.
+: The old HTML standard, HTML4, required a script to have a `type`. Usually it was `type="text/javascript"`. It's not required anymore. Also, the modern HTML standard totally changed the meaning of this attribute. Now, it can be used for JavaScript modules. But that's an advanced topic, we'll talk about modules in another part of the tutorial.
 
 The `language` attribute: <code>&lt;script <u>language</u>=...&gt;</code>
 : This attribute was meant to show the language of the script. This attribute no longer makes sense because JavaScript is the default language. There is no need to use it.

1-js/04-object-basics/01-object/article.md

@@ -103,7 +103,7 @@ user.likes birds = true
 
 JavaScript doesn't understand that. It thinks that we address `user.likes`, and then gives a syntax error when comes across unexpected `birds`.
 
-The dot requires the key to be a valid variable identifier. That implies: contains no spaces, doesn't start with a digit and doesn't include special characters (`$` и `_` are allowed).
+The dot requires the key to be a valid variable identifier. That implies: contains no spaces, doesn't start with a digit and doesn't include special characters (`$` and `_` are allowed).
 
 There's an alternative "square bracket notation" that works with any string:
 

1-js/05-data-types/02-number/article.md

@@ -324,7 +324,7 @@ Please note that an empty or a space-only string is treated as `0` in all numeri
 
 ```smart header="Compare with `Object.is`"
 
-There is a special built-in method [Object.is](mdn:js/Object/is) that compares values like `===`, but is more reliable for two edge cases:
+There is a special built-in method [`Object.is`](mdn:js/Object/is) that compares values like `===`, but is more reliable for two edge cases:
 
 1. It works with `NaN`: `Object.is(NaN, NaN) === true`, that's a good thing.
 2. Values `0` and `-0` are different: `Object.is(0, -0) === false`, technically that's true, because internally the number has a sign bit that may be different even if all other bits are zeroes.
@@ -417,7 +417,7 @@ To write numbers with many zeroes:
 
 For different numeral systems:
 
-- Can write numbers directly in hex (`0x`), octal (`0o`) and binary (`0b`) systems
+- Can write numbers directly in hex (`0x`), octal (`0o`) and binary (`0b`) systems.
 - `parseInt(str, base)` parses the string `str` into an integer in numeral system with given `base`, `2 ≤ base ≤ 36`.
 - `num.toString(base)` converts a number to a string in the numeral system with the given `base`.
 

1-js/06-advanced-functions/01-recursion/article.md

@@ -462,7 +462,7 @@ list.next.next.next = { value: 4 };
 list.next.next.next.next = null;
 ```
 
-Here we can even more clearer see that there are multiple objects, each one has the `value` and `next` pointing to the neighbour. The `list` variable is the first object in the chain, so following `next` pointers from it we can reach any element.
+Here we can even more clearly see that there are multiple objects, each one has the `value` and `next` pointing to the neighbour. The `list` variable is the first object in the chain, so following `next` pointers from it we can reach any element.
 
 The list can be easily split into multiple parts and later joined back:
 

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

@@ -225,6 +225,51 @@ But there's a subtle difference between `Array.from(obj)` and `[...obj]`:
 So, for the task of turning something into an array, `Array.from` tends to be more universal.
 
 
+## Get a new copy of an object/array
+
+Remember when we talked about `Object.assign()` [in the past](https://javascript.info/symbol#symbols-are-skipped-by-for-in)?
+
+It is possible to do the same thing with the spread operator!
+
+```
+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:
+
+```
+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 syntax.

1-js/06-advanced-functions/03-closure/article.md

@@ -200,7 +200,7 @@ Rectangles on the right-hand side demonstrate how the global Lexical Environment
 >>>>>>> a0bfa924a17cad8e7fee213904b27dbf57c2dbac
 =======
 1. When the script starts, the Lexical Environment is pre-populated with all declared variables.
-    - Initially, they are in the "Uninitialized" state. That's a special internal state, it means that the engine knows about the variable, but won't allow to use it before `let`. It's almost the same as if the variable didn't exist.
+    - Initially, they are in the "Uninitialized" state. That's a special internal state, it means that the engine knows about the variable, but it cannot be referenced until it has been declared with `let`. It's almost the same as if the variable didn't exist.
 2. Then `let phrase` definition appears. There's no assignment yet, so its value is `undefined`. We can use the variable since this moment.
 3. `phrase` is assigned a value.
 4. `phrase` changes the value.

1-js/08-prototypes/04-prototype-methods/article.md

@@ -65,7 +65,7 @@ This call makes a truly exact copy of `obj`, including all properties: enumerabl
 
 ## Brief history
 
-If we count all the ways to manage `[[Prototype]]`, there are a lot! Many ways to do the same!
+If we count all the ways to manage `[[Prototype]]`, there are a lot! Many ways to do the same thing!
 
 Why?
 

2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md

@@ -1,6 +1,6 @@
 # Outer corners
 
-Outer corners are basically what we get from  [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
+Outer corners are basically what we get from [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
 
 Coordinates of the upper-left corner `answer1` and the bottom-right corner `answer2`:
 

2-ui/2-events/02-bubbling-and-capturing/article.md

@@ -204,7 +204,7 @@ elem.addEventListener("click", e => alert(2));
 
 When an event happens -- the most nested element where it happens gets labeled as the "target element" (`event.target`).
 
-- Then the event moves down from the document root to `event.target`, calling handlers assigned with `addEventListener(...., true)` on the way (`true` is a shorthand for `{capture: true}`).
+- Then the event moves down from the document root to `event.target`, calling handlers assigned with `addEventListener(..., true)` on the way (`true` is a shorthand for `{capture: true}`).
 - Then handlers are called on the target element itself.
 - Then the event bubbles up from `event.target` up to the root, calling handlers assigned using `on<event>` and `addEventListener` without the 3rd argument or with the 3rd argument `false/{capture:false}`.
 

2-ui/2-events/04-default-browser-action/article.md

@@ -113,7 +113,7 @@ The property `event.defaultPrevented` is `true` if the default action was preven
 
 There's an interesting use case for it.
 
-You remember in the chapter <info:bubbling-and-capturing> we talked about `event.stopPropagation()`  and why stopping bubbling is bad?
+You remember in the chapter <info:bubbling-and-capturing> we talked about `event.stopPropagation()` and why stopping bubbling is bad?
 
 Sometimes we can use `event.defaultPrevented` instead, to signal other event handlers that the event was handled.