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

Author: iliakan

Diff for: 1-js/04-object-basics/02-garbage-collection/article.md

@@ -156,7 +156,7 @@ The following "garbage collection" steps are regularly performed:
 - The garbage collector takes roots and "marks" (remembers) them.
 - Then it visits and "marks" all references from them.
 - Then it visits marked objects and marks *their* references. All visited objects are remembered, so as not to visit the same object twice in the future.
-- ...And so on until there are unvisited references (reachable from the roots).
+- ...And so on until every reachable (from the roots) references are visited.
 - All objects except marked ones are removed.
 
 For instance, let our object structure look like this:
@@ -181,17 +181,17 @@ Now the objects that could not be visited in the process are considered unreacha
 
 ![](garbage-collection-5.svg)
 
-That's the concept of how garbage collection works.
+We can also imagine the process as spilling a huge bucket of paint from the roots, that flows through all references and marks all reachable objects. The unmarked ones are then removed.
 
-JavaScript engines apply many optimizations to make it run faster and not affect the execution.
+That's the concept of how garbage collection works. JavaScript engines apply many optimizations to make it run faster and not affect the execution.
 
 Some of the optimizations:
 
 - **Generational collection** -- objects are split into two sets: "new ones" and "old ones". Many  objects appear, do their job and die fast, they can be cleaned up aggressively. Those that survive for long enough, become "old" and are examined less often.
 - **Incremental collection** -- if there are many objects, and we try to walk and mark the whole object set at once, it may take some time and introduce visible delays in the execution. So the engine tries to split the garbage collection into pieces. Then the pieces are executed one by one, separately. That requires some extra bookkeeping between them to track changes, but we have many tiny delays instead of a big one.
 - **Idle-time collection** -- the garbage collector tries to run only while the CPU is idle, to reduce the possible effect on the execution.
 
-There are other optimizations and flavours of garbage collection algorithms. As much as I'd like to describe them here, I have to hold off, because different engines implement different tweaks and techniques. And, what's even more important, things change as engines develop, so going deeper "in advance", without a real need is probably not worth that. Unless, of course, it is a matter of pure interest, then there will be some links for you below.
+There exist other optimizations and flavours of garbage collection algorithms. As much as I'd like to describe them here, I have to hold off, because different engines implement different tweaks and techniques. And, what's even more important, things change as engines develop, so studying deeper "in advance", without a real need is probably not worth that. Unless, of course, it is a matter of pure interest, then there will be some links for you below.
 
 ## Summary
 

Diff for: 1-js/05-data-types/09-keys-values-entries/article.md

