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

Author: mehradsadeghi

1-js/02-first-steps/13-switch/article.md

@@ -117,7 +117,7 @@ Several variants of `case` which share the same code can be grouped.
 For example, if we want the same code to run for `case 3` and `case 5`:
 
 ```js run no-beautify
-let a = 2 + 2;
+let a = 3;
 
 switch (a) {
   case 4:

1-js/04-object-basics/04-object-methods/2-check-syntax/solution.md

@@ -34,4 +34,4 @@ let user = {
 (user.go)() // John
 ```
 
-Please note that brackets around `(user.go)` do nothing here. Usually they setup the order of operations, but here the dot `.` works first anyway, so there's no effect. Only the semicolon thing matters.
+Please note that parentheses around `(user.go)` do nothing here. Usually they setup the order of operations, but here the dot `.` works first anyway, so there's no effect. Only the semicolon thing matters.

1-js/04-object-basics/04-object-methods/3-why-this/solution.md

@@ -3,7 +3,7 @@ Here's the explanations.
 
 1. That's a regular object method call.
 
-2. The same, brackets do not change the order of operations here, the dot is first anyway.
+2. The same, parentheses do not change the order of operations here, the dot is first anyway.
 
 3. Here we have a more complex call `(expression).method()`. The call works as if it were split into two lines:
 

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

@@ -227,11 +227,11 @@ So, for the task of turning something into an array, `Array.from` tends to be mo
 
 ## 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)?
+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 operator!
 
-```
+```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
@@ -250,7 +250,7 @@ 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

1-js/09-classes/01-class/article.md

@@ -298,13 +298,17 @@ class User {
 new User().sayHi();
 ```
 
-## Class properties
+## Class fields
 
 ```warn header="Old browsers may need a polyfill"
-Class-level properties are a recent addition to the language.
+Class fields are a recent addition to the language.
 ```
 
-In the example above, `User` only had methods. Let's add a property:
+Previously, classes only had methods.
+
+"Class fields" is a syntax that allows to add any properties.
+
+For instance, let's add `name` property to `class User`:
 
 ```js run
 class User {
@@ -323,7 +327,86 @@ alert(User.prototype.sayHi); // placed in User.prototype
 alert(User.prototype.name); // undefined, not placed in User.prototype
 ```
 
-The property `name` is not placed into `User.prototype`. Instead, it is created by `new` before calling the constructor, it's a property of the object itself.
+The important thing about class fields is that they are set on individual objects, not `User.prototype`.
+
+Technically, they are processed after the constructor has done it's job.
+
+### Making bound methods with class fields
+
+As demonstrated in the chapter <info:bind> functions in JavaScript have a dynamic `this`. It depends on the context of the call.
+
+So if an object method is passed around and called in another context, `this` won't be a reference to its object any more.
+
+For instance, this code will show `undefined`:
+
+```js run
+class Button {
+  constructor(value) {
+    this.value = value;
+  }
+
+  click() {
+    alert(this.value);
+  }
+}
+
+let button = new Button("hello");
+
+*!*
+setTimeout(button.click, 1000); // undefined
+*/!*
+```
+
+The problem is called "losing `this`".
+
+There are two approaches to fixing it, as discussed in the chapter <info:bind>:
+
+1. Pass a wrapper-function, such as `setTimeout(() => button.click(), 1000)`.
+2. Bind the method to object, e.g. in the constructor:
+
+```js run
+class Button {
+  constructor(value) {
+    this.value = value;
+*!*
+    this.click = this.click.bind(this);
+*/!*
+  }
+
+  click() {
+    alert(this.value);
+  }
+}
+
+let button = new Button("hello");
+
+*!*
+setTimeout(button.click, 1000); // hello
+*/!*
+```
+
+Class fields provide a more elegant syntax for the latter solution:
+
+```js run
+class Button {
+  constructor(value) {
+    this.value = value;
+  }
+*!*
+  click = () => {
+    alert(this.value);
+  }
+*/!*
+}
+
+let button = new Button("hello");
+
+setTimeout(button.click, 1000); // hello
+```
+
+The class field `click = () => {...}` creates an independent function on each `Button` object, with `this` bound to the object. Then we can pass `button.click` around anywhere, and it will be called with the right `this`.
+
+That's especially useful in browser environment, when we need to setup a method as an event listener.
 
 ## Summary
 

1-js/99-js-misc/03-currying-partials/article.md

@@ -39,7 +39,7 @@ alert( curriedSum(1)(2) ); // 3
 As you can see, the implementation is straightforward: it's just two wrappers.
 
 - The result of `curry(func)` is a wrapper `function(a)`.
-- When it is called like `sum(1)`, the argument is saved in the Lexical Environment, and a new wrapper is returned `function(b)`.
+- When it is called like `curriedSum(1)`, the argument is saved in the Lexical Environment, and a new wrapper is returned `function(b)`.
 - Then this wrapper is called with `2` as an argument, and it passes the call to the original `sum`.
 
 More advanced implementations of currying, such as [_.curry](https://lodash.com/docs#curry) from lodash library, return a wrapper that allows a function to be called both normally and partially:

2-ui/4-forms-controls/1-form-elements/article.md

@@ -125,8 +125,7 @@ That's usually not a problem, because we rarely change names of form elements.
 
 ## Backreference: element.form
 
-For any element, the form is available as `element.form`. So a form references all elements, and elements
-reference the form.
+For any element, the form is available as `element.form`. So a form references all elements, and elements reference the form.
 
 Here's the picture:
 

2-ui/5-loading/03-onload-onerror/article.md

@@ -169,7 +169,7 @@ There are three levels of cross-origin access:
 
 1. **No `crossorigin` attribute** -- access prohibited.
 2. **`crossorigin="anonymous"`** -- access allowed if the server responds with the header `Access-Control-Allow-Origin` with `*` or our origin. Browser does not send authorization information and cookies to remote server.
-3. **`crossorigin="use-credentials"`** -- access allowed if the server sends back the header `Access-Control-Allow-Origin` with our origin and `Access-Control-Allow-Credentials: true`.  Browser sends authorization information and cookies to remote server.
+3. **`crossorigin="use-credentials"`** -- access allowed if the server sends back the header `Access-Control-Allow-Origin` with our origin and `Access-Control-Allow-Credentials: true`. Browser sends authorization information and cookies to remote server.
 
 ```smart
 You can read more about cross-origin access in the chapter <info:fetch-crossorigin>. It describes the `fetch` method for network requests, but the policy is exactly the same.

9-regular-expressions/14-regexp-lookahead-lookbehind/article.md

@@ -26,10 +26,10 @@ More complex tests are possible, e.g. `pattern:X(?=Y)(?=Z)` means:
 
 1. Find `pattern:X`.
 2. Check if `pattern:Y` is immediately after `pattern:X` (skip if isn't).
-3. Check if `pattern:Z` is immediately after `pattern:Y` (skip if isn't).
-4. If both tests passed, then it's the match.
+3. Check if `pattern:Z` is also immediately after `pattern:X` (skip if isn't).
+4. If both tests passed, then the `pattern:X` is a match, otherwise continue searching.
 
-In other words, such pattern means that we're looking for `pattern:X` followed by   `pattern:Y` and `pattern:Z` at the same time.
+In other words, such pattern means that we're looking for `pattern:X` followed by `pattern:Y` and `pattern:Z` at the same time.
 
 That's only possible if patterns `pattern:Y` and `pattern:Z` aren't mutually exclusive.