@@ -99,6 +99,4 @@ let doublePrices = Object.fromEntries(
 alert(doublePrices.meat); // 8
 ```   
 
-It may look difficult from the first sight, but becomes easy to understand after you use it once or twice.
-
-We can make powerful one-liners for more complex transforms this way. It's only important to keep balance, so that the code is still simple enough to understand it.
+It may look difficult from the first sight, but becomes easy to understand after you use it once or twice. We can make powerful chains of transforms this way. 

Diff for: 1-js/05-data-types/10-destructuring-assignment/article.md

@@ -356,7 +356,7 @@ The problem is that JavaScript treats `{...}` in the main code flow (not inside
 }
 ```
 
-So here JavaScript assumes that we have a code block, that's why there's an error. We have destructuring instead.
+So here JavaScript assumes that we have a code block, that's why there's an error. We want destructuring instead.
 
 To show JavaScript that it's not a code block, we can wrap the expression in parentheses `(...)`:
 

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

@@ -185,7 +185,13 @@ Here's the context stack when we entered the subcall `pow(2, 2)`:
 
 The new current execution context is on top (and bold), and previous remembered contexts are below.
 
-When we finish the subcall -- it is easy to resume the previous context, because it keeps both variables and the exact place of the code where it stopped. Here in the picture we use the word "line", but of course it's more precise.
+When we finish the subcall -- it is easy to resume the previous context, because it keeps both variables and the exact place of the code where it stopped.
+
+```smart
+Here in the picture we use the word "line", as our example there's only one subcall in line, but generally a single line of code may contain multiple subcalls, like `pow(…) + pow(…) + somethingElse(…)`.
+
+So it would be more precise to say that the execution resumes "immediately after the subcall".
+```
 
 ### pow(2, 1)
 

Diff for: 1-js/08-prototypes/01-prototype-inheritance/article.md

@@ -43,7 +43,7 @@ If we look for a property in `rabbit`, and it's missing, JavaScript automaticall
 
 For instance:
 
-```js run
+```js
 let animal = {
   eats: true
 };

Diff for: 1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/solution.md

@@ -15,3 +15,27 @@ function f(a, b) {
 
 f.defer(1000)(1, 2); // shows 3 after 1 sec
 ```
+
+Please note: we use `this` in `f.apply` to make our decoration work for object methods.
+
+So if the wrapper function is called as an object method, then `this` is passed to the original method `f`.
+
+```js run
+Function.prototype.defer = function(ms) {
+  let f = this;
+  return function(...args) {
+    setTimeout(() => f.apply(this, args), ms);
+  }
+};
+
+let user = {
+  name: "John",
+  sayHi() {
+    alert(this.name);
+  }
+}
+
+user.sayHi = user.sayHi.defer(1000);
+
+user.sayHi();
+```

Diff for: 1-js/08-prototypes/03-native-prototypes/article.md

@@ -193,4 +193,4 @@ Borrowing methods is flexible, it allows to mix functionality from different obj
     - The methods are stored in the prototype (`Array.prototype`, `Object.prototype`, `Date.prototype` etc).
     - The object itself stores only the data (array items, object properties, the date).
 - Primitives also store methods in prototypes of wrapper objects: `Number.prototype`, `String.prototype`, `Boolean.prototype`. Only `undefined` and `null` do not have wrapper objects.
-- Built-in prototypes can be modified or populated with new methods. But it's not recommended to change them. Probably the only allowable cause is when we add-in a new standard, but not yet supported by the engine JavaScript method.
+- Built-in prototypes can be modified or populated with new methods. But it's not recommended to change them. Probably the only allowable case is when we add-in a new standard, but not yet supported by the engine JavaScript method.

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

@@ -28,7 +28,7 @@ let rabbit = Object.create(animal);
 alert(rabbit.eats); // true
 
 *!*
-alert(Object.getPrototypeOf(rabbit) === animal); // get the prototype of rabbit
+alert(Object.getPrototypeOf(rabbit) === animal); // true
 */!*
 
 *!*
@@ -71,9 +71,9 @@ Why so?
 
 That's for historical reasons.
 
-- The `"prototype"` property of a constructor function works since very ancient times.
-- Later, in the year 2012: `Object.create` appeared in the standard. It gave the ability to create objects with a given prototype, but did not provide the ability to get/set it. So browsers implemented the non-standard `__proto__` accessor that allowed the user to get/set a prototype at any time.
-- Later, in the year 2015: `Object.setPrototypeOf` and `Object.getPrototypeOf` were added to the standard, to perform the same functionality as `__proto__`. As `__proto__` was de-facto implemented everywhere, it was kind-of deprecated and made its way to the Annex B of the standard, that is: optional for non-browser environments.
+- The `"prototype"` property of a constructor function has worked since very ancient times.
+- Later, in the year 2012, `Object.create` appeared in the standard. It gave the ability to create objects with a given prototype, but did not provide the ability to get/set it. So browsers implemented the non-standard `__proto__` accessor that allowed the user to get/set a prototype at any time.
+- Later, in the year 2015, `Object.setPrototypeOf` and `Object.getPrototypeOf` were added to the standard, to perform the same functionality as `__proto__`. As `__proto__` was de-facto implemented everywhere, it was kind-of deprecated and made its way to the Annex B of the standard, that is: optional for non-browser environments.
 
 As of now we have all these ways at our disposal.
 

Diff for: 1-js/09-classes/01-class/article.md

@@ -89,7 +89,7 @@ What `class User {...}` construct really does is:
 1. Creates a function named `User`, that becomes the result of the class declaration. The function code is taken from the `constructor` method (assumed empty if we don't write such method).
 2. Stores class methods, such as `sayHi`, in `User.prototype`.
 
-Afterwards, for `new User` objects, when we call a method, it's taken from the prototype, just as described in the chapter <info:function-prototype>. So the object has access to class methods.
+After `new User` object is created, when we call its method, it's taken from the prototype, just as described in the chapter <info:function-prototype>. So the object has access to class methods.
 
 We can illustrate the result of `class User` declaration as:
 
@@ -142,11 +142,11 @@ user.sayHi();
 
 The result of this definition is about the same. So, there are indeed reasons why `class` can be considered a syntax sugar to define a constructor together with its prototype methods.
 
-Although, there are important differences.
+Still, there are important differences.
 
 1. First, a function created by `class` is labelled by a special internal property `[[FunctionKind]]:"classConstructor"`. So it's not entirely the same as creating it manually.
 
-    Unlike a regular function, a class constructor must be called with `new`:
+    And unlike a regular function, a class constructor must be called with `new`:
 
     ```js run
     class User {

Diff for: 1-js/09-classes/02-class-inheritance/article.md

@@ -131,7 +131,7 @@ class Rabbit extends Animal {
 }
 ```
 
-...But usually we don't want to totally replace a parent method, but rather to build on top of it, tweak or extend its functionality. We do something in our method, but call the parent method before/after it or in the process.
+...But usually we don't want to totally replace a parent method, but rather to build on top of it to tweak or extend its functionality. We do something in our method, but call the parent method before/after it or in the process.
 
 Classes provide `"super"` keyword for that.
 

Diff for: 1-js/09-classes/03-static-properties-methods/article.md

@@ -192,7 +192,7 @@ class Rabbit extends Animal {}
 alert(Rabbit.__proto__ === Animal); // true
 
 // for regular methods
-alert(Rabbit.prototype.__proto__ === Animal.prototype);
+alert(Rabbit.prototype.__proto__ === Animal.prototype); // true
 ```
 
 ## Summary

Diff for: 1-js/09-classes/05-extend-natives/article.md

@@ -21,7 +21,7 @@ alert(filteredArr); // 10, 50
 alert(filteredArr.isEmpty()); // false
 ```
 
-Please note a very interesting thing. Built-in methods like `filter`, `map` and others -- return new objects of exactly the inherited type `PowerArray`. Their internal implementation uses object `constructor` property for that.
+Please note a very interesting thing. Built-in methods like `filter`, `map` and others -- return new objects of exactly the inherited type `PowerArray`. Their internal implementation uses the object's `constructor` property for that.
 
 In the example above,
 ```js
@@ -74,7 +74,7 @@ Built-in objects have their own static methods, for instance `Object.keys`, `Arr
 
 As we already know, native classes extend each other. For instance, `Array` extends `Object`.
 
-Normally, when one class extends another, both static and non-static methods are inherited. That was thoroughly explained in the chapter [](info:static-properties-methods#statics-and-inheritance).
+Normally, when one class extends another, both static and non-static methods are inherited. That was thoroughly explained in the article [](info:static-properties-methods#statics-and-inheritance).
 
 But built-in classes are an exception. They don't inherit statics from each other.
 

Diff for: 1-js/12-generators-iterators/1-generators/article.md

@@ -239,8 +239,8 @@ function* generateSequence(start, end) {
 
 Now we'd like to reuse it for generation of a more complex sequence:
 - first, digits `0..9` (with character codes 48..57),
-- followed by alphabet letters `A..Z` (character codes 65..90)
-- followed by uppercased letters `a..z` (character codes 97..122)
+- followed by uppercase alphabet letters `A..Z` (character codes 65..90)
+- followed by lowercase alphabet letters `a..z` (character codes 97..122)
 
 We can use this sequence e.g. to create passwords by selecting characters from it (could add syntax characters as well), but let's generate it first.
 

Diff for: 1-js/12-generators-iterators/2-async-iterators-generators/article.md

@@ -72,7 +72,7 @@ let range = {
       current: this.from,
       last: this.to,
 
-      // next() is called on each iteration by the for..of loop
+      // next() is called on each iteration by the for await..of loop
 *!*
       async next() { // (2)
         // it should return the value as an object {done:.., value :...}
@@ -183,7 +183,7 @@ Now we have the async generator, iterable with `for await...of`.
 
 It's indeed very simple. We add the `async` keyword, and the generator now can use `await` inside of it, rely on promises and other async functions.
 
-Technically, another the difference of an async generator is that its `generator.next()` method is now asynchronous also, it returns promises.
+Technically, another difference of an async generator is that its `generator.next()` method is now asynchronous also, it returns promises.
 
 In a regular generator we'd use `result = generator.next()` to get values. In an async generator, we should add `await`, like this:
 
@@ -265,15 +265,15 @@ Now values come with a delay of 1 second between them.
 
 So far we've seen simple examples, to gain basic understanding. Now let's review a real-life use case.
 
-There are many online services that deliver paginated data. For instance, when we need a list of users, a request returns a pre-defined count (e.g. 100 users) - "one page", and provides an URL to the next page.
+There are many online services that deliver paginated data. For instance, when we need a list of users, a request returns a pre-defined count (e.g. 100 users) - "one page", and provides a URL to the next page.
 
 The pattern is very common, it's not about users, but just about anything. For instance, GitHub allows to retrieve commits in the same, paginated fashion:
 
 - We should make a request to URL in the form `https://api.github.com/repos/<repo>/commits`.
 - It responds with a JSON of 30 commits, and also provides a link to the next page in the `Link` header.
 - Then we can use that link for the next request, to get more commits, and so on.
 
-But we'd like to have is a simpler API: an iterable object with commits, so that we could go over them like this:
+But we'd like to have a simpler API: an iterable object with commits, so that we could go over them like this:
 
 ```js
 let repo = 'javascript-tutorial/en.javascript.info'; // GitHub repository to get commits from

Diff for: 2-ui/1-document/01-browser-environment/article.md

@@ -1,6 +1,6 @@
 # Browser environment, specs
 
-The JavaScript language was initially created for web browsers. Since then, it has evolved and become a language with many uses and platforms.
+The JavaScript language was initially created for web browsers. Since then it has evolved and become a language with many uses and platforms.
 
 A platform may be a browser, or a web-server or another *host*, even a coffee machine. Each of them provides platform-specific functionality. The JavaScript specification calls that a *host environment*.
 
@@ -60,14 +60,14 @@ For instance, server-side scripts that download HTML pages and process them can
 ```
 
 ```smart header="CSSOM for styling"
-CSS rules and stylesheets are structured in a different way than HTML. There's a separate specification [CSSOM](https://www.w3.org/TR/cssom-1/) that explains how they are represented as objects, and how to read and write them.
+CSS rules and stylesheets are structured in a different way than HTML. There's a separate specification, [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/), that explains how they are represented as objects, and how to read and write them.
 
 CSSOM is used together with DOM when we modify style rules for the document. In practice though, CSSOM is rarely required, because usually CSS rules are static. We rarely need to add/remove CSS rules from JavaScript, but that's also possible.
 ```
 
-## BOM (Browser object model)
+## BOM (Browser Object Model)
 
-Browser Object Model (BOM) are additional objects provided by the browser (host environment) to work with everything except the document.
+The Browser Object Model (BOM) represents additional objects provided by the browser (host environment) for working with everything except the document.
 
 For instance: