`, the browser detects the invalid DOM structure and "fixes" it, adds `` around. That's not what we want. On the other hand, `` keeps exactly what we place there.
+
+We can put styles and scripts into `` as well:
+
+```html
+
+
+
+
+```
+
+The browser considers `` content "out of the document": styles are not applied, scripts are not executed, `
/* ... */ it won't execute.
+The content of comments is ignored, so if we put code inside /* ... */, it won't execute.
-Sometimes it comes in handy to temporarily disable a part of code:
+Sometimes it can be handy to temporarily disable a part of code:
```js run
/* Commenting out the code
@@ -136,7 +136,7 @@ alert('World');
```
```smart header="Use hotkeys!"
-In most editors a line of code can be commented out by `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey). For Mac try `key:Cmd` instead of `key:Ctrl`.
+In most editors, a line of code can be commented out by pressing the `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey). For Mac, try `key:Cmd` instead of `key:Ctrl`.
```
````warn header="Nested comments are not supported!"
@@ -154,6 +154,6 @@ alert( 'World' );
Please, don't hesitate to comment your code.
-Comments increase the overall code footprint, but that's not a problem at all. There are many tools which minify the code before publishing to the production server. They remove comments, so they don't appear in the working scripts. Therefore comments do not have any negative effects on production at all.
+Comments increase the overall code footprint, but that's not a problem at all. There are many tools which minify code before publishing to a production server. They remove comments, so they don't appear in the working scripts. Therefore, comments do not have negative effects on production at all.
-Further in the tutorial there will be a chapter true and false | `1` and `0` |
-| `string` | Whitespaces from the start and the end are removed. Then, if the remaining string is empty, the result is `0`. Otherwise, the number is "read" from the string. An error gives `NaN`. |
+| `string` | Whitespaces from the start and end are removed. If the remaining string is empty, the result is `0`. Otherwise, the number is "read" from the string. An error gives `NaN`. |
Examples:
@@ -79,30 +79,30 @@ alert( Number(true) ); // 1
alert( Number(false) ); // 0
```
-Please note that `null` and `undefined` behave differently here: `null` becomes a zero, while `undefined` becomes `NaN`.
+Please note that `null` and `undefined` behave differently here: `null` becomes zero while `undefined` becomes `NaN`.
````smart header="Addition '+' concatenates strings"
-Almost all mathematical operations convert values to numbers. With a notable exception of the addition `+`. If one of the added values is a string, then another one is also converted to a string.
+Almost all mathematical operations convert values to numbers. A notable exception is addition `+`. If one of the added values is a string, the other one is also converted to a string.
-Then it concatenates (joins) them:
+Then, it concatenates (joins) them:
```js run
alert( 1 + '2' ); // '12' (string to the right)
alert( '1' + 2 ); // '12' (string to the left)
```
-That only happens when at least one of the arguments is a string. Otherwise, values are converted to numbers.
+This only happens when at least one of the arguments is a string. Otherwise, values are converted to numbers.
````
## ToBoolean
Boolean conversion is the simplest one.
-It happens in logical operations (later we'll meet condition tests and other kinds of them), but also can be performed manually with the call of `Boolean(value)`.
+It happens in logical operations (later we'll meet condition tests and other similar things) but can also be performed explicitly with a call to `Boolean(value)`.
The conversion rule:
-- Values that are intuitively "empty", like `0`, an empty string, `null`, `undefined` and `NaN` become `false`.
+- Values that are intuitively "empty", like `0`, an empty string, `null`, `undefined`, and `NaN`, become `false`.
- Other values become `true`.
For instance:
@@ -116,7 +116,7 @@ alert( Boolean("") ); // false
```
````warn header="Please note: the string with zero `\"0\"` is `true`"
-Some languages (namely PHP) treat `"0"` as `false`. But in JavaScript a non-empty string is always `true`.
+Some languages (namely PHP) treat `"0"` as `false`. But in JavaScript, a non-empty string is always `true`.
```js run
alert( Boolean("0") ); // true
@@ -127,11 +127,11 @@ alert( Boolean(" ") ); // spaces, also true (any non-empty string is true)
## Summary
-There are three most widely used type conversions: to string, to number and to boolean.
+The three most widely used type conversions are to string, to number, and to boolean.
-**`ToString`** -- Occurs when we output something, can be performed with `String(value)`. The conversion to string is usually obvious for primitive values.
+**`ToString`** -- Occurs when we output something. Can be performed with `String(value)`. The conversion to string is usually obvious for primitive values.
-**`ToNumber`** -- Occurs in math operations, can be performed with `Number(value)`.
+**`ToNumber`** -- Occurs in math operations. Can be performed with `Number(value)`.
The conversion follows the rules:
@@ -142,7 +142,7 @@ The conversion follows the rules:
|true / false | `1 / 0` |
| `string` | The string is read "as is", whitespaces from both sides are ignored. An empty string becomes `0`. An error gives `NaN`. |
-**`ToBoolean`** -- Occurs in logical operations, or can be performed with `Boolean(value)`.
+**`ToBoolean`** -- Occurs in logical operations. Can be performed with `Boolean(value)`.
Follows the rules:
@@ -157,4 +157,4 @@ Most of these rules are easy to understand and memorize. The notable exceptions
- `undefined` is `NaN` as a number, not `0`.
- `"0"` and space-only strings like `" "` are true as a boolean.
-Objects are not covered here, we'll return to them later in the chapter a > b, a < b.
- Greater/less than or equals: a >= b, a <= b.
-- Equality check is written as `a == b` (please note the double equation sign `=`. A single symbol `a = b` would mean an assignment).
-- Not equals. In maths the notation is ≠, in JavaScript it's written as an assignment with an exclamation sign before it: a != b.
+- Equals: `a == b` (please note the double equals sign `=`. A single symbol `a = b` would mean an assignment).
+- Not equals. In maths the notation is ≠, but in JavaScript it's written as an assignment with an exclamation sign before it: a != b.
## Boolean is the result
-Just as all other operators, a comparison returns a value. The value is of the boolean type.
+Like all other operators, a comparison returns a value. In this case, the value is a boolean.
- `true` -- means "yes", "correct" or "the truth".
-- `false` -- means "no", "wrong" or "a lie".
+- `false` -- means "no", "wrong" or "not the truth".
For example:
@@ -31,7 +31,7 @@ alert( result ); // true
## String comparison
-To see which string is greater than the other, the so-called "dictionary" or "lexicographical" order is used.
+To see whether a string is greater than another, JavaScript uses the so-called "dictionary" or "lexicographical" order.
In other words, strings are compared letter-by-letter.
@@ -45,29 +45,27 @@ alert( 'Bee' > 'Be' ); // true
The algorithm to compare two strings is simple:
-1. Compare first characters of both strings.
-2. If the first one is greater(or less), then the first string is greater(or less) than the second. We're done.
-3. Otherwise if first characters are equal, compare the second characters the same way.
-4. Repeat until the end of any string.
-5. If both strings ended simultaneously, then they are equal. Otherwise the longer string is greater.
+1. Compare the first character of both strings.
+2. If the first character from the first string is greater (or less) than the other string's, then the first string is greater (or less) than the second. We're done.
+3. Otherwise, if both strings' first characters are the same, compare the second characters the same way.
+4. Repeat until the end of either string.
+5. If both strings end at the same length, then they are equal. Otherwise, the longer string is greater.
-In the example above, the comparison `'Z' > 'A'` gets the result at the first step.
-
-Strings `"Glow"` and `"Glee"` are compared character-by-character:
+In the examples above, the comparison `'Z' > 'A'` gets to a result at the first step while the strings `"Glow"` and `"Glee"` are compared character-by-character:
1. `G` is the same as `G`.
2. `l` is the same as `l`.
3. `o` is greater than `e`. Stop here. The first string is greater.
```smart header="Not a real dictionary, but Unicode order"
-The comparison algorithm given above is roughly equivalent to the one used in book dictionaries or phone books. But it's not exactly the same.
+The comparison algorithm given above is roughly equivalent to the one used in dictionaries or phone books, but it's not exactly the same.
-For instance, case matters. A capital letter `"A"` is not equal to the lowercase `"a"`. Which one is greater? Actually, the lowercase `"a"` is. Why? Because the lowercase character has a greater index in the internal encoding table (Unicode). We'll get back to specific details and consequences in the chapter
- // (we'll talk more about innerHTML in the specific chapter, should be obvious here)
+ // (we'll talk about innerHTML in the specific chapter, it just writes into element here)
progress.innerHTML = i;
}
}
@@ -430,7 +430,7 @@ And if we use `setTimeout` to split it into pieces then changes are applied in-b
} while (i % 1e3 != 0);
if (i < 1e9) {
- setTimeout(count, 0);
+ setTimeout(count);
}
}
@@ -446,9 +446,9 @@ Now the `
` shows increasing values of `i`.
- Methods `setInterval(func, delay, ...args)` and `setTimeout(func, delay, ...args)` allow to run the `func` regularly/once after `delay` milliseconds.
- To cancel the execution, we should call `clearInterval/clearTimeout` with the value returned by `setInterval/setTimeout`.
- Nested `setTimeout` calls is a more flexible alternative to `setInterval`. Also they can guarantee the minimal time *between* the executions.
-- Zero-timeout scheduling `setTimeout(...,0)` is used to schedule the call "as soon as possible, but after the current code is complete".
+- Zero-timeout scheduling `setTimeout(func, 0)` (the same as `setTimeout(func)`) is used to schedule the call "as soon as possible, but after the current code is complete".
-Some use cases of `setTimeout(...,0)`:
+Some use cases of `setTimeout(func)`:
- To split CPU-hungry tasks into pieces, so that the script doesn't "hang"
- To let the browser do something else while the process is going on (paint the progress bar).
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.png b/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.png
index 060b2c293..844c53788 100644
Binary files a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.png and b/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.png differ
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval@2x.png b/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval@2x.png
index 4071849cd..4fbf122c5 100644
Binary files a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval@2x.png and b/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval@2x.png differ
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.png b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.png
index 6c473a33c..f59e157fb 100644
Binary files a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.png and b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.png differ
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval@2x.png b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval@2x.png
index dd45e324f..ed99391cf 100644
Binary files a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval@2x.png and b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval@2x.png differ
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md
index 9ebb7abfc..a3843107c 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md
@@ -27,4 +27,4 @@ for (let args of work.calls) {
}
```
-P.S. That decorator is sometimes useful for unit-testing, it's advanced form is `sinon.spy` in [Sinon.JS](http://sinonjs.org/) library.
+P.S. That decorator is sometimes useful for unit-testing. Its advanced form is `sinon.spy` in [Sinon.JS](http://sinonjs.org/) library.
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md
index 44b5024e1..24bb4d448 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md
@@ -1,6 +1,6 @@
The solution:
-```js
+```js run demo
function delay(f, ms) {
return function() {
@@ -8,20 +8,25 @@ function delay(f, ms) {
};
}
+
+let f1000 = delay(alert, 1000);
+
+f1000("test"); // shows "test" after 1000ms
```
Please note how an arrow function is used here. As we know, arrow functions do not have own `this` and `arguments`, so `f.apply(this, arguments)` takes `this` and `arguments` from the wrapper.
-If we pass a regular function, `setTimeout` would call it without arguments and `this=window` (in-browser), so we'd need to write a bit more code to pass them from the wrapper:
+If we pass a regular function, `setTimeout` would call it without arguments and `this=window` (assuming we're in the browser).
+
+We still can pass the right `this` by using an intermediate variable, but that's a little bit more cumbersome:
```js
function delay(f, ms) {
- // added variables to pass this and arguments from the wrapper inside setTimeout
return function(...args) {
- let savedThis = this;
+ let savedThis = this; // store this into an intermediate variable
setTimeout(function() {
- f.apply(savedThis, args);
+ f.apply(savedThis, args); // use it here
}, ms);
};
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md
index 1516aca35..4f5867ded 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md
@@ -1,6 +1,4 @@
-
-
-```js run no-beautify
+```js demo
function debounce(f, ms) {
let isCooldown = false;
@@ -18,7 +16,7 @@ function debounce(f, ms) {
}
```
-The call to `debounce` returns a wrapper. There may be two states:
+A call to `debounce` returns a wrapper. There may be two states:
- `isCooldown = false` -- ready to run.
- `isCooldown = true` -- waiting for the timeout.
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md
index 372ebedd1..c844016d3 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md
@@ -1,4 +1,4 @@
-```js
+```js demo
function throttle(func, ms) {
let isThrottled = false,
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md
index 547f336c5..8dd77368d 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md
@@ -12,20 +12,20 @@ Let's check the real-life application to better understand that requirement and
**For instance, we want to track mouse movements.**
-In browser we can setup a function to run at every mouse micro-movement and get the pointer location as it moves. During an active mouse usage, this function usually runs very frequently, can be something like 100 times per second (every 10 ms).
+In browser we can setup a function to run at every mouse movement and get the pointer location as it moves. During an active mouse usage, this function usually runs very frequently, can be something like 100 times per second (every 10 ms).
**The tracking function should update some information on the web-page.**
Updating function `update()` is too heavy to do it on every micro-movement. There is also no sense in making it more often than once per 100ms.
-So we'll assign `throttle(update, 100)` as the function to run on each mouse move instead of the original `update()`. The decorator will be called often, but `update()` will be called at maximum once per 100ms.
+So we'll wrap it into the decorator: use `throttle(update, 100)` as the function to run on each mouse move instead of the original `update()`. The decorator will be called often, but `update()` will be called at maximum once per 100ms.
Visually, it will look like this:
1. For the first mouse movement the decorated variant passes the call to `update`. That's important, the user sees our reaction to their move immediately.
2. Then as the mouse moves on, until `100ms` nothing happens. The decorated variant ignores calls.
3. At the end of `100ms` -- one more `update` happens with the last coordinates.
-4. Then, finally, the mouse stops somewhere. The decorated variant waits until `100ms` expire and then runs `update` runs with last coordinates. So, perhaps the most important, the final mouse coordinates are processed.
+4. Then, finally, the mouse stops somewhere. The decorated variant waits until `100ms` expire and then runs `update` with last coordinates. So, perhaps the most important, the final mouse coordinates are processed.
A code example:
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md
index 3f86b0d30..33a4bb8f3 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md
@@ -305,7 +305,7 @@ If we look more closely, there's a minor difference between such uses of `call`
So, these calls complement each other. Where we expect an iterable, `call` works, where we expect an array-like, `apply` works.
-And if `args` is both iterable and array-like, like a real array, then we technically could use any of them, but `apply` will probably be faster, because it's a single operation. Most JavaScript engines internally optimize is better than a pair `call + spread`.
+And if `args` is both iterable and array-like, like a real array, then we technically could use any of them, but `apply` will probably be faster, because it's a single operation. Most JavaScript engines internally optimize it better than a pair `call + spread`.
One of the most important uses of `apply` is passing the call to another function, like this:
@@ -453,7 +453,7 @@ let wrapper = function() {
}
```
-We also saw an example of *method borrowing* when we take a method from an object and `call` it in the context of another object. It is quite common to take array methods and apply them to arguments. The alternative is to use rest parameters object that is a real array.
+We also saw an example of *method borrowing* when we take a method from an object and `call` it in the context of another object. It is quite common to take array methods and apply them to `arguments`. The alternative is to use rest parameters object that is a real array.
There are many decorators there in the wild. Check how well you got them by solving the tasks of this chapter.
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.png b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.png
index 171e27910..d9541c768 100644
Binary files a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.png and b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.png differ
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper@2x.png b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper@2x.png
index 8d3b5434c..17eef3f18 100644
Binary files a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper@2x.png and b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper@2x.png differ
diff --git a/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md b/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md
index 0cb673b12..403107ca6 100644
--- a/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md
+++ b/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md
@@ -38,6 +38,6 @@ An alternative solution could be:
askPassword(() => user.loginOk(), () => user.loginFail());
```
-Usually that also works, but may fail in more complex situations where `user` has a chance of being overwritten between the moments of asking and running `() => user.loginOk()`.
-
+Usually that also works and looks good.
+It's a bit less reliable though in more complex situations where `user` variable might change *after* `askPassword` is called, but *before* the visitor answers and calls `() => user.loginOk()`.
diff --git a/1-js/06-advanced-functions/10-bind/5-question-use-bind/task.md b/1-js/06-advanced-functions/10-bind/5-question-use-bind/task.md
index eb19e6644..fe6a9b4eb 100644
--- a/1-js/06-advanced-functions/10-bind/5-question-use-bind/task.md
+++ b/1-js/06-advanced-functions/10-bind/5-question-use-bind/task.md
@@ -2,7 +2,7 @@ importance: 5
---
-# Ask losing this
+# Fix a function that loses "this"
The call to `askPassword()` in the code below should check the password and then call `user.loginOk/loginFail` depending on the answer.
@@ -34,5 +34,3 @@ let user = {
askPassword(user.loginOk, user.loginFail);
*/!*
```
-
-
diff --git a/1-js/06-advanced-functions/10-bind/article.md b/1-js/06-advanced-functions/10-bind/article.md
index fdb07c608..06e2000ff 100644
--- a/1-js/06-advanced-functions/10-bind/article.md
+++ b/1-js/06-advanced-functions/10-bind/article.md
@@ -37,7 +37,7 @@ let f = user.sayHi;
setTimeout(f, 1000); // lost user context
```
-The method `setTimeout` in-browser is a little special: it sets `this=window` for the function call (for Node.JS, `this` becomes the timer object, but doesn't really matter here). So for `this.firstName` it tries to get `window.firstName`, which does not exist. In other similar cases as we'll see, usually `this` just becomes `undefined`.
+The method `setTimeout` in-browser is a little special: it sets `this=window` for the function call (for Node.js, `this` becomes the timer object, but doesn't really matter here). So for `this.firstName` it tries to get `window.firstName`, which does not exist. In other similar cases as we'll see, usually `this` just becomes `undefined`.
The task is quite typical -- we want to pass an object method somewhere else (here -- to the scheduler) where it will be called. How to make sure that it will be called in the right context?
@@ -100,7 +100,7 @@ The basic syntax is:
```js
// more complex syntax will be little later
let boundFunc = func.bind(context);
-````
+```
The result of `func.bind(context)` is a special function-like "exotic object", that is callable as function and transparently passes the call to `func` setting `this=context`.
diff --git a/1-js/06-advanced-functions/11-currying-partials/article.md b/1-js/06-advanced-functions/11-currying-partials/article.md
index e866f38a7..e8a3d7bdf 100644
--- a/1-js/06-advanced-functions/11-currying-partials/article.md
+++ b/1-js/06-advanced-functions/11-currying-partials/article.md
@@ -28,6 +28,10 @@ function mul(a, b) {
Let's use `bind` to create a function `double` on its base:
```js run
+function mul(a, b) {
+ return a * b;
+}
+
*!*
let double = mul.bind(null, 2);
*/!*
@@ -46,6 +50,10 @@ Please note that here we actually don't use `this` here. But `bind` requires it,
The function `triple` in the code below triples the value:
```js run
+function mul(a, b) {
+ return a * b;
+}
+
*!*
let triple = mul.bind(null, 3);
*/!*
@@ -57,9 +65,9 @@ alert( triple(5) ); // = mul(3, 5) = 15
Why do we usually make a partial function?
-Here our benefit is that we created an independent function with a readable name (`double`, `triple`). We can use it and don't write the first argument of every time, cause it's fixed with `bind`.
+The benefit is that we can create an independent function with a readable name (`double`, `triple`). We can use it and not provide first argument of every time as it's fixed with `bind`.
-In other cases, partial application is useful when we have a very generic function, and want a less universal variant of it for convenience.
+In other cases, partial application is useful when we have a very generic function and want a less universal variant of it for convenience.
For instance, we have a function `send(from, to, text)`. Then, inside a `user` object we may want to use a partial variant of it: `sendTo(to, text)` that sends from the current user.
@@ -111,16 +119,18 @@ Also there's a ready [_.partial](https://lodash.com/docs#partial) implementation
Sometimes people mix up partial function application mentioned above with another thing named "currying". That's another interesting technique of working with functions that we just have to mention here.
-[Currying](https://en.wikipedia.org/wiki/Currying) is translating a function from callable as `f(a, b, c)` into callable as `f(a)(b)(c)`.
+[Currying](https://en.wikipedia.org/wiki/Currying) is a transformation of functions that translates a function from callable as `f(a, b, c)` into callable as `f(a)(b)(c)`. In JavaScript, we usually make a wrapper to keep the original function.
+
+Currying doesn't call a function. It just transforms it.
-Let's make `curry` function that performs currying for binary functions. In other words, it translates `f(a, b)` into `f(a)(b)`:
+Let's create a helper `curry(f)` function that performs currying for a two-argument `f`. In other words, `curry(f)` for two-argument `f(a, b)` translates it into `f(a)(b)`
```js run
*!*
-function curry(func) {
+function curry(f) { // curry(f) does the currying transform
return function(a) {
return function(b) {
- return func(a, b);
+ return f(a, b);
};
};
}
@@ -156,9 +166,11 @@ function curry(f) {
## Currying? What for?
-Advanced currying allows both to keep the function callable normally and to get partials easily. To understand the benefits we definitely need a worthy real-life example.
+To understand the benefits we definitely need a worthy real-life example.
+
+Advanced currying allows the function to be both callable normally and partially.
-For instance, we have the logging function `log(date, importance, message)` that formats and outputs the information. In real projects such functions also have many other useful features like: sending it over the network or filtering:
+For instance, we have the logging function `log(date, importance, message)` that formats and outputs the information. In real projects such functions also have many other useful features like sending logs over the network, here we just use `alert`:
```js
function log(date, importance, message) {
@@ -172,45 +184,42 @@ Let's curry it!
log = _.curry(log);
```
-After that `log` still works the normal way:
-
-```js
-log(new Date(), "DEBUG", "some debug");
-```
-
-...But also can be called in the curried form:
+After that `log` work both the normal way and in the curried form:
```js
+log(new Date(), "DEBUG", "some debug"); // log(a,b,c)
log(new Date())("DEBUG")("some debug"); // log(a)(b)(c)
```
-Let's get a convenience function for today's logs:
+Now we can easily make a convenience function for current logs:
```js
-// todayLog will be the partial of log with fixed first argument
-let todayLog = log(new Date());
+// currentLog will be the partial of log with fixed first argument
+let logNow = log(new Date());
// use it
-todayLog("INFO", "message"); // [HH:mm] INFO message
+logNow("INFO", "message"); // [HH:mm] INFO message
```
-And now a convenience function for today's debug messages:
+And here's a convenience function for current debug messages:
```js
-let todayDebug = todayLog("DEBUG");
+let debugNow = logNow("DEBUG");
-todayDebug("message"); // [HH:mm] DEBUG message
+debugNow("message"); // [HH:mm] DEBUG message
```
So:
1. We didn't lose anything after currying: `log` is still callable normally.
-2. We were able to generate partial functions that are convenient in many cases.
+2. We were able to generate partial functions such as for today's logs.
## Advanced curry implementation
-In case you're interested, here's the "advanced" curry implementation that we could use above.
+In case you'd like to get in details (not obligatory!), here's the "advanced" curry implementation that we could use above.
-```js run
+It's pretty short:
+
+```js
function curry(func) {
return function curried(...args) {
@@ -224,24 +233,23 @@ function curry(func) {
};
}
+```
+
+Usage examples:
+```js
function sum(a, b, c) {
return a + b + c;
}
let curriedSum = curry(sum);
-// still callable normally
-alert( curriedSum(1, 2, 3) ); // 6
-
-// get the partial with curried(1) and call it with 2 other arguments
-alert( curriedSum(1)(2,3) ); // 6
-
-// full curried form
-alert( curriedSum(1)(2)(3) ); // 6
+alert( curriedSum(1, 2, 3) ); // 6, still callable normally
+alert( curriedSum(1)(2,3) ); // 6, currying of 1st arg
+alert( curriedSum(1)(2)(3) ); // 6, full currying
```
-The new `curry` may look complicated, but it's actually pretty easy to understand.
+The new `curry` may look complicated, but it's actually easy to understand.
The result of `curry(func)` is the wrapper `curried` that looks like this:
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty.png
deleted file mode 100644
index 1d228b5c8..000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty@2x.png
deleted file mode 100644
index a4c195ad6..000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain.png
deleted file mode 100644
index a302343e2..000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain@2x.png
deleted file mode 100644
index 4d3311998..000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2.png
deleted file mode 100644
index 19c1881a2..000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2@2x.png
deleted file mode 100644
index cd38624ab..000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3.png
deleted file mode 100644
index 0ea869d3c..000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3@2x.png
deleted file mode 100644
index 194db77ed..000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk.png
deleted file mode 100644
index 5bd211147..000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk@2x.png
deleted file mode 100644
index 1e4ef6efb..000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit.png
deleted file mode 100644
index c18e02052..000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit@2x.png
deleted file mode 100644
index 4d9e8ec09..000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin.png
deleted file mode 100644
index aed69c59e..000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin@2x.png
deleted file mode 100644
index 2b11b2568..000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor.png b/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor.png
deleted file mode 100644
index 0dbc7b8fc..000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor@2x.png
deleted file mode 100644
index e38cb85bd..000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring.png b/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring.png
deleted file mode 100644
index 83258d061..000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring@2x.png
deleted file mode 100644
index d77cc8f4e..000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes.png b/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes.png
deleted file mode 100644
index dbab2f78b..000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes@2x.png
deleted file mode 100644
index 8c3a18dc8..000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1.png b/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1.png
deleted file mode 100644
index e7c6bdb21..000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1@2x.png
deleted file mode 100644
index 34c256bbf..000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype.png b/1-js/07-object-oriented-programming/04-function-prototype/object-prototype.png
deleted file mode 100644
index d97d87d2c..000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/object-prototype@2x.png
deleted file mode 100644
index 76ce4c9ac..000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit.png b/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit.png
deleted file mode 100644
index 3eec740fb..000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit@2x.png
deleted file mode 100644
index ed28a388a..000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object.png b/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object.png
deleted file mode 100644
index 3254270f3..000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object@2x.png
deleted file mode 100644
index f794d7b84..000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor.png b/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor.png
deleted file mode 100644
index d3ef34485..000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor@2x.png
deleted file mode 100644
index 45cbb6baa..000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor.png b/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor.png
deleted file mode 100644
index 0dbc7b8fc..000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor@2x.png
deleted file mode 100644
index e38cb85bd..000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring.png b/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring.png
deleted file mode 100644
index 83258d061..000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring@2x.png
deleted file mode 100644
index d77cc8f4e..000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes.png b/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes.png
deleted file mode 100644
index dbab2f78b..000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes@2x.png
deleted file mode 100644
index 8c3a18dc8..000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1.png
deleted file mode 100644
index e7c6bdb21..000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1@2x.png
deleted file mode 100644
index 34c256bbf..000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null.png
deleted file mode 100644
index 7c2e3f9c7..000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null@2x.png
deleted file mode 100644
index fec1facb0..000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype.png
deleted file mode 100644
index d97d87d2c..000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype@2x.png
deleted file mode 100644
index 76ce4c9ac..000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit.png b/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit.png
deleted file mode 100644
index 3eec740fb..000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit@2x.png
deleted file mode 100644
index ed28a388a..000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor.png b/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor.png
deleted file mode 100644
index d3ef34485..000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor@2x.png
deleted file mode 100644
index 45cbb6baa..000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2.png b/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2.png
deleted file mode 100644
index ee42f6b98..000000000
Binary files a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2@2x.png b/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2@2x.png
deleted file mode 100644
index 1917c6631..000000000
Binary files a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null.png b/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null.png
deleted file mode 100644
index 7c2e3f9c7..000000000
Binary files a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null@2x.png b/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null@2x.png
deleted file mode 100644
index fec1facb0..000000000
Binary files a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object.png b/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object.png
deleted file mode 100644
index 3254270f3..000000000
Binary files a/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object@2x.png b/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object@2x.png
deleted file mode 100644
index f794d7b84..000000000
Binary files a/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/solution.md b/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/solution.md
deleted file mode 100644
index 55f945ca5..000000000
--- a/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/solution.md
+++ /dev/null
@@ -1,46 +0,0 @@
-Here's the line with the error:
-
-```js
-Rabbit.prototype = Animal.prototype;
-```
-
-Here `Rabbit.prototype` and `Animal.prototype` become the same object. So methods of both classes become mixed in that object.
-
-As a result, `Rabbit.prototype.walk` overwrites `Animal.prototype.walk`, so all animals start to bounce:
-
-```js run
-function Animal(name) {
- this.name = name;
-}
-
-Animal.prototype.walk = function() {
- alert(this.name + ' walks');
-};
-
-function Rabbit(name) {
- this.name = name;
-}
-
-*!*
-Rabbit.prototype = Animal.prototype;
-*/!*
-
-Rabbit.prototype.walk = function() {
- alert(this.name + " bounces!");
-};
-
-*!*
-let animal = new Animal("pig");
-animal.walk(); // pig bounces!
-*/!*
-```
-
-The correct variant would be:
-
-```js
-Rabbit.prototype.__proto__ = Animal.prototype;
-// or like this:
-Rabbit.prototype = Object.create(Animal.prototype);
-```
-
-That makes prototypes separate, each of them stores methods of the corresponding class, but `Rabbit.prototype` inherits from `Animal.prototype`.
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/task.md b/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/task.md
deleted file mode 100644
index ee486c3d6..000000000
--- a/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/task.md
+++ /dev/null
@@ -1,29 +0,0 @@
-importance: 5
-
----
-
-# An error in the inheritance
-
-Find an error in the prototypal inheritance below.
-
-What's wrong? What are consequences going to be?
-
-```js
-function Animal(name) {
- this.name = name;
-}
-
-Animal.prototype.walk = function() {
- alert(this.name + ' walks');
-};
-
-function Rabbit(name) {
- this.name = name;
-}
-
-Rabbit.prototype = Animal.prototype;
-
-Rabbit.prototype.walk = function() {
- alert(this.name + " bounces!");
-};
-```
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.md b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.md
deleted file mode 100644
index 300b25d94..000000000
--- a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.md
+++ /dev/null
@@ -1 +0,0 @@
-Please note that properties that were internal in functional style (`template`, `timer`) and the internal method `render` are marked private with the underscore `_`.
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.view/clock.js b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.view/clock.js
deleted file mode 100644
index c03634488..000000000
--- a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.view/clock.js
+++ /dev/null
@@ -1,32 +0,0 @@
-function Clock({ template }) {
- this._template = template;
-}
-
-Clock.prototype._render = function() {
- let date = new Date();
-
- let hours = date.getHours();
- if (hours < 10) hours = '0' + hours;
-
- let mins = date.getMinutes();
- if (mins < 10) mins = '0' + mins;
-
- let secs = date.getSeconds();
- if (secs < 10) secs = '0' + secs;
-
- let output = this._template
- .replace('h', hours)
- .replace('m', mins)
- .replace('s', secs);
-
- console.log(output);
-};
-
-Clock.prototype.stop = function() {
- clearInterval(this._timer);
-};
-
-Clock.prototype.start = function() {
- this._render();
- this._timer = setInterval(() => this._render(), 1000);
-};
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.view/index.html b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.view/index.html
deleted file mode 100644
index fdee13d01..000000000
--- a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.view/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
-
- Console clock
-
-
-
-
-
-
-
-
-
-
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/source.view/index.html b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/source.view/index.html
deleted file mode 100644
index fdee13d01..000000000
--- a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/source.view/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
-
- Console clock
-
-
-
-
-
-
-
-
-
-
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/task.md b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/task.md
deleted file mode 100644
index 71131816b..000000000
--- a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/task.md
+++ /dev/null
@@ -1,9 +0,0 @@
-importance: 5
-
----
-
-# Rewrite to prototypes
-
-The `Clock` class is written in functional style. Rewrite it using prototypes.
-
-P.S. The clock ticks in the console, open it to see.
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/article.md b/1-js/07-object-oriented-programming/08-class-patterns/article.md
deleted file mode 100644
index 92b521c19..000000000
--- a/1-js/07-object-oriented-programming/08-class-patterns/article.md
+++ /dev/null
@@ -1,240 +0,0 @@
-
-# Class patterns
-
-```quote author="Wikipedia"
-In object-oriented programming, a *class* is an extensible program-code-template for creating objects, providing initial values for state (member variables) and implementations of behavior (member functions or methods).
-```
-
-There's a special syntax construct and a keyword `class` in JavaScript. But before studying it, we should consider that the term "class" comes from the theory of object-oriented programming. The definition is cited above, and it's language-independent.
-
-In JavaScript there are several well-known programming patterns to make classes even without using the `class` keyword. And here we'll talk about them first.
-
-The `class` construct will be described in the next chapter, but in JavaScript it's a "syntax sugar" and an extension of one of the patterns that we'll study here.
-
-
-## Functional class pattern
-
-The constructor function below can be considered a "class" according to the definition:
-
-```js run
-function User(name) {
- this.sayHi = function() {
- alert(name);
- };
-}
-
-let user = new User("John");
-user.sayHi(); // John
-```
-
-It follows all parts of the definition:
-
-1. It is a "program-code-template" for creating objects (callable with `new`).
-2. It provides initial values for the state (`name` from parameters).
-3. It provides methods (`sayHi`).
-
-This is called *functional class pattern*.
-
-In the functional class pattern, local variables and nested functions inside `User`, that are not assigned to `this`, are visible from inside, but not accessible by the outer code.
-
-So we can easily add internal functions and variables, like `calcAge()` here:
-
-```js run
-function User(name, birthday) {
-*!*
- // only visible from other methods inside User
- function calcAge() {
- return new Date().getFullYear() - birthday.getFullYear();
- }
-*/!*
-
- this.sayHi = function() {
- alert(`${name}, age:${calcAge()}`);
- };
-}
-
-let user = new User("John", new Date(2000, 0, 1));
-user.sayHi(); // John, age:17
-```
-
-In this code variables `name`, `birthday` and the function `calcAge()` are internal, *private* to the object. They are only visible from inside of it.
-
-On the other hand, `sayHi` is the external, *public* method. The external code that creates `user` can access it.
-
-This way we can hide internal implementation details and helper methods from the outer code. Only what's assigned to `this` becomes visible outside.
-
-## Factory class pattern
-
-We can create a class without using `new` at all.
-
-Like this:
-
-```js run
-function User(name, birthday) {
- // only visible from other methods inside User
- function calcAge() {
- return new Date().getFullYear() - birthday.getFullYear();
- }
-
- return {
- sayHi() {
- alert(`${name}, age:${calcAge()}`);
- }
- };
-}
-
-*!*
-let user = User("John", new Date(2000, 0, 1));
-*/!*
-user.sayHi(); // John, age:17
-```
-
-As we can see, the function `User` returns an object with public properties and methods. The only benefit of this method is that we can omit `new`: write `let user = User(...)` instead of `let user = new User(...)`. In other aspects it's almost the same as the functional pattern.
-
-## Prototype-based classes
-
-Prototype-based classes are the most important and generally the best. Functional and factory class patterns are rarely used in practice.
-
-Soon you'll see why.
-
-Here's the same class rewritten using prototypes:
-
-```js run
-function User(name, birthday) {
-*!*
- this._name = name;
- this._birthday = birthday;
-*/!*
-}
-
-*!*
-User.prototype._calcAge = function() {
-*/!*
- return new Date().getFullYear() - this._birthday.getFullYear();
-};
-
-User.prototype.sayHi = function() {
- alert(`${this._name}, age:${this._calcAge()}`);
-};
-
-let user = new User("John", new Date(2000, 0, 1));
-user.sayHi(); // John, age:17
-```
-
-The code structure:
-
-- The constructor `User` only initializes the current object state.
-- Methods are added to `User.prototype`.
-
-As we can see, methods are lexically not inside `function User`, they do not share a common lexical environment. If we declare variables inside `function User`, then they won't be visible to methods.
-
-So, there is a widely known agreement that internal properties and methods are prepended with an underscore `"_"`. Like `_name` or `_calcAge()`. Technically, that's just an agreement, the outer code still can access them. But most developers recognize the meaning of `"_"` and try not to touch prefixed properties and methods in the external code.
-
-Here are the advantages over the functional pattern:
-
-- In the functional pattern, each object has its own copy of every method. We assign a separate copy of `this.sayHi = function() {...}` and other methods in the constructor.
-- In the prototypal pattern, all methods are in `User.prototype` that is shared between all user objects. An object itself only stores the data.
-
-So the prototypal pattern is more memory-efficient.
-
-...But not only that. Prototypes allow us to setup the inheritance in a really efficient way. Built-in JavaScript objects all use prototypes. Also there's a special syntax construct: "class" that provides nice-looking syntax for them. And there's more, so let's go on with them.
-
-## Prototype-based inheritance for classes
-
-Let's say we have two prototype-based classes.
-
-`Rabbit`:
-
-```js
-function Rabbit(name) {
- this.name = name;
-}
-
-Rabbit.prototype.jump = function() {
- alert(`${this.name} jumps!`);
-};
-
-let rabbit = new Rabbit("My rabbit");
-```
-
-
-
-...And `Animal`:
-
-```js
-function Animal(name) {
- this.name = name;
-}
-
-Animal.prototype.eat = function() {
- alert(`${this.name} eats.`);
-};
-
-let animal = new Animal("My animal");
-```
-
-
-
-Right now they are fully independent.
-
-But we'd want `Rabbit` to extend `Animal`. In other words, rabbits should be based on animals, have access to methods of `Animal` and extend them with its own methods.
-
-What does it mean in the language of prototypes?
-
-Right now methods for `rabbit` objects are in `Rabbit.prototype`. We'd like `rabbit` to use `Animal.prototype` as a "fallback", if the method is not found in `Rabbit.prototype`.
-
-So the prototype chain should be `rabbit` -> `Rabbit.prototype` -> `Animal.prototype`.
-
-Like this:
-
-
-
-The code to implement that:
-
-```js run
-// Same Animal as before
-function Animal(name) {
- this.name = name;
-}
-
-// All animals can eat, right?
-Animal.prototype.eat = function() {
- alert(`${this.name} eats.`);
-};
-
-// Same Rabbit as before
-function Rabbit(name) {
- this.name = name;
-}
-
-Rabbit.prototype.jump = function() {
- alert(`${this.name} jumps!`);
-};
-
-*!*
-// setup the inheritance chain
-Rabbit.prototype.__proto__ = Animal.prototype; // (*)
-*/!*
-
-let rabbit = new Rabbit("White Rabbit");
-*!*
-rabbit.eat(); // rabbits can eat too
-*/!*
-rabbit.jump();
-```
-
-The line `(*)` sets up the prototype chain. So that `rabbit` first searches methods in `Rabbit.prototype`, then `Animal.prototype`. And then, just for completeness, let's mention that if the method is not found in `Animal.prototype`, then the search continues in `Object.prototype`, because `Animal.prototype` is a regular plain object, so it inherits from it.
-
-So here's the full picture:
-
-
-
-## Summary
-
-The term "class" comes from the object-oriented programming. In JavaScript it usually means the functional class pattern or the prototypal pattern. The prototypal pattern is more powerful and memory-efficient, so it's recommended to stick to it.
-
-According to the prototypal pattern:
-1. Methods are stored in `Class.prototype`.
-2. Prototypes inherit from each other.
-
-In the next chapter we'll study `class` keyword and construct. It allows to write prototypal classes shorter and provides some additional benefits.
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2.png b/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2.png
deleted file mode 100644
index ad4a40932..000000000
Binary files a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2@2x.png b/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2@2x.png
deleted file mode 100644
index 199ed3ee6..000000000
Binary files a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal.png b/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal.png
deleted file mode 100644
index 70708c284..000000000
Binary files a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal@2x.png b/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal@2x.png
deleted file mode 100644
index 0db130181..000000000
Binary files a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1.png b/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1.png
deleted file mode 100644
index e63d7d784..000000000
Binary files a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1@2x.png b/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1@2x.png
deleted file mode 100644
index 3d1be9cce..000000000
Binary files a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2.png b/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2.png
deleted file mode 100644
index 435ec5f89..000000000
Binary files a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2@2x.png b/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2@2x.png
deleted file mode 100644
index 5731da73a..000000000
Binary files a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.view/index.html b/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.view/index.html
deleted file mode 100644
index fdee13d01..000000000
--- a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.view/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
-
- Console clock
-
-
-
-
-
-
-
-
-
-
diff --git a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/source.view/clock.js b/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/source.view/clock.js
deleted file mode 100644
index d312c93ea..000000000
--- a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/source.view/clock.js
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-function Clock({ template }) {
- this._template = template;
-}
-
-Clock.prototype._render = function() {
- let date = new Date();
-
- let hours = date.getHours();
- if (hours < 10) hours = '0' + hours;
-
- let mins = date.getMinutes();
- if (mins < 10) mins = '0' + mins;
-
- let secs = date.getSeconds();
- if (secs < 10) secs = '0' + secs;
-
- let output = this._template
- .replace('h', hours)
- .replace('m', mins)
- .replace('s', secs);
-
- console.log(output);
-};
-
-Clock.prototype.stop = function() {
- clearInterval(this._timer);
-};
-
-Clock.prototype.start = function() {
- this._render();
- this._timer = setInterval(() => this._render(), 1000);
-};
diff --git a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/source.view/index.html b/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/source.view/index.html
deleted file mode 100644
index fdee13d01..000000000
--- a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/source.view/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
-
- Console clock
-
-
-
-
-
-
-
-
-
-
diff --git a/1-js/07-object-oriented-programming/09-class/article.md b/1-js/07-object-oriented-programming/09-class/article.md
deleted file mode 100644
index 71878ae35..000000000
--- a/1-js/07-object-oriented-programming/09-class/article.md
+++ /dev/null
@@ -1,355 +0,0 @@
-
-# Classes
-
-The "class" construct allows to define prototype-based classes with a clean, nice-looking syntax.
-
-## The "class" syntax
-
-The `class` syntax is versatile, we'll start with a simple example first.
-
-Here's a prototype-based class `User`:
-
-```js run
-function User(name) {
- this.name = name;
-}
-
-User.prototype.sayHi = function() {
- alert(this.name);
-}
-
-let user = new User("John");
-user.sayHi();
-```
-
-...And that's the same using `class` syntax:
-
-```js run
-class User {
-
- constructor(name) {
- this.name = name;
- }
-
- sayHi() {
- alert(this.name);
- }
-
-}
-
-let user = new User("John");
-user.sayHi();
-```
-
-It's easy to see that the two examples are alike. Just please note that methods in a class do not have a comma between them. Novice developers sometimes forget it and put a comma between class methods, and things don't work. That's not a literal object, but a class syntax.
-
-So, what exactly does `class` do? We may think that it defines a new language-level entity, but that would be wrong.
-
-The `class User {...}` here actually does two things:
-
-1. Declares a variable `User` that references the function named `"constructor"`.
-2. Puts methods listed in the definition into `User.prototype`. Here, it includes `sayHi` and the `constructor`.
-
-Here's the code to dig into the class and see that:
-
-```js run
-class User {
- constructor(name) { this.name = name; }
- sayHi() { alert(this.name); }
-}
-
-*!*
-// proof: User is the "constructor" function
-*/!*
-alert(User === User.prototype.constructor); // true
-
-*!*
-// proof: there are two methods in its "prototype"
-*/!*
-alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
-```
-
-Here's the illustration of what `class User` creates:
-
-
-
-
-
-So `class` is a special syntax to define a constructor together with its prototype methods.
-
-...But not only that. There are minor tweaks here and there:
-
-Constructors require `new`
-: Unlike a regular function, a class `constructor` can't be called without `new`:
-
-```js run
-class User {
- constructor() {}
-}
-
-alert(typeof User); // function
-User(); // Error: Class constructor User cannot be invoked without 'new'
-```
-
-Different string output
-: If we output it like `alert(User)`, some engines show `"class User..."`, while others show `"function User..."`.
-
-Please don't be confused: the string representation may vary, but that's still a function, there is no separate "class" entity in JavaScript language.
-
-Class methods are non-enumerable
-: A class definition sets `enumerable` flag to `false` for all methods in the `"prototype"`. That's good, because if we `for..in` over an object, we usually don't want its class methods.
-
-Classes have a default `constructor() {}`
-: If there's no `constructor` in the `class` construct, then an empty function is generated, same as if we had written `constructor() {}`.
-
-Classes always `use strict`
-: All code inside the class construct is automatically in strict mode.
-
-### Getters/setters
-
-Classes may also include getters/setters. Here's an example with `user.name` implemented using them:
-
-```js run
-class User {
-
- constructor(name) {
- // invokes the setter
- this.name = name;
- }
-
-*!*
- get name() {
-*/!*
- return this._name;
- }
-
-*!*
- set name(value) {
-*/!*
- if (value.length < 4) {
- alert("Name is too short.");
- return;
- }
- this._name = value;
- }
-
-}
-
-let user = new User("John");
-alert(user.name); // John
-
-user = new User(""); // Name too short.
-```
-
-Internally, getters and setters are also created on the `User` prototype, like this:
-
-```js
-Object.defineProperties(User.prototype, {
- name: {
- get() {
- return this._name
- },
- set(name) {
- // ...
- }
- }
-});
-```
-
-### Only methods
-
-Unlike object literals, no `property:value` assignments are allowed inside `class`. There may be only methods and getters/setters. There is some work going on in the specification to lift that limitation, but it's not yet there.
-
-If we really need to put a non-function value into the prototype, then we can alter `prototype` manually, like this:
-
-```js run
-class User { }
-
-User.prototype.test = 5;
-
-alert( new User().test ); // 5
-```
-
-So, technically that's possible, but we should know why we're doing it. Such properties will be shared among all objects of the class.
-
-An "in-class" alternative is to use a getter:
-
-```js run
-class User {
- get test() {
- return 5;
- }
-}
-
-alert( new User().test ); // 5
-```
-
-From the external code, the usage is the same. But the getter variant is a bit slower.
-
-## Class Expression
-
-Just like functions, classes can be defined inside another expression, passed around, returned etc.
-
-Here's a class-returning function ("class factory"):
-
-```js run
-function makeClass(phrase) {
-*!*
- // declare a class and return it
- return class {
- sayHi() {
- alert(phrase);
- };
- };
-*/!*
-}
-
-let User = makeClass("Hello");
-
-new User().sayHi(); // Hello
-```
-
-That's quite normal if we recall that `class` is just a special form of a function-with-prototype definition.
-
-And, like Named Function Expressions, such classes also may have a name, that is visible inside that class only:
-
-```js run
-// "Named Class Expression" (alas, no such term, but that's what's going on)
-let User = class *!*MyClass*/!* {
- sayHi() {
- alert(MyClass); // MyClass is visible only inside the class
- }
-};
-
-new User().sayHi(); // works, shows MyClass definition
-
-alert(MyClass); // error, MyClass not visible outside of the class
-```
-
-## Static methods
-
-We can also assign methods to the class function, not to its `"prototype"`. Such methods are called *static*.
-
-An example:
-
-```js run
-class User {
-*!*
- static staticMethod() {
-*/!*
- alert(this === User);
- }
-}
-
-User.staticMethod(); // true
-```
-
-That actually does the same as assigning it as a function property:
-
-```js
-function User() { }
-
-User.staticMethod = function() {
- alert(this === User);
-};
-```
-
-The value of `this` inside `User.staticMethod()` is the class constructor `User` itself (the "object before dot" rule).
-
-Usually, static methods are used to implement functions that belong to the class, but not to any particular object of it.
-
-For instance, we have `Article` objects and need a function to compare them. The natural choice would be `Article.compare`, like this:
-
-```js run
-class Article {
- constructor(title, date) {
- this.title = title;
- this.date = date;
- }
-
-*!*
- static compare(articleA, articleB) {
- return articleA.date - articleB.date;
- }
-*/!*
-}
-
-// usage
-let articles = [
- new Article("Mind", new Date(2016, 1, 1)),
- new Article("Body", new Date(2016, 0, 1)),
- new Article("JavaScript", new Date(2016, 11, 1))
-];
-
-*!*
-articles.sort(Article.compare);
-*/!*
-
-alert( articles[0].title ); // Body
-```
-
-Here `Article.compare` stands "over" the articles, as a means to compare them. It's not a method of an article, but rather of the whole class.
-
-Another example would be a so-called "factory" method. Imagine, we need few ways to create an article:
-
-1. Create by given parameters (`title`, `date` etc).
-2. Create an empty article with today's date.
-3. ...
-
-The first way can be implemented by the constructor. And for the second one we can make a static method of the class.
-
-Like `Article.createTodays()` here:
-
-```js run
-class Article {
- constructor(title, date) {
- this.title = title;
- this.date = date;
- }
-
-*!*
- static createTodays() {
- // remember, this = Article
- return new this("Today's digest", new Date());
- }
-*/!*
-}
-
-let article = Article.createTodays();
-
-alert( article.title ); // Todays digest
-```
-
-Now every time we need to create a today's digest, we can call `Article.createTodays()`. Once again, that's not a method of an article, but a method of the whole class.
-
-Static methods are also used in database-related classes to search/save/remove entries from the database, like this:
-
-```js
-// assuming Article is a special class for managing articles
-// static method to remove the article:
-Article.remove({id: 12345});
-```
-
-## Summary
-
-The basic class syntax looks like this:
-
-```js
-class MyClass {
- constructor(...) {
- // ...
- }
- method1(...) {}
- method2(...) {}
- get something(...) {}
- set something(...) {}
- static staticMethod(..) {}
- // ...
-}
-```
-
-The value of `MyClass` is a function provided as `constructor`. If there's no `constructor`, then an empty function.
-
-In any case, methods listed in the class declaration become members of its `prototype`, with the exception of static methods that are written into the function itself and callable as `MyClass.staticMethod()`. Static methods are used when we need a function bound to a class, but not to any object of that class.
-
-In the next chapter we'll learn more about classes, including inheritance.
diff --git a/1-js/07-object-oriented-programming/09-class/class-user.png b/1-js/07-object-oriented-programming/09-class/class-user.png
deleted file mode 100644
index 5579e6bbd..000000000
Binary files a/1-js/07-object-oriented-programming/09-class/class-user.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/09-class/class-user@2x.png b/1-js/07-object-oriented-programming/09-class/class-user@2x.png
deleted file mode 100644
index 5a85e6589..000000000
Binary files a/1-js/07-object-oriented-programming/09-class/class-user@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/index.html b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/index.html
deleted file mode 100644
index 7ac1db714..000000000
--- a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
- Console clock
-
-
-
-
-
-
-
-
-
-
-
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/source.view/index.html b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/source.view/index.html
deleted file mode 100644
index b48a2a007..000000000
--- a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/source.view/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
- Console clock
-
-
-
-
-
-
-
-
-
-
-
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object.png b/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object.png
deleted file mode 100644
index d4ff37e56..000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object@2x.png
deleted file mode 100644
index a54a9d2f8..000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-extends.png b/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-extends.png
deleted file mode 100644
index 2db88f366..000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-extends.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-extends@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-extends@2x.png
deleted file mode 100644
index 9539fe9ec..000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-extends@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static.png b/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static.png
deleted file mode 100644
index 998c82330..000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static@2x.png
deleted file mode 100644
index 98a80d38f..000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object.png b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object.png
deleted file mode 100644
index c5d712632..000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object@2x.png
deleted file mode 100644
index edc4e841e..000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal.png b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal.png
deleted file mode 100644
index 70708c284..000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal@2x.png
deleted file mode 100644
index 0db130181..000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance.png b/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance.png
deleted file mode 100644
index 542a0c9fa..000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance@2x.png
deleted file mode 100644
index 21485062a..000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop.png b/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop.png
deleted file mode 100644
index 637d17939..000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop@2x.png
deleted file mode 100644
index af7b443bc..000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/11-instanceof/instanceof.png b/1-js/07-object-oriented-programming/11-instanceof/instanceof.png
deleted file mode 100644
index 85aa9a55f..000000000
Binary files a/1-js/07-object-oriented-programming/11-instanceof/instanceof.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/11-instanceof/instanceof@2x.png b/1-js/07-object-oriented-programming/11-instanceof/instanceof@2x.png
deleted file mode 100644
index fba771220..000000000
Binary files a/1-js/07-object-oriented-programming/11-instanceof/instanceof@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance.png b/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance.png
deleted file mode 100644
index 7cc655036..000000000
Binary files a/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance@2x.png b/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance@2x.png
deleted file mode 100644
index f53ecf68f..000000000
Binary files a/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/index.md b/1-js/07-object-oriented-programming/index.md
deleted file mode 100644
index 7053ada81..000000000
--- a/1-js/07-object-oriented-programming/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Objects, classes, inheritance
-
-In this section we return to objects and learn them even more in-depth.
diff --git a/1-js/07-object-oriented-programming/01-property-descriptors/article.md b/1-js/07-object-properties/01-property-descriptors/article.md
similarity index 94%
rename from 1-js/07-object-oriented-programming/01-property-descriptors/article.md
rename to 1-js/07-object-properties/01-property-descriptors/article.md
index 14d91800f..7768b3557 100644
--- a/1-js/07-object-oriented-programming/01-property-descriptors/article.md
+++ b/1-js/07-object-properties/01-property-descriptors/article.md
@@ -3,7 +3,9 @@
As we know, objects can store properties.
-Till now, a property was a simple "key-value" pair to us. But an object property is actually a more complex and tunable thing.
+Till now, a property was a simple "key-value" pair to us. But an object property is actually a more flexible and powerful thing.
+
+In this chapter we'll study additional configuration options, and in the next we'll see how to invisibly turn them into getter/setter functions.
## Property flags
@@ -296,14 +298,13 @@ Property descriptors work at the level of individual properties.
There are also methods that limit access to the *whole* object:
[Object.preventExtensions(obj)](mdn:js/Object/preventExtensions)
-: Forbids to add properties to the object.
+: Forbids the addition of new properties to the object.
[Object.seal(obj)](mdn:js/Object/seal)
-: Forbids to add/remove properties, sets for all existing properties `configurable: false`.
+: Forbids adding/removing of properties. Sets `configurable: false` for all existing properties.
[Object.freeze(obj)](mdn:js/Object/freeze)
-: Forbids to add/remove/change properties, sets for all existing properties `configurable: false, writable: false`.
-
+: Forbids adding/removing/changing of properties. Sets `configurable: false, writable: false` for all existing properties.
And also there are tests for them:
[Object.isExtensible(obj)](mdn:js/Object/isExtensible)
diff --git a/1-js/07-object-oriented-programming/02-property-accessors/article.md b/1-js/07-object-properties/02-property-accessors/article.md
similarity index 94%
rename from 1-js/07-object-oriented-programming/02-property-accessors/article.md
rename to 1-js/07-object-properties/02-property-accessors/article.md
index fa4d2216d..5b58b584b 100644
--- a/1-js/07-object-oriented-programming/02-property-accessors/article.md
+++ b/1-js/07-object-properties/02-property-accessors/article.md
@@ -85,11 +85,12 @@ alert(user.surname); // Cooper
Now we have a "virtual" property. It is readable and writable, but in fact does not exist.
```smart header="Accessor properties are only accessible with get/set"
-A property can either be a "data property" or an "accessor property", but not both.
+Once a property is defined with `get prop()` or `set prop()`, it's an accessor property, not a data property any more.
-Once a property is defined with `get prop()` or `set prop()`, it's an accessor property. So there must be a getter to read it, and must be a setter if we want to assign it.
+- If there's a getter -- we can read `object.prop`, otherwise we can't.
+- If there's a setter -- we can set `object.prop=...`, otherwise we can't.
-Sometimes it's normal that there's only a setter or only a getter. But the property won't be readable or writable in that case.
+And in either case we can't `delete` an accessor property.
```
diff --git a/1-js/07-object-properties/index.md b/1-js/07-object-properties/index.md
new file mode 100644
index 000000000..67fcccaff
--- /dev/null
+++ b/1-js/07-object-properties/index.md
@@ -0,0 +1,3 @@
+# Object properties configuration
+
+In this section we return to objects and study their properties even more in-depth.
diff --git a/1-js/08-error-handling/1-try-catch/try-catch-flow.png b/1-js/08-error-handling/1-try-catch/try-catch-flow.png
deleted file mode 100644
index 6a91b6329..000000000
Binary files a/1-js/08-error-handling/1-try-catch/try-catch-flow.png and /dev/null differ
diff --git a/1-js/08-error-handling/1-try-catch/try-catch-flow@2x.png b/1-js/08-error-handling/1-try-catch/try-catch-flow@2x.png
deleted file mode 100644
index 8bf9680fd..000000000
Binary files a/1-js/08-error-handling/1-try-catch/try-catch-flow@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/1-property-after-delete/solution.md b/1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/03-prototype-inheritance/1-property-after-delete/solution.md
rename to 1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/solution.md
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/1-property-after-delete/task.md b/1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/03-prototype-inheritance/1-property-after-delete/task.md
rename to 1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/task.md
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/2-search-algorithm/solution.md b/1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/03-prototype-inheritance/2-search-algorithm/solution.md
rename to 1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/solution.md
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/2-search-algorithm/task.md b/1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/03-prototype-inheritance/2-search-algorithm/task.md
rename to 1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/task.md
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/3-proto-and-this/solution.md b/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/03-prototype-inheritance/3-proto-and-this/solution.md
rename to 1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/solution.md
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/3-proto-and-this/task.md b/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/03-prototype-inheritance/3-proto-and-this/task.md
rename to 1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/task.md
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/4-hamster-proto/solution.md b/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/03-prototype-inheritance/4-hamster-proto/solution.md
rename to 1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/solution.md
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/4-hamster-proto/task.md b/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/03-prototype-inheritance/4-hamster-proto/task.md
rename to 1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/task.md
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/article.md b/1-js/08-prototypes/01-prototype-inheritance/article.md
similarity index 58%
rename from 1-js/07-object-oriented-programming/03-prototype-inheritance/article.md
rename to 1-js/08-prototypes/01-prototype-inheritance/article.md
index fa61cbc89..c4dd1aacb 100644
--- a/1-js/07-object-oriented-programming/03-prototype-inheritance/article.md
+++ b/1-js/08-prototypes/01-prototype-inheritance/article.md
@@ -12,7 +12,7 @@ In JavaScript, objects have a special hidden property `[[Prototype]]` (as named
-That `[[Prototype]]` has a "magical" meaning. When we want to read a property from `object`, and it's missing, JavaScript automatically takes it from the prototype. In programming, such thing is called "prototypal inheritance". Many cool language features and programming techniques are based on it.
+The prototype is a little bit "magical". When we want to read a property from `object`, and it's missing, JavaScript automatically takes it from the prototype. In programming, such thing is called "prototypal inheritance". Many cool language features and programming techniques are based on it.
The property `[[Prototype]]` is internal and hidden, but there are many ways to set it.
@@ -31,7 +31,13 @@ rabbit.__proto__ = animal;
*/!*
```
-Please note that `__proto__` is *not the same* as `[[Prototype]]`. That's a getter/setter for it. We'll talk about other ways of setting it later, but for now `__proto__` will do just fine.
+```smart header="`__proto__` is a historical getter/setter for `[[Prototype]]`"
+Please note that `__proto__` is *not the same* as `[[Prototype]]`. That's a getter/setter for it.
+
+It exists for historical reasons, in modern language it is replaced with functions `Object.getPrototypeOf/Object.setPrototypeOf` that also get/set the prototype. We'll study the reasons for that and these functions later.
+
+By the specification, `__proto__` must only be supported by browsers, but in fact all environments including server-side support it. For now, as `__proto__` notation is a little bit more intuitively obvious, we'll use it in the examples.
+```
If we look for a property in `rabbit`, and it's missing, JavaScript automatically takes it from `animal`.
@@ -62,7 +68,7 @@ Then, when `alert` tries to read property `rabbit.eats` `(**)`, it's not in `rab
-Here we can say that "`animal` is the prototype of `rabbit`" or "`rabbit` prototypally inherits from `animal`".
+Here we can say that "`animal` is the prototype of `rabbit`" or "`rabbit` prototypically inherits from `animal`".
So if `animal` has a lot of useful properties and methods, then they become automatically available in `rabbit`. Such properties are called "inherited".
@@ -106,13 +112,17 @@ let animal = {
let rabbit = {
jumps: true,
+*!*
__proto__: animal
+*/!*
};
let longEar = {
earLength: 10,
+*!*
__proto__: rabbit
-}
+*/!*
+};
// walk is taken from the prototype chain
longEar.walk(); // Animal walk
@@ -124,15 +134,15 @@ alert(longEar.jumps); // true (from rabbit)
There are actually only two limitations:
1. The references can't go in circles. JavaScript will throw an error if we try to assign `__proto__` in a circle.
-2. The value of `__proto__` can be either an object or `null`. All other values (like primitives) are ignored.
+2. The value of `__proto__` can be either an object or `null`, other types (like primitives) are ignored.
Also it may be obvious, but still: there can be only one `[[Prototype]]`. An object may not inherit from two others.
-## Read/write rules
+## Writing doesn't use prototype
The prototype is only used for reading properties.
-For data properties (not getters/setters) write/delete operations work directly with the object.
+Write/delete operations work directly with the object.
In the example below, we assign its own `walk` method to `rabbit`:
@@ -146,7 +156,7 @@ let animal = {
let rabbit = {
__proto__: animal
-}
+};
*!*
rabbit.walk = function() {
@@ -161,9 +171,9 @@ From now on, `rabbit.walk()` call finds the method immediately in the object and
-For getters/setters -- if we read/write a property, they are looked up in the prototype and invoked.
+That's for data properties only, not for accessors. If a property is a getter/setter, then it behaves like a function: getters/setters are looked up in the prototype.
-For instance, check out `admin.fullName` property in the code below:
+For that reason `admin.fullName` works correctly in the code below:
```js run
let user = {
@@ -194,15 +204,15 @@ Here in the line `(*)` the property `admin.fullName` has a getter in the prototy
## The value of "this"
-An interesting question may arise in the example above: what's the value of `this` inside `set fullName(value)`? Where the properties `this.name` and `this.surname` are written: `user` or `admin`?
+An interesting question may arise in the example above: what's the value of `this` inside `set fullName(value)`? Where the properties `this.name` and `this.surname` are written: into `user` or `admin`?
The answer is simple: `this` is not affected by prototypes at all.
**No matter where the method is found: in an object or its prototype. In a method call, `this` is always the object before the dot.**
-So, the setter actually uses `admin` as `this`, not `user`.
+So, the setter call `admin.fullName=` uses `admin` as `this`, not `user`.
-That is actually a super-important thing, because we may have a big object with many methods and inherit from it. Then we can run its methods on inherited objects and they will modify the state of these objects, not the big one.
+That is actually a super-important thing, because we may have a big object with many methods and inherit from it. Then inherited objects can run its methods, and they will modify the state of these objects, not the big one.
For instance, here `animal` represents a "method storage", and `rabbit` makes use of it.
@@ -241,10 +251,80 @@ If we had other objects like `bird`, `snake` etc inheriting from `animal`, they
As a result, methods are shared, but the object state is not.
+## for..in loop
+
+The `for..in` loops over inherited properties too.
+
+For instance:
+
+```js run
+let animal = {
+ eats: true
+};
+
+let rabbit = {
+ jumps: true,
+ __proto__: animal
+};
+
+*!*
+// Object.keys only return own keys
+alert(Object.keys(rabbit)); // jumps
+*/!*
+
+*!*
+// for..in loops over both own and inherited keys
+for(let prop in rabbit) alert(prop); // jumps, then eats
+*/!*
+```
+
+If that's not what we want, and we'd like to exclude inherited properties, there's a built-in method [obj.hasOwnProperty(key)](mdn:js/Object/hasOwnProperty): it returns `true` if `obj` has its own (not inherited) property named `key`.
+
+So we can filter out inherited properties (or do something else with them):
+
+```js run
+let animal = {
+ eats: true
+};
+
+let rabbit = {
+ jumps: true,
+ __proto__: animal
+};
+
+for(let prop in rabbit) {
+ let isOwn = rabbit.hasOwnProperty(prop);
+
+ if (isOwn) {
+ alert(`Our: ${prop}`); // Our: jumps
+ } else {
+ alert(`Inherited: ${prop}`); // Inherited: eats
+ }
+}
+```
+
+Here we have the following inheritance chain: `rabbit` inherits from `animal`, that inherits from `Object.prototype` (because `animal` is a literal object `{...}`, so it's by default), and then `null` above it:
+
+
+
+Note, there's one funny thing. Where is the method `rabbit.hasOwnProperty` coming from? We did not define it. Looking at the chain we can see that the method is provided by `Object.prototype.hasOwnProperty`. In other words, it's inherited.
+
+...But why `hasOwnProperty` does not appear in `for..in` loop, like `eats` and `jumps`, if it lists all inherited properties.
+
+The answer is simple: it's not enumerable. Just like all other properties of `Object.prototype`, it has `enumerable:false` flag. That's why they are not listed.
+
+```smart header="All other iteration methods ignore inherited properties"
+All other key/value-getting methods, such as `Object.keys`, `Object.values` and so on ignore inherited properties.
+
+They only operate on the object itself. Properties from the prototype are taken into account.
+```
+
## Summary
- In JavaScript, all objects have a hidden `[[Prototype]]` property that's either another object or `null`.
-- We can use `obj.__proto__` to access it (there are other ways too, to be covered soon).
+- We can use `obj.__proto__` to access it (a historical getter/setter, there are other ways, to be covered soon).
- The object referenced by `[[Prototype]]` is called a "prototype".
-- If we want to read a property of `obj` or call a method, and it doesn't exist, then JavaScript tries to find it in the prototype. Write/delete operations work directly on the object, they don't use the prototype (unless the property is actually a setter).
+- If we want to read a property of `obj` or call a method, and it doesn't exist, then JavaScript tries to find it in the prototype.
+- Write/delete operations for act directly on the object, they don't use the prototype (assuming it's a data property, not is a setter).
- If we call `obj.method()`, and the `method` is taken from the prototype, `this` still references `obj`. So methods always work with the current object even if they are inherited.
+- The `for..in` loop iterates over both own and inherited properties. All other key/value-getting methods only operate on the object itself.
diff --git a/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.png b/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.png
new file mode 100644
index 000000000..3ecff3fdd
Binary files /dev/null and b/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.png differ
diff --git a/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty@2x.png b/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty@2x.png
new file mode 100644
index 000000000..f80e61e68
Binary files /dev/null and b/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty@2x.png differ
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.png
new file mode 100644
index 000000000..48e02ad18
Binary files /dev/null and b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.png differ
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain@2x.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain@2x.png
new file mode 100644
index 000000000..1a04db885
Binary files /dev/null and b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain@2x.png differ
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.png
new file mode 100644
index 000000000..22b867fc8
Binary files /dev/null and b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.png differ
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2@2x.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2@2x.png
new file mode 100644
index 000000000..8d9f9f1ae
Binary files /dev/null and b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2@2x.png differ
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.png
new file mode 100644
index 000000000..bc76d64ba
Binary files /dev/null and b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.png differ
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3@2x.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3@2x.png
new file mode 100644
index 000000000..725a4c150
Binary files /dev/null and b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3@2x.png differ
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.png
new file mode 100644
index 000000000..29fc6d503
Binary files /dev/null and b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.png differ
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk@2x.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk@2x.png
new file mode 100644
index 000000000..724d6111b
Binary files /dev/null and b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk@2x.png differ
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.png
new file mode 100644
index 000000000..d50327f0e
Binary files /dev/null and b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.png differ
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit@2x.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit@2x.png
new file mode 100644
index 000000000..0506b92b6
Binary files /dev/null and b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit@2x.png differ
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.png b/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.png
new file mode 100644
index 000000000..c37d00780
Binary files /dev/null and b/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.png differ
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin@2x.png b/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin@2x.png
new file mode 100644
index 000000000..8c3f546eb
Binary files /dev/null and b/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin@2x.png differ
diff --git a/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.png b/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.png
new file mode 100644
index 000000000..3924233dd
Binary files /dev/null and b/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.png differ
diff --git a/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object@2x.png b/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object@2x.png
new file mode 100644
index 000000000..5350a1935
Binary files /dev/null and b/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object@2x.png differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/1-changing-prototype/solution.md b/1-js/08-prototypes/02-function-prototype/1-changing-prototype/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/04-function-prototype/1-changing-prototype/solution.md
rename to 1-js/08-prototypes/02-function-prototype/1-changing-prototype/solution.md
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/1-changing-prototype/task.md b/1-js/08-prototypes/02-function-prototype/1-changing-prototype/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/04-function-prototype/1-changing-prototype/task.md
rename to 1-js/08-prototypes/02-function-prototype/1-changing-prototype/task.md
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/4-new-object-same-constructor/solution.md b/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/04-function-prototype/4-new-object-same-constructor/solution.md
rename to 1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/4-new-object-same-constructor/task.md b/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/04-function-prototype/4-new-object-same-constructor/task.md
rename to 1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/task.md
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/article.md b/1-js/08-prototypes/02-function-prototype/article.md
similarity index 75%
rename from 1-js/07-object-oriented-programming/04-function-prototype/article.md
rename to 1-js/08-prototypes/02-function-prototype/article.md
index d4b453850..2089e96cf 100644
--- a/1-js/07-object-oriented-programming/04-function-prototype/article.md
+++ b/1-js/08-prototypes/02-function-prototype/article.md
@@ -1,18 +1,14 @@
# F.prototype
-In modern JavaScript we can set a prototype using `__proto__`, as described in the previous article. But it wasn't like that all the time.
+Remember, new objects can be created with a constructor function, like `new F()`.
-JavaScript has had prototypal inheritance from the beginning. It was one of the core features of the language.
+If `F.prototype` is an object, then `new` operator uses it to set `[[Prototype]]` for the new object.
-But in the old times, there was another (and the only) way to set it: to use a `"prototype"` property of the constructor function. And there are still many scripts that use it.
+```smart
+JavaScript had prototypal inheritance from the beginning. It was one of the core features of the language.
-## The "prototype" property
-
-As we know already, `new F()` creates a new object.
-
-When a new object is created with `new F()`, the object's `[[Prototype]]` is set to `F.prototype`.
-
-In other words, if `F` has a `prototype` property with a value of the object type, then `new` operator uses it to set `[[Prototype]]` for the new object.
+But in the old times, there was no direct access to it. The only thing that worked reliably was a `"prototype"` property of the constructor function, described in this chapter. So there are many scripts that still use it.
+```
Please note that `F.prototype` here means a regular property named `"prototype"` on `F`. It sounds something similar to the term "prototype", but here we really mean a regular property with this name.
@@ -42,8 +38,13 @@ That's the resulting picture:
-On the picture, `"prototype"` is a horizontal arrow, it's a regular property, and `[[Prototype]]` is vertical, meaning the inheritance of `rabbit` from `animal`.
+On the picture, `"prototype"` is a horizontal arrow, meaning a regular property, and `[[Prototype]]` is vertical, meaning the inheritance of `rabbit` from `animal`.
+
+```smart header="`F.prototype` only used at `new F` time"
+`F.prototype` property is only used when `new F` is called, it assigns `[[Prototype]]` of the new object. After that, there's no connection between `F.prototype` and the new object. Think of it as a "one-time gift".
+If, after the creation, `F.prototype` property changes (`F.prototype = `), then new objects created by `new F` will have another object as `[[Prototype]]`, but already existing objects keep the old one.
+```
## Default F.prototype, constructor property
@@ -139,7 +140,7 @@ Rabbit.prototype.jumps = true
// the default Rabbit.prototype.constructor is preserved
```
-Or, alternatively, recreate the `constructor` property it manually:
+Or, alternatively, recreate the `constructor` property manually:
```js
Rabbit.prototype = {
@@ -161,7 +162,7 @@ Everything is quite simple, just few notes to make things clear:
- The `F.prototype` property is not the same as `[[Prototype]]`. The only thing `F.prototype` does: it sets `[[Prototype]]` of new objects when `new F()` is called.
- The value of `F.prototype` should be either an object or null: other values won't work.
-- The `"prototype"` property only has such a special effect when is set to a constructor function, and invoked with `new`.
+- The `"prototype"` property only has such a special effect when set on a constructor function, and invoked with `new`.
On regular objects the `prototype` is nothing special:
```js
diff --git a/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.png b/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.png
new file mode 100644
index 000000000..6ab9c6934
Binary files /dev/null and b/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.png differ
diff --git a/1-js/08-prototypes/02-function-prototype/function-prototype-constructor@2x.png b/1-js/08-prototypes/02-function-prototype/function-prototype-constructor@2x.png
new file mode 100644
index 000000000..3beb0a573
Binary files /dev/null and b/1-js/08-prototypes/02-function-prototype/function-prototype-constructor@2x.png differ
diff --git a/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring.png b/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring.png
new file mode 100644
index 000000000..c47938674
Binary files /dev/null and b/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring.png differ
diff --git a/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring@2x.png b/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring@2x.png
new file mode 100644
index 000000000..293c88bf9
Binary files /dev/null and b/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring@2x.png differ
diff --git a/1-js/08-prototypes/02-function-prototype/native-prototypes-classes.png b/1-js/08-prototypes/02-function-prototype/native-prototypes-classes.png
new file mode 100644
index 000000000..c4658a929
Binary files /dev/null and b/1-js/08-prototypes/02-function-prototype/native-prototypes-classes.png differ
diff --git a/1-js/08-prototypes/02-function-prototype/native-prototypes-classes@2x.png b/1-js/08-prototypes/02-function-prototype/native-prototypes-classes@2x.png
new file mode 100644
index 000000000..79445fac9
Binary files /dev/null and b/1-js/08-prototypes/02-function-prototype/native-prototypes-classes@2x.png differ
diff --git a/1-js/08-prototypes/02-function-prototype/object-prototype-1.png b/1-js/08-prototypes/02-function-prototype/object-prototype-1.png
new file mode 100644
index 000000000..a69cad4a1
Binary files /dev/null and b/1-js/08-prototypes/02-function-prototype/object-prototype-1.png differ
diff --git a/1-js/08-prototypes/02-function-prototype/object-prototype-1@2x.png b/1-js/08-prototypes/02-function-prototype/object-prototype-1@2x.png
new file mode 100644
index 000000000..9d661ac17
Binary files /dev/null and b/1-js/08-prototypes/02-function-prototype/object-prototype-1@2x.png differ
diff --git a/1-js/08-prototypes/02-function-prototype/object-prototype.png b/1-js/08-prototypes/02-function-prototype/object-prototype.png
new file mode 100644
index 000000000..820ffcc73
Binary files /dev/null and b/1-js/08-prototypes/02-function-prototype/object-prototype.png differ
diff --git a/1-js/08-prototypes/02-function-prototype/object-prototype@2x.png b/1-js/08-prototypes/02-function-prototype/object-prototype@2x.png
new file mode 100644
index 000000000..1eb7e8749
Binary files /dev/null and b/1-js/08-prototypes/02-function-prototype/object-prototype@2x.png differ
diff --git a/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.png b/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.png
new file mode 100644
index 000000000..4b381460a
Binary files /dev/null and b/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.png differ
diff --git a/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit@2x.png b/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit@2x.png
new file mode 100644
index 000000000..c6e6ab5f6
Binary files /dev/null and b/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit@2x.png differ
diff --git a/1-js/08-prototypes/02-function-prototype/rabbit-animal-object.png b/1-js/08-prototypes/02-function-prototype/rabbit-animal-object.png
new file mode 100644
index 000000000..3924233dd
Binary files /dev/null and b/1-js/08-prototypes/02-function-prototype/rabbit-animal-object.png differ
diff --git a/1-js/08-prototypes/02-function-prototype/rabbit-animal-object@2x.png b/1-js/08-prototypes/02-function-prototype/rabbit-animal-object@2x.png
new file mode 100644
index 000000000..5350a1935
Binary files /dev/null and b/1-js/08-prototypes/02-function-prototype/rabbit-animal-object@2x.png differ
diff --git a/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.png b/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.png
new file mode 100644
index 000000000..8f3519a74
Binary files /dev/null and b/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.png differ
diff --git a/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor@2x.png b/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor@2x.png
new file mode 100644
index 000000000..07acb8f4a
Binary files /dev/null and b/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor@2x.png differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/1-defer-to-prototype/solution.md b/1-js/08-prototypes/03-native-prototypes/1-defer-to-prototype/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/05-native-prototypes/1-defer-to-prototype/solution.md
rename to 1-js/08-prototypes/03-native-prototypes/1-defer-to-prototype/solution.md
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/1-defer-to-prototype/task.md b/1-js/08-prototypes/03-native-prototypes/1-defer-to-prototype/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/05-native-prototypes/1-defer-to-prototype/task.md
rename to 1-js/08-prototypes/03-native-prototypes/1-defer-to-prototype/task.md
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/2-defer-to-prototype-extended/solution.md b/1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/05-native-prototypes/2-defer-to-prototype-extended/solution.md
rename to 1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/solution.md
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/2-defer-to-prototype-extended/task.md b/1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/05-native-prototypes/2-defer-to-prototype-extended/task.md
rename to 1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/task.md
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/article.md b/1-js/08-prototypes/03-native-prototypes/article.md
similarity index 61%
rename from 1-js/07-object-oriented-programming/05-native-prototypes/article.md
rename to 1-js/08-prototypes/03-native-prototypes/article.md
index 4777f356f..d540be5f2 100644
--- a/1-js/07-object-oriented-programming/05-native-prototypes/article.md
+++ b/1-js/08-prototypes/03-native-prototypes/article.md
@@ -15,17 +15,17 @@ alert( obj ); // "[object Object]" ?
Where's the code that generates the string `"[object Object]"`? That's a built-in `toString` method, but where is it? The `obj` is empty!
-...But the short notation `obj = {}` is the same as `obj = new Object()`, where `Object` -- is a built-in object constructor function. And that function has `Object.prototype` that references a huge object with `toString` and other functions.
+...But the short notation `obj = {}` is the same as `obj = new Object()`, where `Object` is a built-in object constructor function, with its own `prototype` referencing a huge object with `toString` and other methods.
-Like this (all that is built-in):
+Here's what's going on:
-When `new Object()` is called (or a literal object `{...}` is created), the `[[Prototype]]` of it is set to `Object.prototype` by the rule that we've discussed in the previous chapter:
+When `new Object()` is called (or a literal object `{...}` is created), the `[[Prototype]]` of it is set to `Object.prototype` according to the rule that we discussed in the previous chapter:
-Afterwards when `obj.toString()` is called -- the method is taken from `Object.prototype`.
+So then when `obj.toString()` is called the method is taken from `Object.prototype`.
We can check it like this:
@@ -48,7 +48,7 @@ Other built-in objects such as `Array`, `Date`, `Function` and others also keep
For instance, when we create an array `[1, 2, 3]`, the default `new Array()` constructor is used internally. So the array data is written into the new object, and `Array.prototype` becomes its prototype and provides methods. That's very memory-efficient.
-By specification, all built-in prototypes have `Object.prototype` on the top. Sometimes people say that "everything inherits from objects".
+By specification, all of the built-in prototypes have `Object.prototype` on the top. Sometimes people say that "everything inherits from objects".
Here's the overall picture (for 3 built-ins to fit):
@@ -82,11 +82,11 @@ As we've seen before, `Object.prototype` has `toString` as well, but `Array.prot
-In-browser tools like Chrome developer console also show inheritance (may need to use `console.dir` for built-in objects):
+In-browser tools like Chrome developer console also show inheritance (`console.dir` may need to be used for built-in objects):
-Other built-in objects also work the same way. Even functions. They are objects of a built-in `Function` constructor, and their methods: `call/apply` and others are taken from `Function.prototype`. Functions have their own `toString` too.
+Other built-in objects also work the same way. Even functions -- they are objects of a built-in `Function` constructor, and their methods (`call`/`apply` and others) are taken from `Function.prototype`. Functions have their own `toString` too.
```js run
function f() {}
@@ -119,11 +119,19 @@ String.prototype.show = function() {
"BOOM!".show(); // BOOM!
```
-During the process of development we may have ideas which new built-in methods we'd like to have. And there may be a slight temptation to add them to native prototypes. But that is generally a bad idea.
+During the process of development, we may have ideas for new built-in methods we'd like to have, and we may be tempted to add them to native prototypes. But that is generally a bad idea.
-Prototypes are global, so it's easy to get a conflict. If two libraries add a method `String.prototype.show`, then one of them overwrites the other one.
+```warn
+Prototypes are global, so it's easy to get a conflict. If two libraries add a method `String.prototype.show`, then one of them will be overwriting the other.
-In modern programming, there is only one case when modifying native prototypes is approved. That's polyfills. In other words, if there's a method in JavaScript specification that is not yet supported by our JavaScript engine (or any of those that we want to support), then may implement it manually and populate the built-in prototype with it.
+So, generally, modifying a native prototype is considered a bad idea.
+```
+
+**In modern programming, there is only one case where modifying native prototypes is approved. That's polyfilling.**
+
+Polyfilling is a term for making a substitute for a method that exists in JavaScript specification, but not yet supported by current JavaScript engine.
+
+Then we may implement it manually and populate the built-in prototype with it.
For instance:
@@ -134,9 +142,9 @@ if (!String.prototype.repeat) { // if there's no such method
String.prototype.repeat = function(n) {
// repeat the string n times
- // actually, the code should be more complex than that,
- // throw errors for negative values of "n"
- // the full algorithm is in the specification
+ // actually, the code should be a little bit more complex than that
+ // (the full algorithm is in the specification)
+ // but even an imperfect polyfill is often considered good enough
return new Array(n + 1).join(this);
};
}
@@ -144,37 +152,45 @@ if (!String.prototype.repeat) { // if there's no such method
alert( "La".repeat(3) ); // LaLaLa
```
+
## Borrowing from prototypes
-In the chapter we talked about method borrowing:
+In the chapter we talked about method borrowing.
+
+That's when we take a method from one object and copy it into another.
+
+Some methods of native prototypes are often borrowed.
+
+For instance, if we're making an array-like object, we may want to copy some array methods to it.
+
+E.g.
```js run
-function showArgs() {
+let obj = {
+ 0: "Hello",
+ 1: "world!",
+ length: 2,
+};
+
*!*
- // borrow join from array and call in the context of arguments
- alert( [].join.call(arguments, " - ") );
+obj.join = Array.prototype.join;
*/!*
-}
-showArgs("John", "Pete", "Alice"); // John - Pete - Alice
+alert( obj.join(',') ); // Hello,world!
```
-Because `join` resides in `Array.prototype`, we can call it from there directly and rewrite it as:
+It works, because the internal algorithm of the built-in `join` method only cares about the correct indexes and the `length` property, it doesn't check that the object is indeed the array. And many built-in methods are like that.
-```js
-function showArgs() {
-*!*
- alert( Array.prototype.join.call(arguments, " - ") );
-*/!*
-}
-```
+Another possibility is to inherit by setting `obj.__proto__` to `Array.prototype`, so all `Array` methods are automatically available in `obj`.
+
+But that's impossible if `obj` already inherits from another object. Remember, we only can inherit from one object at a time.
-That's more efficient, because it avoids the creation of an extra array object `[]`. On the other hand, it is longer to write.
+Borrowing methods is flexible, it allows to mix functionality from different objects if needed.
## Summary
- All built-in objects follow the same pattern:
- 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`. There are no wrapper objects only for `undefined` and `null`.
+- 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.
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/console_dir_array.png b/1-js/08-prototypes/03-native-prototypes/console_dir_array.png
similarity index 100%
rename from 1-js/07-object-oriented-programming/05-native-prototypes/console_dir_array.png
rename to 1-js/08-prototypes/03-native-prototypes/console_dir_array.png
diff --git a/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.png b/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.png
new file mode 100644
index 000000000..6ab9c6934
Binary files /dev/null and b/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.png differ
diff --git a/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor@2x.png b/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor@2x.png
new file mode 100644
index 000000000..3beb0a573
Binary files /dev/null and b/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor@2x.png differ
diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.png b/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.png
new file mode 100644
index 000000000..c47938674
Binary files /dev/null and b/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.png differ
diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring@2x.png b/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring@2x.png
new file mode 100644
index 000000000..293c88bf9
Binary files /dev/null and b/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring@2x.png differ
diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.png b/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.png
new file mode 100644
index 000000000..c4658a929
Binary files /dev/null and b/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.png differ
diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes@2x.png b/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes@2x.png
new file mode 100644
index 000000000..79445fac9
Binary files /dev/null and b/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes@2x.png differ
diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-1.png b/1-js/08-prototypes/03-native-prototypes/object-prototype-1.png
new file mode 100644
index 000000000..a69cad4a1
Binary files /dev/null and b/1-js/08-prototypes/03-native-prototypes/object-prototype-1.png differ
diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-1@2x.png b/1-js/08-prototypes/03-native-prototypes/object-prototype-1@2x.png
new file mode 100644
index 000000000..9d661ac17
Binary files /dev/null and b/1-js/08-prototypes/03-native-prototypes/object-prototype-1@2x.png differ
diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-null.png b/1-js/08-prototypes/03-native-prototypes/object-prototype-null.png
new file mode 100644
index 000000000..792c4f423
Binary files /dev/null and b/1-js/08-prototypes/03-native-prototypes/object-prototype-null.png differ
diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-null@2x.png b/1-js/08-prototypes/03-native-prototypes/object-prototype-null@2x.png
new file mode 100644
index 000000000..d97efa884
Binary files /dev/null and b/1-js/08-prototypes/03-native-prototypes/object-prototype-null@2x.png differ
diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype.png b/1-js/08-prototypes/03-native-prototypes/object-prototype.png
new file mode 100644
index 000000000..820ffcc73
Binary files /dev/null and b/1-js/08-prototypes/03-native-prototypes/object-prototype.png differ
diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype@2x.png b/1-js/08-prototypes/03-native-prototypes/object-prototype@2x.png
new file mode 100644
index 000000000..1eb7e8749
Binary files /dev/null and b/1-js/08-prototypes/03-native-prototypes/object-prototype@2x.png differ
diff --git a/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.png b/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.png
new file mode 100644
index 000000000..4b381460a
Binary files /dev/null and b/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.png differ
diff --git a/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit@2x.png b/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit@2x.png
new file mode 100644
index 000000000..c6e6ab5f6
Binary files /dev/null and b/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit@2x.png differ
diff --git a/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.png b/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.png
new file mode 100644
index 000000000..8f3519a74
Binary files /dev/null and b/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.png differ
diff --git a/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor@2x.png b/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor@2x.png
new file mode 100644
index 000000000..07acb8f4a
Binary files /dev/null and b/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor@2x.png differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/2-dictionary-tostring/solution.md b/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/solution.md
similarity index 79%
rename from 1-js/07-object-oriented-programming/06-prototype-methods/2-dictionary-tostring/solution.md
rename to 1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/solution.md
index debaecd6a..a92e17900 100644
--- a/1-js/07-object-oriented-programming/06-prototype-methods/2-dictionary-tostring/solution.md
+++ b/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/solution.md
@@ -1,7 +1,7 @@
The method can take all enumerable keys using `Object.keys` and output their list.
-To make `toString` non-enumerable, let's define it using a property descriptor. The syntax of `Object.create` allows to provide an object with property descriptors as the second argument.
+To make `toString` non-enumerable, let's define it using a property descriptor. The syntax of `Object.create` allows us to provide an object with property descriptors as the second argument.
```js run
*!*
@@ -27,3 +27,5 @@ alert(dictionary); // "apple,__proto__"
```
When we create a property using a descriptor, its flags are `false` by default. So in the code above, `dictionary.toString` is non-enumerable.
+
+See the the chapter [](info:property-descriptors) for review.
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/2-dictionary-tostring/task.md b/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/06-prototype-methods/2-dictionary-tostring/task.md
rename to 1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/task.md
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/solution.md b/1-js/08-prototypes/04-prototype-methods/3-compare-calls/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/solution.md
rename to 1-js/08-prototypes/04-prototype-methods/3-compare-calls/solution.md
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/task.md b/1-js/08-prototypes/04-prototype-methods/3-compare-calls/task.md
similarity index 92%
rename from 1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/task.md
rename to 1-js/08-prototypes/04-prototype-methods/3-compare-calls/task.md
index 92653bd8c..09bb7f1ed 100644
--- a/1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/task.md
+++ b/1-js/08-prototypes/04-prototype-methods/3-compare-calls/task.md
@@ -2,7 +2,7 @@ importance: 5
---
-# The difference beteeen calls
+# The difference between calls
Let's create a new `rabbit` object:
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/article.md b/1-js/08-prototypes/04-prototype-methods/article.md
similarity index 59%
rename from 1-js/07-object-oriented-programming/06-prototype-methods/article.md
rename to 1-js/08-prototypes/04-prototype-methods/article.md
index e253e8af7..a9c21faaf 100644
--- a/1-js/07-object-oriented-programming/06-prototype-methods/article.md
+++ b/1-js/08-prototypes/04-prototype-methods/article.md
@@ -1,14 +1,18 @@
-# Methods for prototypes
+# Prototype methods, objects without __proto__
-In this chapter we cover additional methods to work with a prototype.
+In the first chapter of this section, we mentioned that there are modern methods to setup a prototype.
-There are also other ways to get/set a prototype, besides those that we already know:
+The `__proto__` is considered outdated and somewhat deprecated (in browser-only part of the JavaScript standard).
+
+The modern methods are:
- [Object.create(proto[, descriptors])](mdn:js/Object/create) -- creates an empty object with given `proto` as `[[Prototype]]` and optional property descriptors.
- [Object.getPrototypeOf(obj)](mdn:js/Object/getPrototypeOf) -- returns the `[[Prototype]]` of `obj`.
- [Object.setPrototypeOf(obj, proto)](mdn:js/Object/setPrototypeOf) -- sets the `[[Prototype]]` of `obj` to `proto`.
+These should be used instead of `__proto__`.
+
For instance:
```js run
@@ -68,11 +72,17 @@ 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 allowed to create objects with the given prototype, but did not allow to get/set it. So browsers implemented non-standard `__proto__` accessor that allowed to get/set a prototype at any time.
-- Later in the year 2015: `Object.setPrototypeOf` and `Object.getPrototypeOf` were added to the standard. The `__proto__` was de-facto implemented everywhere, so it made its way to the Annex B of the standard, that is optional for non-browser environments.
+- 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.
-Technically, we can get/set `[[Prototype]]` at any time. But usually we only set it once at the object creation time, and then do not modify: `rabbit` inherits from `animal`, and that is not going to change. And JavaScript engines are highly optimized to that. Changing a prototype "on-the-fly" with `Object.setPrototypeOf` or `obj.__proto__=` is a very slow operation. But it is possible.
+Why was `__proto__` replaced by the functions `getPrototypeOf/setPrototypeOf`? That's an interesting question, requiring us to understand why `__proto__` is bad. Read on to get the answer.
+
+```warn header="Don't reset `[[Prototype]]` unless the speed doesn't matter"
+Technically, we can get/set `[[Prototype]]` at any time. But usually we only set it once at the object creation time, and then do not modify: `rabbit` inherits from `animal`, and that is not going to change.
+
+And JavaScript engines are highly optimized to that. Changing a prototype "on-the-fly" with `Object.setPrototypeOf` or `obj.__proto__=` is a very slow operation, it breaks internal optimizations for object property access operations. So evade it unless you know what you're doing, or JavaScript speed totally doesn't matter for you.
+```
## "Very plain" objects
@@ -95,11 +105,13 @@ Here if the user types in `__proto__`, the assignment is ignored!
That shouldn't surprise us. The `__proto__` property is special: it must be either an object or `null`, a string can not become a prototype.
-But we did not intend to implement such behavior, right? We want to store key/value pairs, and the key named `"__proto__"` was not properly saved. So that's a bug. Here the consequences are not terrible. But in other cases the prototype may indeed be changed, so the execution may go wrong in totally unexpected ways.
+But we didn't *intend* to implement such behavior, right? We want to store key/value pairs, and the key named `"__proto__"` was not properly saved. So that's a bug!
+
+Here the consequences are not terrible. But in other cases, we may be assigning object values, then the prototype may indeed be changed. As the result, the execution will go wrong in totally unexpected ways.
What's worst -- usually developers do not think about such possibility at all. That makes such bugs hard to notice and even turn them into vulnerabilities, especially when JavaScript is used on server-side.
-Such thing happens only with `__proto__`. All other properties are "assignable" normally.
+Unexpected things also may happen when accessing `toString` property -- that's a function by default, and other built-in properties.
How to evade the problem?
@@ -111,9 +123,9 @@ The `__proto__` is not a property of an object, but an accessor property of `Obj
-So, if `obj.__proto__` is read or assigned, the corresponding getter/setter is called from its prototype, and it gets/sets `[[Prototype]]`.
+So, if `obj.__proto__` is read or set, the corresponding getter/setter is called from its prototype, and it gets/sets `[[Prototype]]`.
-As it was said in the beginning: `__proto__` is a way to access `[[Prototype]]`, it is not `[[Prototype]]` itself.
+As it was said in the beginning of this tutorial section: `__proto__` is a way to access `[[Prototype]]`, it is not `[[Prototype]]` itself.
Now, if we want to use an object as an associative array, we can do it with a little trick:
@@ -153,98 +165,36 @@ Please note that most object-related methods are `Object.something(...)`, like `
```js run
let chineseDictionary = Object.create(null);
-chineseDictionary.hello = "ni hao";
-chineseDictionary.bye = "zai jian";
+chineseDictionary.hello = "你好";
+chineseDictionary.bye = "再见";
alert(Object.keys(chineseDictionary)); // hello,bye
```
-## Getting all properties
-
-There are many ways to get keys/values from an object.
-
-We already know these ones:
-
-- [Object.keys(obj)](mdn:js/Object/keys) / [Object.values(obj)](mdn:js/Object/values) / [Object.entries(obj)](mdn:js/Object/entries) -- returns an array of enumerable own string property names/values/key-value pairs. These methods only list *enumerable* properties, and those that have *strings as keys*.
-
-If we want symbolic properties:
-
-- [Object.getOwnPropertySymbols(obj)](mdn:js/Object/getOwnPropertySymbols) -- returns an array of all own symbolic property names.
-
-If we want non-enumerable properties:
-
-- [Object.getOwnPropertyNames(obj)](mdn:js/Object/getOwnPropertyNames) -- returns an array of all own string property names.
-
-If we want *all* properties:
-
-- [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) -- returns an array of all own property names.
-
-These methods are a bit different about which properties they return, but all of them operate on the object itself. Properties from the prototype are not listed.
-
-The `for..in` loop is different: it loops over inherited properties too.
-
-For instance:
-
-```js run
-let animal = {
- eats: true
-};
-
-let rabbit = {
- jumps: true,
- __proto__: animal
-};
+## Summary
-*!*
-// only own keys
-alert(Object.keys(rabbit)); // jumps
-*/!*
+Modern methods to setup and directly access the prototype are:
-*!*
-// inherited keys too
-for(let prop in rabbit) alert(prop); // jumps, then eats
-*/!*
-```
+- [Object.create(proto[, descriptors])](mdn:js/Object/create) -- creates an empty object with given `proto` as `[[Prototype]]` (can be `null`) and optional property descriptors.
+- [Object.getPrototypeOf(obj)](mdn:js/Object.getPrototypeOf) -- returns the `[[Prototype]]` of `obj` (same as `__proto__` getter).
+- [Object.setPrototypeOf(obj, proto)](mdn:js/Object.setPrototypeOf) -- sets the `[[Prototype]]` of `obj` to `proto` (same as `__proto__` setter).
-If we want to distinguish inherited properties, there's a built-in method [obj.hasOwnProperty(key)](mdn:js/Object/hasOwnProperty): it returns `true` if `obj` has its own (not inherited) property named `key`.
+The built-in `__proto__` getter/setter is unsafe if we'd want to put user-generated keys in to an object. Just because a user may enter "__proto__" as the key, and there'll be an error with hopefully easy, but generally unpredictable consequences.
-So we can filter out inherited properties (or do something else with them):
+So we can either use `Object.create(null)` to create a "very plain" object without `__proto__`, or stick to `Map` objects for that.
-```js run
-let animal = {
- eats: true
-};
+Also, `Object.create` provides an easy way to shallow-copy an object with all descriptors:
-let rabbit = {
- jumps: true,
- __proto__: animal
-};
-
-for(let prop in rabbit) {
- let isOwn = rabbit.hasOwnProperty(prop);
- alert(`${prop}: ${isOwn}`); // jumps:true, then eats:false
-}
+```js
+let clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));
```
-Here we have the following inheritance chain: `rabbit`, then `animal`, then `Object.prototype` (because `animal` is a literal object `{...}`, so it's by default), and then `null` above it:
-
-
-
-Note, there's one funny thing. Where is the method `rabbit.hasOwnProperty` coming from? Looking at the chain we can see that the method is provided by `Object.prototype.hasOwnProperty`. In other words, it's inherited.
-...But why `hasOwnProperty` does not appear in `for..in` loop, if it lists all inherited properties? The answer is simple: it's not enumerable. Just like all other properties of `Object.prototype`. That's why they are not listed.
-## Summary
-
-Here's a brief list of methods we discussed in this chapter -- as a recap:
-
-- [Object.create(proto[, descriptors])](mdn:js/Object/create) -- creates an empty object with given `proto` as `[[Prototype]]` (can be `null`) and optional property descriptors.
-- [Object.getPrototypeOf(obj)](mdn:js/Object.getPrototypeOf) -- returns the `[[Prototype]]` of `obj` (same as `__proto__` getter).
-- [Object.setPrototypeOf(obj, proto)](mdn:js/Object.setPrototypeOf) -- sets the `[[Prototype]]` of `obj` to `proto` (same as `__proto__` setter).
- [Object.keys(obj)](mdn:js/Object/keys) / [Object.values(obj)](mdn:js/Object/values) / [Object.entries(obj)](mdn:js/Object/entries) -- returns an array of enumerable own string property names/values/key-value pairs.
-- [Object.getOwnPropertySymbols(obj)](mdn:js/Object/getOwnPropertySymbols) -- returns an array of all own symbolic property names.
-- [Object.getOwnPropertyNames(obj)](mdn:js/Object/getOwnPropertyNames) -- returns an array of all own string property names.
-- [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) -- returns an array of all own property names.
-- [obj.hasOwnProperty(key)](mdn:js/Object/hasOwnProperty): it returns `true` if `obj` has its own (not inherited) property named `key`.
+- [Object.getOwnPropertySymbols(obj)](mdn:js/Object/getOwnPropertySymbols) -- returns an array of all own symbolic keys.
+- [Object.getOwnPropertyNames(obj)](mdn:js/Object/getOwnPropertyNames) -- returns an array of all own string keys.
+- [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) -- returns an array of all own keys.
+- [obj.hasOwnProperty(key)](mdn:js/Object/hasOwnProperty): it returns `true` if `obj` has its own (not inherited) keytt named `key`.
We also made it clear that `__proto__` is a getter/setter for `[[Prototype]]` and resides in `Object.prototype`, just as other methods.
diff --git a/1-js/08-prototypes/04-prototype-methods/object-prototype-2.png b/1-js/08-prototypes/04-prototype-methods/object-prototype-2.png
new file mode 100644
index 000000000..343435af6
Binary files /dev/null and b/1-js/08-prototypes/04-prototype-methods/object-prototype-2.png differ
diff --git a/1-js/08-prototypes/04-prototype-methods/object-prototype-2@2x.png b/1-js/08-prototypes/04-prototype-methods/object-prototype-2@2x.png
new file mode 100644
index 000000000..86b8a678e
Binary files /dev/null and b/1-js/08-prototypes/04-prototype-methods/object-prototype-2@2x.png differ
diff --git a/1-js/08-prototypes/04-prototype-methods/object-prototype-null.png b/1-js/08-prototypes/04-prototype-methods/object-prototype-null.png
new file mode 100644
index 000000000..792c4f423
Binary files /dev/null and b/1-js/08-prototypes/04-prototype-methods/object-prototype-null.png differ
diff --git a/1-js/08-prototypes/04-prototype-methods/object-prototype-null@2x.png b/1-js/08-prototypes/04-prototype-methods/object-prototype-null@2x.png
new file mode 100644
index 000000000..d97efa884
Binary files /dev/null and b/1-js/08-prototypes/04-prototype-methods/object-prototype-null@2x.png differ
diff --git a/1-js/08-prototypes/index.md b/1-js/08-prototypes/index.md
new file mode 100644
index 000000000..8554a0e30
--- /dev/null
+++ b/1-js/08-prototypes/index.md
@@ -0,0 +1 @@
+# Prototypes, inheritance
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/source.view/clock.js b/1-js/09-classes/01-class/1-rewrite-to-class/_js.view/solution.js
similarity index 64%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/source.view/clock.js
rename to 1-js/09-classes/01-class/1-rewrite-to-class/_js.view/solution.js
index 8009273e3..0b31cf334 100644
--- a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/source.view/clock.js
+++ b/1-js/09-classes/01-class/1-rewrite-to-class/_js.view/solution.js
@@ -1,9 +1,9 @@
class Clock {
constructor({ template }) {
- this._template = template;
+ this.template = template;
}
- _render() {
+ render() {
let date = new Date();
let hours = date.getHours();
@@ -15,7 +15,7 @@ class Clock {
let secs = date.getSeconds();
if (secs < 10) secs = '0' + secs;
- let output = this._template
+ let output = this.template
.replace('h', hours)
.replace('m', mins)
.replace('s', secs);
@@ -24,11 +24,15 @@ class Clock {
}
stop() {
- clearInterval(this._timer);
+ clearInterval(this.timer);
}
start() {
- this._render();
- this._timer = setInterval(() => this._render(), 1000);
+ this.render();
+ this.timer = setInterval(() => this.render(), 1000);
}
}
+
+
+let clock = new Clock({template: 'h:m:s'});
+clock.start();
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/source.view/clock.js b/1-js/09-classes/01-class/1-rewrite-to-class/_js.view/source.js
similarity index 90%
rename from 1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/source.view/clock.js
rename to 1-js/09-classes/01-class/1-rewrite-to-class/_js.view/source.js
index c4bfaa0ff..f1749c8ba 100644
--- a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/source.view/clock.js
+++ b/1-js/09-classes/01-class/1-rewrite-to-class/_js.view/source.js
@@ -32,3 +32,6 @@ function Clock({ template }) {
};
}
+
+let clock = new Clock({template: 'h:m:s'});
+clock.start();
diff --git a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.md b/1-js/09-classes/01-class/1-rewrite-to-class/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.md
rename to 1-js/09-classes/01-class/1-rewrite-to-class/solution.md
diff --git a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/task.md b/1-js/09-classes/01-class/1-rewrite-to-class/task.md
similarity index 53%
rename from 1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/task.md
rename to 1-js/09-classes/01-class/1-rewrite-to-class/task.md
index a29d347f5..05365e410 100644
--- a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/task.md
+++ b/1-js/09-classes/01-class/1-rewrite-to-class/task.md
@@ -4,6 +4,6 @@ importance: 5
# Rewrite to class
-Rewrite the `Clock` class from prototypes to the modern "class" syntax.
+The `Clock` class is written in functional style. Rewrite it the "class" syntax.
P.S. The clock ticks in the console, open it to see.
diff --git a/1-js/09-classes/01-class/article.md b/1-js/09-classes/01-class/article.md
new file mode 100644
index 000000000..30a958df7
--- /dev/null
+++ b/1-js/09-classes/01-class/article.md
@@ -0,0 +1,351 @@
+
+# Class basic syntax
+
+```quote author="Wikipedia"
+In object-oriented programming, a *class* is an extensible program-code-template for creating objects, providing initial values for state (member variables) and implementations of behavior (member functions or methods).
+```
+
+In practice, we often need to create many objects of the same kind, like users, or goods or whatever.
+
+As we already know from the chapter , `new function` can help with that.
+
+But in the modern JavaScript, there's a more advanced "class" construct, that introduces great new features which are useful for object-oriented programming.
+
+## The "class" syntax
+
+The basic syntax is:
+```js
+class MyClass {
+ // class methods
+ constructor() { ... }
+ method1() { ... }
+ method2() { ... }
+ method3() { ... }
+ ...
+}
+```
+
+Then `new MyClass()` creates a new object with all the listed methods.
+
+The `constructor()` method is called automatically by `new`, so we can initialize the object there.
+
+For example:
+
+```js run
+class User {
+
+ constructor(name) {
+ this.name = name;
+ }
+
+ sayHi() {
+ alert(this.name);
+ }
+
+}
+
+// Usage:
+let user = new User("John");
+user.sayHi();
+```
+
+When `new User("John")` is called:
+1. A new object is created.
+2. The `constructor` runs with the given argument and assigns `this.name` to it.
+
+...Then we can call methods, such as `user.sayHi`.
+
+
+```warn header="No comma between class methods"
+A common pitfall for novice developers is to put a comma between class methods, which would result in a syntax error.
+
+The notation here is not to be confused with object literals. Within the class, no commas are required.
+```
+
+## What is a class?
+
+So, what exactly is a `class`? That's not an entirely new language-level entity, as one might think.
+
+Let's unveil any magic and see what a class really is. That'll help in understanding many complex aspects.
+
+In JavaScript, a class is a kind of a function.
+
+Here, take a look:
+
+```js run
+class User {
+ constructor(name) { this.name = name; }
+ sayHi() { alert(this.name); }
+}
+
+// proof: User is a function
+*!*
+alert(typeof User); // function
+*/!*
+```
+
+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).
+3. Stores all methods, such as `sayHi`, in `User.prototype`.
+
+Afterwards, for new objects, when we call a method, it's taken from the prototype, just as described in the chapter . So `new User` object has access to class methods.
+
+We can illustrate the result of `class User` declaration as:
+
+
+
+Here's the code to introspect it:
+
+
+```js run
+class User {
+ constructor(name) { this.name = name; }
+ sayHi() { alert(this.name); }
+}
+
+// class is a function
+alert(typeof User); // function
+
+// ...or, more precisely, the constructor method
+alert(User === User.prototype.constructor); // true
+
+// The methods are in User.prototype, e.g:
+alert(User.prototype.sayHi); // alert(this.name);
+
+// there are exactly two methods in the prototype
+alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
+```
+
+## Not just a syntax sugar
+
+Sometimes people say that `class` is a "syntax sugar" in JavaScript, because we could actually declare the same without `class` keyword at all:
+
+```js run
+// rewriting class User in pure functions
+
+// 1. Create constructor function
+function User(name) {
+ this.name = name;
+}
+// any function prototype has constructor property by default,
+// so we don't need to create it
+
+// 2. Add the method to prototype
+User.prototype.sayHi = function() {
+ alert(this.name);
+};
+
+// Usage:
+let user = new User("John");
+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.
+
+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 can't be called without `new`:
+
+ ```js run
+ class User {
+ constructor() {}
+ }
+
+ alert(typeof User); // function
+ User(); // Error: Class constructor User cannot be invoked without 'new'
+ ```
+
+ Also, a string representation of a class constructor in most JavaScript engines starts with the "class..."
+
+ ```js run
+ class User {
+ constructor() {}
+ }
+
+ alert(User); // class User { ... }
+ ```
+
+2. Class methods are non-enumerable.
+ A class definition sets `enumerable` flag to `false` for all methods in the `"prototype"`.
+
+ That's good, because if we `for..in` over an object, we usually don't want its class methods.
+
+3. Classes always `use strict`.
+ All code inside the class construct is automatically in strict mode.
+
+
+Also, in addition to its basic operation, the `class` syntax brings many other features with it which we'll explore later.
+
+## Class Expression
+
+Just like functions, classes can be defined inside another expression, passed around, returned, assigned etc.
+
+Here's an example of a class expression:
+
+```js
+let User = class {
+ sayHi() {
+ alert("Hello");
+ }
+};
+```
+
+Similar to Named Function Expressions, class expressions may or may not have a name.
+
+If a class expression has a name, it's visible inside the class only:
+
+```js run
+// "Named Class Expression"
+// (no such term in the spec, but that's similar to Named Function Expression)
+let User = class *!*MyClass*/!* {
+ sayHi() {
+ alert(MyClass); // MyClass is visible only inside the class
+ }
+};
+
+new User().sayHi(); // works, shows MyClass definition
+
+alert(MyClass); // error, MyClass not visible outside of the class
+```
+
+
+We can even make classes dynamically "on-demand", like this:
+
+```js run
+function makeClass(phrase) {
+ // declare a class and return it
+ return class {
+ sayHi() {
+ alert(phrase);
+ };
+ };
+}
+
+// Create a new class
+let User = makeClass("Hello");
+
+new User().sayHi(); // Hello
+```
+
+
+## Getters/setters, other shorthands
+
+Just like literal objects, classes may include getters/setters, generators, computed properties etc.
+
+Here's an example for `user.name` implemented using `get/set`:
+
+```js run
+class User {
+
+ constructor(name) {
+ // invokes the setter
+ this.name = name;
+ }
+
+*!*
+ get name() {
+*/!*
+ return this._name;
+ }
+
+*!*
+ set name(value) {
+*/!*
+ if (value.length < 4) {
+ alert("Name is too short.");
+ return;
+ }
+ this._name = value;
+ }
+
+}
+
+let user = new User("John");
+alert(user.name); // John
+
+user = new User(""); // Name too short.
+```
+
+The class declaration creates getters and setters in `User.prototype`, like this:
+
+```js
+Object.defineProperties(User.prototype, {
+ name: {
+ get() {
+ return this._name
+ },
+ set(name) {
+ // ...
+ }
+ }
+});
+```
+
+Here's an example with computed properties:
+
+```js run
+function f() { return "sayHi"; }
+
+class User {
+ [f()]() {
+ alert("Hello");
+ }
+
+}
+
+new User().sayHi();
+```
+
+For a generator method, similarly, prepend it with `*`.
+
+## Class properties
+
+```warn header="Old browsers may need a polyfill"
+Class-level properties are a recent addition to the language.
+```
+
+In the example above, `User` only had methods. Let's add a property:
+
+```js run
+class User {
+ name = "Anonymous";
+
+ sayHi() {
+ alert(`Hello, ${this.name}!`);
+ }
+}
+
+new User().sayHi();
+```
+
+The property is not placed into `User.prototype`. Instead, it is created by `new`, separately for every object. So, the property will never be shared between different objects of the same class.
+
+
+## Summary
+
+The basic class syntax looks like this:
+
+```js
+class MyClass {
+ prop = value; // field
+
+ constructor(...) { // constructor
+ // ...
+ }
+
+ method(...) {} // method
+
+ get something(...) {} // getter method
+ set something(...) {} // setter method
+
+ [Symbol.iterator]() {} // method with computed name/symbol name
+ // ...
+}
+```
+
+`MyClass` is technically a function (the one that we provide as `constructor`), while methods, getters and settors are written to `MyClass.prototype`.
+
+In the next chapters we'll learn more about classes, including inheritance and other features.
diff --git a/1-js/09-classes/01-class/class-user.png b/1-js/09-classes/01-class/class-user.png
new file mode 100644
index 000000000..dc8b75679
Binary files /dev/null and b/1-js/09-classes/01-class/class-user.png differ
diff --git a/1-js/09-classes/01-class/class-user@2x.png b/1-js/09-classes/01-class/class-user@2x.png
new file mode 100644
index 000000000..aaa53708f
Binary files /dev/null and b/1-js/09-classes/01-class/class-user@2x.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/1-class-constructor-error/solution.md b/1-js/09-classes/02-class-inheritance/1-class-constructor-error/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/1-class-constructor-error/solution.md
rename to 1-js/09-classes/02-class-inheritance/1-class-constructor-error/solution.md
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/1-class-constructor-error/task.md b/1-js/09-classes/02-class-inheritance/1-class-constructor-error/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/1-class-constructor-error/task.md
rename to 1-js/09-classes/02-class-inheritance/1-class-constructor-error/task.md
diff --git a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.md b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.md
new file mode 100644
index 000000000..dcb4ffe59
--- /dev/null
+++ b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.md
@@ -0,0 +1 @@
+[js src="solution.view/extended-clock.js"]
diff --git a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.view/clock.js b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/clock.js
similarity index 70%
rename from 1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.view/clock.js
rename to 1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/clock.js
index 8009273e3..d701c0cae 100644
--- a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.view/clock.js
+++ b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/clock.js
@@ -1,9 +1,9 @@
class Clock {
constructor({ template }) {
- this._template = template;
+ this.template = template;
}
- _render() {
+ render() {
let date = new Date();
let hours = date.getHours();
@@ -15,7 +15,7 @@ class Clock {
let secs = date.getSeconds();
if (secs < 10) secs = '0' + secs;
- let output = this._template
+ let output = this.template
.replace('h', hours)
.replace('m', mins)
.replace('s', secs);
@@ -24,11 +24,11 @@ class Clock {
}
stop() {
- clearInterval(this._timer);
+ clearInterval(this.timer);
}
start() {
- this._render();
- this._timer = setInterval(() => this._render(), 1000);
+ this.render();
+ this.timer = setInterval(() => this.render(), 1000);
}
}
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js
similarity index 53%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js
rename to 1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js
index 4eb12381f..ca613ca5e 100644
--- a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js
+++ b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js
@@ -2,11 +2,11 @@ class ExtendedClock extends Clock {
constructor(options) {
super(options);
let { precision=1000 } = options;
- this._precision = precision;
+ this.precision = precision;
}
start() {
- this._render();
- this._timer = setInterval(() => this._render(), this._precision);
+ this.render();
+ this.timer = setInterval(() => this.render(), this.precision);
}
};
diff --git a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/index.html b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/index.html
new file mode 100644
index 000000000..f76a43623
--- /dev/null
+++ b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/clock.js b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/clock.js
similarity index 70%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/clock.js
rename to 1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/clock.js
index 8009273e3..d701c0cae 100644
--- a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/clock.js
+++ b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/clock.js
@@ -1,9 +1,9 @@
class Clock {
constructor({ template }) {
- this._template = template;
+ this.template = template;
}
- _render() {
+ render() {
let date = new Date();
let hours = date.getHours();
@@ -15,7 +15,7 @@ class Clock {
let secs = date.getSeconds();
if (secs < 10) secs = '0' + secs;
- let output = this._template
+ let output = this.template
.replace('h', hours)
.replace('m', mins)
.replace('s', secs);
@@ -24,11 +24,11 @@ class Clock {
}
stop() {
- clearInterval(this._timer);
+ clearInterval(this.timer);
}
start() {
- this._render();
- this._timer = setInterval(() => this._render(), 1000);
+ this.render();
+ this.timer = setInterval(() => this.render(), 1000);
}
}
diff --git a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/index.html b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/index.html
new file mode 100644
index 000000000..c0609858b
--- /dev/null
+++ b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/index.html
@@ -0,0 +1,21 @@
+
+
+
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/task.md b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/task.md
similarity index 92%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/task.md
rename to 1-js/09-classes/02-class-inheritance/2-clock-class-extended/task.md
index 05da45387..bbc2c6a43 100644
--- a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/task.md
+++ b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/task.md
@@ -6,6 +6,9 @@ importance: 5
We've got a `Clock` class. As of now, it prints the time every second.
+
+[js src="source.view/clock.js"]
+
Create a new class `ExtendedClock` that inherits from `Clock` and adds the parameter `precision` -- the number of `ms` between "ticks". Should be `1000` (1 second) by default.
- Your code should be in the file `extended-clock.js`
diff --git a/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object.png b/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object.png
new file mode 100644
index 000000000..c610e28c3
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object.png differ
diff --git a/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object@2x.png b/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object@2x.png
new file mode 100644
index 000000000..4819c7f79
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object@2x.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/solution.md b/1-js/09-classes/02-class-inheritance/3-class-extend-object/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/solution.md
rename to 1-js/09-classes/02-class-inheritance/3-class-extend-object/solution.md
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/task.md b/1-js/09-classes/02-class-inheritance/3-class-extend-object/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/task.md
rename to 1-js/09-classes/02-class-inheritance/3-class-extend-object/task.md
diff --git a/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.png b/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.png
new file mode 100644
index 000000000..0d887dbc0
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.png differ
diff --git a/1-js/09-classes/02-class-inheritance/animal-rabbit-extends@2x.png b/1-js/09-classes/02-class-inheritance/animal-rabbit-extends@2x.png
new file mode 100644
index 000000000..af09271a9
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/animal-rabbit-extends@2x.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/article.md b/1-js/09-classes/02-class-inheritance/article.md
similarity index 62%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/article.md
rename to 1-js/09-classes/02-class-inheritance/article.md
index 2c44e5ead..abb7d1e33 100644
--- a/1-js/07-object-oriented-programming/10-class-inheritance/article.md
+++ b/1-js/09-classes/02-class-inheritance/article.md
@@ -1,40 +1,82 @@
-# Class inheritance, super
+# Class inheritance
-Classes can extend one another. There's a nice syntax, technically based on the prototypal inheritance.
+Let's say we have two classes.
-To inherit from another class, we should specify `"extends"` and the parent class before the brackets `{..}`.
+`Animal`:
+
+```js
+class Animal {
+ constructor(name) {
+ this.speed = 0;
+ this.name = name;
+ }
+ run(speed) {
+ this.speed += speed;
+ alert(`${this.name} runs with speed ${this.speed}.`);
+ }
+ stop() {
+ this.speed = 0;
+ alert(`${this.name} stopped.`);
+ }
+}
+
+let animal = new Animal("My animal");
+```
+
+
+
+
+...And `Rabbit`:
+
+```js
+class Rabbit {
+ constructor(name) {
+ this.name = name;
+ }
+ hide() {
+ alert(`${this.name} hides!`);
+ }
+}
+
+let rabbit = new Rabbit("My rabbit");
+```
+
+
+
+
+Right now they are fully independent.
+
+But we'd want `Rabbit` to extend `Animal`. In other words, rabbits should be based on animals, have access to methods of `Animal` and extend them with its own methods.
+
+To inherit from another class, we should specify `"extends"` and the parent class before the braces `{..}`.
Here `Rabbit` inherits from `Animal`:
```js run
class Animal {
-
constructor(name) {
this.speed = 0;
this.name = name;
}
-
run(speed) {
this.speed += speed;
alert(`${this.name} runs with speed ${this.speed}.`);
}
-
stop() {
this.speed = 0;
alert(`${this.name} stopped.`);
}
-
}
+// Inherit from Animal by specifying "extends Animal"
*!*
-// Inherit from Animal
class Rabbit extends Animal {
+*/!*
hide() {
alert(`${this.name} hides!`);
}
}
-*/!*
let rabbit = new Rabbit("White Rabbit");
@@ -42,11 +84,15 @@ rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.hide(); // White Rabbit hides!
```
-The `extends` keyword actually adds a `[[Prototype]]` reference from `Rabbit.prototype` to `Animal.prototype`, just as you expect it to be, and as we've seen before.
+Now the `Rabbit` code became a bit shorter, as it uses `Animal` constructor by default, and it also can `run`, as animals do.
+
+Internally, `extends` keyword adds `[[Prototype]]` reference from `Rabbit.prototype` to `Animal.prototype`:
-So now `rabbit` has access both to its own methods and to methods of `Animal`.
+So, if a method is not found in `Rabbit.prototype`, JavaScript takes it from `Animal.prototype`.
+
+As we can recall from the chapter , JavaScript uses the same prototypal inheritance for build-in objects. E.g. `Date.prototype.[[Prototype]]` is `Object.prototype`, so dates have generic object methods.
````smart header="Any expression is allowed after `extends`"
Class syntax allows to specify not just a class, but any expression after `extends`.
@@ -163,7 +209,7 @@ With constructors it gets a little bit tricky.
Till now, `Rabbit` did not have its own `constructor`.
-According to the [specification](https://tc39.github.io/ecma262/#sec-runtime-semantics-classdefinitionevaluation), if a class extends another class and has no `constructor`, then the following `constructor` is generated:
+According to the [specification](https://tc39.github.io/ecma262/#sec-runtime-semantics-classdefinitionevaluation), if a class extends another class and has no `constructor`, then the following "empty" `constructor` is generated:
```js
class Rabbit extends Animal {
@@ -263,15 +309,15 @@ alert(rabbit.earLength); // 10
Let's get a little deeper under the hood of `super`. We'll see some interesting things by the way.
-First to say, from all that we've learned till now, it's impossible for `super` to work.
+First to say, from all that we've learned till now, it's impossible for `super` to work at all!
-Yeah, indeed, let's ask ourselves, how it could technically work? When an object method runs, it gets the current object as `this`. If we call `super.method()` then, how to retrieve the `method`? Naturally, we need to take the `method` from the prototype of the current object. How, technically, we (or a JavaScript engine) can do it?
+Yeah, indeed, let's ask ourselves, how it could technically work? When an object method runs, it gets the current object as `this`. If we call `super.method()` then, it needs to retrieve the `method` from the prototype of the current object.
-Maybe we can get the method from `[[Prototype]]` of `this`, as `this.__proto__.method`? Unfortunately, that doesn't work.
+The task may seem simple, but it isn't. The engine knows the current object `this`, so it could get the parent `method` as `this.__proto__.method`. Unfortunately, such a "naive" solution won't work.
-Let's try to do it. Without classes, using plain objects for the sake of simplicity.
+Let's demonstrate the problem. Without classes, using plain objects for the sake of simplicity.
-Here, `rabbit.eat()` should call `animal.eat()` method of the parent object:
+In the example below, `rabbit.__proto__ = animal`. Now let's try: in `rabbit.eat()` we'll call `animal.eat()`, using `this.__proto__`:
```js run
let animal = {
@@ -368,18 +414,16 @@ The problem can't be solved by using `this` alone.
To provide the solution, JavaScript adds one more special internal property for functions: `[[HomeObject]]`.
-**When a function is specified as a class or object method, its `[[HomeObject]]` property becomes that object.**
-
-This actually violates the idea of "unbound" functions, because methods remember their objects. And `[[HomeObject]]` can't be changed, so this bound is forever. So that's a very important change in the language.
+When a function is specified as a class or object method, its `[[HomeObject]]` property becomes that object.
-But this change is safe. `[[HomeObject]]` is used only for calling parent methods in `super`, to resolve the prototype. So it doesn't break compatibility.
+Then `super` uses it to resolve the parent prototype and its methods.
-Let's see how it works for `super` -- again, using plain objects:
+Let's see how it works, first with plain objects:
```js run
let animal = {
name: "Animal",
- eat() { // [[HomeObject]] == animal
+ eat() { // animal.eat.[[HomeObject]] == animal
alert(`${this.name} eats.`);
}
};
@@ -387,7 +431,7 @@ let animal = {
let rabbit = {
__proto__: animal,
name: "Rabbit",
- eat() { // [[HomeObject]] == rabbit
+ eat() { // rabbit.eat.[[HomeObject]] == rabbit
super.eat();
}
};
@@ -395,181 +439,108 @@ let rabbit = {
let longEar = {
__proto__: rabbit,
name: "Long Ear",
- eat() { // [[HomeObject]] == longEar
+ eat() { // longEar.eat.[[HomeObject]] == longEar
super.eat();
}
};
*!*
+// works correctly
longEar.eat(); // Long Ear eats.
*/!*
```
-Every method remembers its object in the internal `[[HomeObject]]` property. Then `super` uses it to resolve the parent prototype.
+It works as intended, due to `[[HomeObject]]` mechanics. A method, such as `longEar.eat`, knows its `[[HomeObject]]` and takes the parent method from its prototype. Without any use of `this`.
-`[[HomeObject]]` is defined for methods defined both in classes and in plain objects. But for objects, methods must be specified exactly the given way: as `method()`, not as `"method: function()"`.
+### Methods are not "free"
-In the example below a non-method syntax is used for comparison. `[[HomeObject]]` property is not set and the inheritance doesn't work:
+As we've known before, generally functions are "free", not bound to objects in JavaScript. So they can be copied between objects and called with another `this`.
+
+The very existance of `[[HomeObject]]` violates that principle, because methods remember their objects. `[[HomeObject]]` can't be changed, so this bond is forever.
+
+The only place in the language where `[[HomeObject]]` is used -- is `super`. So, if a method does not use `super`, then we can still consider it free and copy between objects. But with `super` things may go wrong.
+
+Here's the demo of a wrong `super` call:
```js run
let animal = {
- eat: function() { // should be the short syntax: eat() {...}
- // ...
+ sayHi() {
+ console.log(`I'm an animal`);
}
};
let rabbit = {
__proto__: animal,
- eat: function() {
- super.eat();
+ sayHi() {
+ super.sayHi();
}
};
-*!*
-rabbit.eat(); // Error calling super (because there's no [[HomeObject]])
-*/!*
-```
-
-## Static methods and inheritance
-
-The `class` syntax supports inheritance for static properties too.
-
-For instance:
-
-```js run
-class Animal {
-
- constructor(name, speed) {
- this.speed = speed;
- this.name = name;
- }
-
- run(speed = 0) {
- this.speed += speed;
- alert(`${this.name} runs with speed ${this.speed}.`);
+let plant = {
+ sayHi() {
+ console.log("I'm a plant");
}
+};
- static compare(animalA, animalB) {
- return animalA.speed - animalB.speed;
- }
-
-}
-
-// Inherit from Animal
-class Rabbit extends Animal {
- hide() {
- alert(`${this.name} hides!`);
- }
-}
-
-let rabbits = [
- new Rabbit("White Rabbit", 10),
- new Rabbit("Black Rabbit", 5)
-];
-
-rabbits.sort(Rabbit.compare);
-
-rabbits[0].run(); // Black Rabbit runs with speed 5.
-```
-
-Now we can call `Rabbit.compare` assuming that the inherited `Animal.compare` will be called.
-
-How does it work? Again, using prototypes. As you might have already guessed, extends also gives `Rabbit` the `[[Prototype]]` reference to `Animal`.
-
-
-
-
-So, `Rabbit` function now inherits from `Animal` function. And `Animal` function normally has `[[Prototype]]` referencing `Function.prototype`, because it doesn't `extend` anything.
-
-Here, let's check that:
-
-```js run
-class Animal {}
-class Rabbit extends Animal {}
-
-// for static propertites and methods
-alert(Rabbit.__proto__ === Animal); // true
-
-// and the next step is Function.prototype
-alert(Animal.__proto__ === Function.prototype); // true
+let tree = {
+ __proto__: plant,
+*!*
+ sayHi: rabbit.sayHi // (*)
+*/!*
+};
-// that's in addition to the "normal" prototype chain for object methods
-alert(Rabbit.prototype.__proto__ === Animal.prototype);
+*!*
+tree.sayHi(); // I'm an animal (?!?)
+*/!*
```
-This way `Rabbit` has access to all static methods of `Animal`.
+A call to `tree.sayHi()` shows "I'm an animal". Definitevely wrong.
-### No static inheritance in built-ins
+The reason is simple:
+- In the line `(*)`, the method `tree.sayHi` was copied from `rabbit`. Maybe we just wanted to avoid code duplication?
+- So its `[[HomeObject]]` is `rabbit`, as it was created in `rabbit`. There's no way to change `[[HomeObject]]`.
+- The code of `tree.sayHi()` has `super.sayHi()` inside. It goes up from `rabbit` and takes the method from `animal`.
-Please note that built-in classes don't have such static `[[Prototype]]` reference. For instance, `Object` has `Object.defineProperty`, `Object.keys` and so on, but `Array`, `Date` etc do not inherit them.
+
-Here's the picture structure for `Date` and `Object`:
+### Methods, not function properties
-
+`[[HomeObject]]` is defined for methods both in classes and in plain objects. But for objects, methods must be specified exactly as `method()`, not as `"method: function()"`.
-Note, there's no link between `Date` and `Object`. Both `Object` and `Date` exist independently. `Date.prototype` inherits from `Object.prototype`, but that's all.
+The difference may be non-essential for us, but it's important for JavaScript.
-Such difference exists for historical reasons: there was no thought about class syntax and inheriting static methods at the dawn of JavaScript language.
-
-## Natives are extendable
-
-Built-in classes like Array, Map and others are extendable also.
-
-For instance, here `PowerArray` inherits from the native `Array`:
+In the example below a non-method syntax is used for comparison. `[[HomeObject]]` property is not set and the inheritance doesn't work:
```js run
-// add one more method to it (can do more)
-class PowerArray extends Array {
- isEmpty() {
- return this.length === 0;
+let animal = {
+ eat: function() { // should be the short syntax: eat() {...}
+ // ...
}
-}
-
-let arr = new PowerArray(1, 2, 5, 10, 50);
-alert(arr.isEmpty()); // false
-
-let filteredArr = arr.filter(item => item >= 10);
-alert(filteredArr); // 10, 50
-alert(filteredArr.isEmpty()); // false
-```
-
-Please note one very interesting thing. Built-in methods like `filter`, `map` and others -- return new objects of exactly the inherited type. They rely on the `constructor` property to do so.
-
-In the example above,
-```js
-arr.constructor === PowerArray
-```
-
-So when `arr.filter()` is called, it internally creates the new array of results exactly as `new PowerArray`. And we can keep using its methods further down the chain.
-
-Even more, we can customize that behavior. The static getter `Symbol.species`, if exists, returns the constructor to use in such cases.
-
-For example, here due to `Symbol.species` built-in methods like `map`, `filter` will return "normal" arrays:
+};
-```js run
-class PowerArray extends Array {
- isEmpty() {
- return this.length === 0;
+let rabbit = {
+ __proto__: animal,
+ eat: function() {
+ super.eat();
}
+};
*!*
- // built-in methods will use this as the constructor
- static get [Symbol.species]() {
- return Array;
- }
+rabbit.eat(); // Error calling super (because there's no [[HomeObject]])
*/!*
-}
-
-let arr = new PowerArray(1, 2, 5, 10, 50);
-alert(arr.isEmpty()); // false
+```
-// filter creates new array using arr.constructor[Symbol.species] as constructor
-let filteredArr = arr.filter(item => item >= 10);
+## Summary
-*!*
-// filteredArr is not PowerArray, but Array
-*/!*
-alert(filteredArr.isEmpty()); // Error: filteredArr.isEmpty is not a function
-```
+1. To extend a class: `class Child extends Parent`:
+ - That means `Child.prototype.__proto__` will be `Parent.prototype`, so methods are inherited.
+2. When overriding a constructor:
+ - We must call parent constructor as `super()` in `Child` constructor before using `this`.
+3. When overriding another method:
+ - We can use `super.method()` in a `Child` method to call `Parent` method.
+4. Internals:
+ - Methods remember their class/object in the internal `[[HomeObject]]` property. That's how `super` resolves parent methods.
+ - So it's not safe to copy a method with `super` from one object to another.
-We can use it in more advanced keys to strip extended functionality from resulting values if not needed. Or, maybe, to extend it even further.
+Also:
+- Arrow functions don't have own `this` or `super`, so they transparently fit into the surrounding context.
diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.png b/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.png
new file mode 100644
index 000000000..8d30622ce
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.png differ
diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-array-object@2x.png b/1-js/09-classes/02-class-inheritance/class-inheritance-array-object@2x.png
new file mode 100644
index 000000000..00f6bd80d
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/class-inheritance-array-object@2x.png differ
diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.png b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.png
new file mode 100644
index 000000000..f8afbbcd6
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.png differ
diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2@2x.png b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2@2x.png
new file mode 100644
index 000000000..cf5aa6554
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2@2x.png differ
diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.png b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.png
new file mode 100644
index 000000000..a6f8964e6
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.png differ
diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal@2x.png b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal@2x.png
new file mode 100644
index 000000000..2e3f4d7ff
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal@2x.png differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-run-animal.png b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-run-animal.png
similarity index 100%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-run-animal.png
rename to 1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-run-animal.png
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-run-animal@2x.png b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-run-animal@2x.png
similarity index 100%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-run-animal@2x.png
rename to 1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-run-animal@2x.png
diff --git a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.png b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.png
new file mode 100644
index 000000000..79351a754
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.png differ
diff --git a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal@2x.png b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal@2x.png
new file mode 100644
index 000000000..346574e0c
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal@2x.png differ
diff --git a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.png b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.png
new file mode 100644
index 000000000..3d3b78cca
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.png differ
diff --git a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit@2x.png b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit@2x.png
new file mode 100644
index 000000000..a923d10e5
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit@2x.png differ
diff --git a/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.png b/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.png
new file mode 100644
index 000000000..30f4d9128
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.png differ
diff --git a/1-js/09-classes/02-class-inheritance/super-homeobject-wrong@2x.png b/1-js/09-classes/02-class-inheritance/super-homeobject-wrong@2x.png
new file mode 100644
index 000000000..e7fd103f4
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/super-homeobject-wrong@2x.png differ
diff --git a/1-js/09-classes/02-class-inheritance/this-super-loop.png b/1-js/09-classes/02-class-inheritance/this-super-loop.png
new file mode 100644
index 000000000..e68ed70e7
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/this-super-loop.png differ
diff --git a/1-js/09-classes/02-class-inheritance/this-super-loop@2x.png b/1-js/09-classes/02-class-inheritance/this-super-loop@2x.png
new file mode 100644
index 000000000..037d07587
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/this-super-loop@2x.png differ
diff --git a/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.png b/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.png
new file mode 100644
index 000000000..c5e7e3e49
Binary files /dev/null and b/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.png differ
diff --git a/1-js/09-classes/03-static-properties-methods/animal-rabbit-static@2x.png b/1-js/09-classes/03-static-properties-methods/animal-rabbit-static@2x.png
new file mode 100644
index 000000000..de434af2c
Binary files /dev/null and b/1-js/09-classes/03-static-properties-methods/animal-rabbit-static@2x.png differ
diff --git a/1-js/09-classes/03-static-properties-methods/article.md b/1-js/09-classes/03-static-properties-methods/article.md
new file mode 100644
index 000000000..b940e04c8
--- /dev/null
+++ b/1-js/09-classes/03-static-properties-methods/article.md
@@ -0,0 +1,226 @@
+
+# Static properties and methods
+
+We can also assign a method to the class function, not to its `"prototype"`. Such methods are called *static*.
+
+An example:
+
+```js run
+class User {
+*!*
+ static staticMethod() {
+*/!*
+ alert(this === User);
+ }
+}
+
+User.staticMethod(); // true
+```
+
+That actually does the same as assigning it as a function property:
+
+```js
+function User() { }
+
+User.staticMethod = function() {
+ alert(this === User);
+};
+```
+
+The value of `this` inside `User.staticMethod()` is the class constructor `User` itself (the "object before dot" rule).
+
+Usually, static methods are used to implement functions that belong to the class, but not to any particular object of it.
+
+For instance, we have `Article` objects and need a function to compare them. The natural choice would be `Article.compare`, like this:
+
+```js run
+class Article {
+ constructor(title, date) {
+ this.title = title;
+ this.date = date;
+ }
+
+*!*
+ static compare(articleA, articleB) {
+ return articleA.date - articleB.date;
+ }
+*/!*
+}
+
+// usage
+let articles = [
+ new Article("HTML", new Date(2019, 1, 1)),
+ new Article("CSS", new Date(2019, 0, 1)),
+ new Article("JavaScript", new Date(2019, 11, 1))
+];
+
+*!*
+articles.sort(Article.compare);
+*/!*
+
+alert( articles[0].title ); // CSS
+```
+
+Here `Article.compare` stands "over" the articles, as a means to compare them. It's not a method of an article, but rather of the whole class.
+
+Another example would be a so-called "factory" method. Imagine, we need few ways to create an article:
+
+1. Create by given parameters (`title`, `date` etc).
+2. Create an empty article with today's date.
+3. ...
+
+The first way can be implemented by the constructor. And for the second one we can make a static method of the class.
+
+Like `Article.createTodays()` here:
+
+```js run
+class Article {
+ constructor(title, date) {
+ this.title = title;
+ this.date = date;
+ }
+
+*!*
+ static createTodays() {
+ // remember, this = Article
+ return new this("Today's digest", new Date());
+ }
+*/!*
+}
+
+let article = Article.createTodays();
+
+alert( article.title ); // Todays digest
+```
+
+Now every time we need to create a today's digest, we can call `Article.createTodays()`. Once again, that's not a method of an article, but a method of the whole class.
+
+Static methods are also used in database-related classes to search/save/remove entries from the database, like this:
+
+```js
+// assuming Article is a special class for managing articles
+// static method to remove the article:
+Article.remove({id: 12345});
+```
+
+## Static properties
+
+[recent browser=Chrome]
+
+Static properties are also possible, just like regular class properties:
+
+```js run
+class Article {
+ static publisher = "Ilya Kantor";
+}
+
+alert( Article.publisher ); // Ilya Kantor
+```
+
+That is the same as a direct assignment to `Article`:
+
+```js
+Article.publisher = "Ilya Kantor";
+```
+
+## Statics and inheritance
+
+Statics are inherited, we can access `Parent.method` as `Child.method`.
+
+For instance, `Animal.compare` in the code below is inherited and accessible as `Rabbit.compare`:
+
+```js run
+class Animal {
+
+ constructor(name, speed) {
+ this.speed = speed;
+ this.name = name;
+ }
+
+ run(speed = 0) {
+ this.speed += speed;
+ alert(`${this.name} runs with speed ${this.speed}.`);
+ }
+
+*!*
+ static compare(animalA, animalB) {
+ return animalA.speed - animalB.speed;
+ }
+*/!*
+
+}
+
+// Inherit from Animal
+class Rabbit extends Animal {
+ hide() {
+ alert(`${this.name} hides!`);
+ }
+}
+
+let rabbits = [
+ new Rabbit("White Rabbit", 10),
+ new Rabbit("Black Rabbit", 5)
+];
+
+*!*
+rabbits.sort(Rabbit.compare);
+*/!*
+
+rabbits[0].run(); // Black Rabbit runs with speed 5.
+```
+
+Now we can call `Rabbit.compare` assuming that the inherited `Animal.compare` will be called.
+
+How does it work? Again, using prototypes. As you might have already guessed, `extends` gives `Rabbit` the `[[Prototype]]` reference to `Animal`.
+
+
+
+
+So, `Rabbit` function now inherits from `Animal` function. And `Animal` function normally has `[[Prototype]]` referencing `Function.prototype`, because it doesn't `extend` anything.
+
+Here, let's check that:
+
+```js run
+class Animal {}
+class Rabbit extends Animal {}
+
+// for static properties and methods
+alert(Rabbit.__proto__ === Animal); // true
+
+// the next step up leads to Function.prototype
+alert(Animal.__proto__ === Function.prototype); // true
+
+// the "normal" prototype chain for object methods
+alert(Rabbit.prototype.__proto__ === Animal.prototype);
+```
+
+This way `Rabbit` has access to all static methods of `Animal`.
+
+## Summary
+
+Static methods are used for the functionality that doesn't relate to a concrete class instance, doesn't require an instance to exist, but rather belongs to the class as a whole, like `Article.compare` -- a generic method to compare two articles.
+
+Static properties are used when we'd like to store class-level data, also not bound to an instance.
+
+The syntax is:
+
+```js
+class MyClass {
+ static property = ...;
+
+ static method() {
+ ...
+ }
+}
+```
+
+That's technically the same as assigning to the class itself:
+
+```js
+MyClass.property = ...
+MyClass.method = ...
+```
+
+Static properties are inherited.
+
+Technically, for `class B extends A` the prototype of the class `B` itself points to `A`: `B.[[Prototype]] = A`. So if a field is not found in `B`, the search continues in `A`.
diff --git a/1-js/09-classes/04-private-protected-properties-methods/article.md b/1-js/09-classes/04-private-protected-properties-methods/article.md
new file mode 100644
index 000000000..78d6c78f5
--- /dev/null
+++ b/1-js/09-classes/04-private-protected-properties-methods/article.md
@@ -0,0 +1,330 @@
+
+# Private and protected properties and methods
+
+One of the most important principles of object oriented programming -- delimiting internal interface from the external one.
+
+That is "a must" practice in developing anything more complex than a "hello world" app.
+
+To understand this, let's break away from development and turn our eyes into the real world.
+
+Usually, devices that we're using are quite complex. But delimiting the internal interface from the external one allows to use them without problems.
+
+## A real-life example
+
+For instance, a coffee machine. Simple from outside: a button, a display, a few holes...And, surely, the result -- great coffee! :)
+
+
+
+But inside... (a picture from the repair manual)
+
+
+
+A lot of details. But we can use it without knowing anything.
+
+Coffee machines are quite reliable, aren't they? We can use one for years, and only if something goes wrong -- bring it for repairs.
+
+The secret of reliability and simplicity of a coffee machine -- all details are well-tuned and *hidden* inside.
+
+If we remove the protective cover from the coffee machine, then using it will be much more complex (where to press?), and dangerous (it can electrocute).
+
+As we'll see, in programming objects are like coffee machines.
+
+But in order to hide inner details, we'll use not a protective cover, but rather special syntax of the language and conventions.
+
+## Internal and external interface
+
+In object-oriented programming, properties and methods are split into two groups:
+
+- *Internal interface* -- methods and properties, accessible from other methods of the class, but not from the outside.
+- *External interface* -- methods and properties, accessible also from outside the class.
+
+If we continue the analogy with the coffee machine -- what's hidden inside: a boiler tube, heating element, and so on -- is its internal interface.
+
+An internal interface is used for the object to work, its details use each other. For instance, a boiler tube is attached to the heating element.
+
+But from the outside a coffee machine is closed by the protective cover, so that no one can reach those. Details are hidden and inaccessible. We can use its features via the external interface.
+
+So, all we need to use an object is to know its external interface. We may be completely unaware how it works inside, and that's great.
+
+That was a general introduction.
+
+In JavaScript, there are three types of properties and members:
+
+- Public: accessible from anywhere. They comprise the external interface. Till now we were only using public properties and methods.
+- Private: accessible only from inside the class. These are for the internal interface.
+
+In many other languages there also exist "protected" fields: accessible only from inside the class and those extending it. They are also useful for the internal interface. They are in a sense more widespread than private ones, because we usually want inheriting classes to gain access to properly do the extension.
+
+Protected fields are not implemented in JavaScript on the language level, but in practice they are very convenient, so they are emulated.
+
+In the next step we'll make a coffee machine in JavaScript with all these types of properties. A coffee machine has a lot of details, we won't model them to stay simple (though we could).
+
+## Protecting "waterAmount"
+
+Let's make a simple coffee machine class first:
+
+```js run
+class CoffeeMachine {
+ waterAmount = 0; // the amount of water inside
+
+ constructor(power) {
+ this.power = power;
+ alert( `Created a coffee-machine, power: ${power}` );
+ }
+
+}
+
+// create the coffee machine
+let coffeeMachine = new CoffeeMachine(100);
+
+// add water
+coffeeMachine.waterAmount = 200;
+```
+
+Right now the properties `waterAmount` and `power` are public. We can easily get/set them from the outside to any value.
+
+Let's change `waterAmount` property to protected to have more control over it. For instance, we don't want anyone to set it below zero.
+
+**Protected properties are usually prefixed with an underscore `_`.**
+
+That is not enforced on the language level, but there's a convention that such properties and methods should not be accessed from the outside. Most programmers follow it.
+
+So our property will be called `_waterAmount`:
+
+```js run
+class CoffeeMachine {
+ _waterAmount = 0;
+
+ set waterAmount(value) {
+ if (value < 0) throw new Error("Negative water");
+ this._waterAmount = value;
+ }
+
+ get waterAmount() {
+ return this._waterAmount;
+ }
+
+ constructor(power) {
+ this._power = power;
+ }
+
+}
+
+// create the coffee machine
+let coffeeMachine = new CoffeeMachine(100);
+
+// add water
+coffeeMachine.waterAmount = -10; // Error: Negative water
+```
+
+Now the access is under control, so setting the water below zero fails.
+
+## Read-only "power"
+
+For `power` property, let's make it read-only. It sometimes happens that a property must be set at creation time only, and then never modified.
+
+That's exactly the case for a coffee machine: power never changes.
+
+To do so, we only need to make getter, but not the setter:
+
+```js run
+class CoffeeMachine {
+ // ...
+
+ constructor(power) {
+ this._power = power;
+ }
+
+ get power() {
+ return this._power;
+ }
+
+}
+
+// create the coffee machine
+let coffeeMachine = new CoffeeMachine(100);
+
+alert(`Power is: ${coffeeMachine.power}W`); // Power is: 100W
+
+coffeeMachine.power = 25; // Error (no setter)
+```
+
+````smart header="Getter/setter functions"
+Here we used getter/setter syntax.
+
+But most of the time `get.../set...` functions are preferred, like this:
+
+```js
+class CoffeeMachine {
+ _waterAmount = 0;
+
+ *!*setWaterAmount(value)*/!* {
+ if (value < 0) throw new Error("Negative water");
+ this._waterAmount = value;
+ }
+
+ *!*getWaterAmount()*/!* {
+ return this._waterAmount;
+ }
+}
+
+new CoffeeMachine().setWaterAmount(100);
+```
+
+That looks a bit longer, but functions are more flexible. They can accept multiple arguments (even if we don't need them right now). So, for the future, just in case we need to refactor something, functions are a safer choice.
+
+Surely, there's a tradeoff. On the other hand, get/set syntax is shorter, so ultimately there's no strict rule, it's up to you to decide.
+````
+
+```smart header="Protected fields are inherited"
+If we inherit `class MegaMachine extends CoffeeMachine`, then nothing prevents us from accessing `this._waterAmount` or `this._power` from the methods of the new class.
+
+So protected fields are naturally inheritable. Unlike private ones that we'll see below.
+```
+
+## Private "#waterLimit"
+
+[recent browser=none]
+
+There's a finished JavaScript proposal, almost in the standard, that provides language-level support for private properties and methods.
+
+Privates should start with `#`. They are only accessible from inside the class.
+
+For instance, here we add a private `#waterLimit` property and extract the water-checking logic into a separate method:
+
+```js
+class CoffeeMachine {
+*!*
+ #waterLimit = 200;
+*/!*
+
+*!*
+ #checkWater(value) {
+ if (value < 0) throw new Error("Negative water");
+ if (value > this.#waterLimit) throw new Error("Too much water");
+ }
+*/!*
+
+ _waterAmount = 0;
+
+ set waterAmount(value) {
+*!*
+ this.#checkWater(value);
+*/!*
+ this._waterAmount = value;
+ }
+
+ get waterAmount() {
+ return this._waterAmount;
+ }
+
+}
+
+let coffeeMachine = new CoffeeMachine();
+
+*!*
+coffeeMachine.#checkWater(); // Error
+coffeeMachine.#waterLimit = 1000; // Error
+*/!*
+
+coffeeMachine.waterAmount = 100; // Works
+```
+
+On the language level, `#` is a special sign that the field is private. We can't access it from outside or from inheriting classes.
+
+Private fields do not conflict with public ones. We can have both private `#waterAmount` and public `waterAmount` fields at the same time.
+
+For instance, let's make `waterAmount` an accessor for `#waterAmount`:
+
+```js run
+class CoffeeMachine {
+
+ #waterAmount = 0;
+
+ get waterAmount() {
+ return this.#waterAmount;
+ }
+
+ set waterAmount(value) {
+ if (value < 0) throw new Error("Negative water");
+ this.#waterAmount = value;
+ }
+}
+
+let machine = new CoffeeMachine();
+
+machine.waterAmount = 100;
+alert(machine.#waterAmount); // Error
+```
+
+Unlike protected ones, private fields are enforced by the language itself. That's a good thing.
+
+But if we inherit from `CoffeeMachine`, then we'll have no direct access to `#waterAmount`. We'll need to rely on `waterAmount` getter/setter:
+
+```js
+class MegaCoffeeMachine extends CoffeeMachine() {
+ method() {
+*!*
+ alert( this.#waterAmount ); // Error: can only access from CoffeeMachine
+*/!*
+ }
+}
+```
+
+In many scenarios such limitation is too severe. If we extend a `CoffeeMachine`, we may have legitimate reason to access its internals. That's why protected fields are used most of the time, even though they are not supported by the language syntax.
+
+````warn
+Private fields are special.
+
+Remember, usually we can access fields by this[name]:
+
+```js
+class User {
+ ...
+ sayHi() {
+ let fieldName = "name";
+ alert(`Hello, ${this[fieldName]}`);
+ }
+}
+```
+
+With private fields that's impossible: `this['#name']` doesn't work. That's a syntax limitation to ensure privacy.
+````
+
+## Summary
+
+In terms of OOP, delimiting of the internal interface from the external one is called [encapsulation]("https://en.wikipedia.org/wiki/Encapsulation_(computer_programming)").
+
+It gives the following benefits:
+
+Protection for users, so that they don't shoot themselves in the feet
+: Imagine, there's a team of developers using a coffee machine. It was made by the "Best CoffeeMachine" company, and works fine, but a protective cover was removed. So the internal interface is exposed.
+
+ All developers are civilized -- they use the coffee machine as intended. But one of them, John, decided that he's the smartest one, and made some tweaks in the coffee machine internals. So the coffee machine failed two days later.
+
+ That's surely not John's fault, but rather the person who removed the protective cover and let John do his manipulations.
+
+ The same in programming. If a user of a class will change things not intended to be changed from the outside -- the consequences are unpredictable.
+
+Supportable
+: The situation in programming is more complex than with a real-life coffee machine, because we don't just buy it once. The code constantly undergoes development and improvement.
+
+ **If we strictly delimit the internal interface, then the developer of the class can freely change its internal properties and methods, even without informing the users..**
+
+ It's much easier to develop, if you know that certain methods can be renamed, their parameters can be changed, and even removed, because no external code depends on them.
+
+ For users, when a new version comes out, it may be a total overhaul, but still simple to upgrade if the external interface is the same.
+
+Hiding complexity
+: People adore to use things that are simple. At least from outside. What's inside is a different thing.
+
+ Programmers are not an exception.
+
+ **It's always convenient when implementation details are hidden, and a simple, well-documented external interface is available.**
+
+To hide internal interface we use either protected or public properties:
+
+- Protected fields start with `_`. That's a well-known convention, not enforced at the language level. Programmers should only access a field starting with `_` from its class and classes inheriting from it.
+- Private fields start with `#`. JavaScript makes sure we only can access those from inside the class.
+
+Right now, private fields are not well-supported among browsers, but can be polyfilled.
diff --git a/1-js/09-classes/04-private-protected-properties-methods/coffee-inside.jpg b/1-js/09-classes/04-private-protected-properties-methods/coffee-inside.jpg
new file mode 100644
index 000000000..60f84664d
Binary files /dev/null and b/1-js/09-classes/04-private-protected-properties-methods/coffee-inside.jpg differ
diff --git a/1-js/09-classes/04-private-protected-properties-methods/coffee.jpg b/1-js/09-classes/04-private-protected-properties-methods/coffee.jpg
new file mode 100644
index 000000000..ee26e1c06
Binary files /dev/null and b/1-js/09-classes/04-private-protected-properties-methods/coffee.jpg differ
diff --git a/1-js/09-classes/05-extend-natives/article.md b/1-js/09-classes/05-extend-natives/article.md
new file mode 100644
index 000000000..f85aa0242
--- /dev/null
+++ b/1-js/09-classes/05-extend-natives/article.md
@@ -0,0 +1,90 @@
+
+# Extending built-in classes
+
+Built-in classes like Array, Map and others are extendable also.
+
+For instance, here `PowerArray` inherits from the native `Array`:
+
+```js run
+// add one more method to it (can do more)
+class PowerArray extends Array {
+ isEmpty() {
+ return this.length === 0;
+ }
+}
+
+let arr = new PowerArray(1, 2, 5, 10, 50);
+alert(arr.isEmpty()); // false
+
+let filteredArr = arr.filter(item => item >= 10);
+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. They rely on the `constructor` property to do so.
+
+In the example above,
+```js
+arr.constructor === PowerArray
+```
+
+So when `arr.filter()` is called, it internally creates the new array of results using exactly `new PowerArray`, not basic `Array`. That's actually very cool, because we can keep using `PowerArray` methods further on the result.
+
+Even more, we can customize that behavior.
+
+We can add a special static getter `Symbol.species` to the class. If exists, it should return the constructor that JavaScript will use internally to create new entities in `map`, `filter` and so on.
+
+If we'd like built-in methods like `map`, `filter` will return regular arrays, we can return `Array` in `Symbol.species`, like here:
+
+```js run
+class PowerArray extends Array {
+ isEmpty() {
+ return this.length === 0;
+ }
+
+*!*
+ // built-in methods will use this as the constructor
+ static get [Symbol.species]() {
+ return Array;
+ }
+*/!*
+}
+
+let arr = new PowerArray(1, 2, 5, 10, 50);
+alert(arr.isEmpty()); // false
+
+// filter creates new array using arr.constructor[Symbol.species] as constructor
+let filteredArr = arr.filter(item => item >= 10);
+
+*!*
+// filteredArr is not PowerArray, but Array
+*/!*
+alert(filteredArr.isEmpty()); // Error: filteredArr.isEmpty is not a function
+```
+
+As you can see, now `.filter` returns `Array`. So the extended functionality is not passed any further.
+
+## No static inheritance in built-ins
+
+Built-in objects have their own static methods, for instance `Object.keys`, `Array.isArray` etc.
+
+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.
+
+So, if `Rabbit extends Animal`, then:
+
+1. `Rabbit.methods` are callable for `Animal.methods`, because `Rabbit.[[Prototype]] = Animal`.
+2. `new Rabbit().methods` are also available, because `Rabbit.prototype.[[Prototype]] = Animal.prototype`.
+
+That's thoroughly explained in the chapter [](info:static-properties-methods#statics-and-inheritance).
+
+But built-in classes are an exception. They don't inherit statics `(1)` from each other.
+
+For example, both `Array` and `Date` inherit from `Object`, so their instances have methods from `Object.prototype`. But `Array.[[Prototype]]` does not point to `Object`. So there's `Object.keys()`, but not `Array.keys()` and `Date.keys()`.
+
+Here's the picture structure for `Date` and `Object`:
+
+
+
+Note, there's no link between `Date` and `Object`. Both `Object` and `Date` exist independently. `Date.prototype` inherits from `Object.prototype`, but that's all.
diff --git a/1-js/09-classes/05-extend-natives/object-date-inheritance.png b/1-js/09-classes/05-extend-natives/object-date-inheritance.png
new file mode 100644
index 000000000..73020a49e
Binary files /dev/null and b/1-js/09-classes/05-extend-natives/object-date-inheritance.png differ
diff --git a/1-js/09-classes/05-extend-natives/object-date-inheritance@2x.png b/1-js/09-classes/05-extend-natives/object-date-inheritance@2x.png
new file mode 100644
index 000000000..6520f9e26
Binary files /dev/null and b/1-js/09-classes/05-extend-natives/object-date-inheritance@2x.png differ
diff --git a/1-js/07-object-oriented-programming/11-instanceof/1-strange-instanceof/solution.md b/1-js/09-classes/06-instanceof/1-strange-instanceof/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/11-instanceof/1-strange-instanceof/solution.md
rename to 1-js/09-classes/06-instanceof/1-strange-instanceof/solution.md
diff --git a/1-js/07-object-oriented-programming/11-instanceof/1-strange-instanceof/task.md b/1-js/09-classes/06-instanceof/1-strange-instanceof/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/11-instanceof/1-strange-instanceof/task.md
rename to 1-js/09-classes/06-instanceof/1-strange-instanceof/task.md
diff --git a/1-js/07-object-oriented-programming/11-instanceof/article.md b/1-js/09-classes/06-instanceof/article.md
similarity index 91%
rename from 1-js/07-object-oriented-programming/11-instanceof/article.md
rename to 1-js/09-classes/06-instanceof/article.md
index 702c9e6b2..dca6ac627 100644
--- a/1-js/07-object-oriented-programming/11-instanceof/article.md
+++ b/1-js/09-classes/06-instanceof/article.md
@@ -46,14 +46,15 @@ alert( arr instanceof Object ); // true
Please note that `arr` also belongs to the `Object` class. That's because `Array` prototypally inherits from `Object`.
-The `instanceof` operator examines the prototype chain for the check, and is also fine-tunable using the static method `Symbol.hasInstance`.
+The `instanceof` operator examines the prototype chain for the check, but we can set a custom logic the static method `Symbol.hasInstance`.
The algorithm of `obj instanceof Class` works roughly as follows:
-1. If there's a static method `Symbol.hasInstance`, then use it. Like this:
+1. If there's a static method `Symbol.hasInstance`, then just call it: `Class[Symbol.hasInstance](obj)`. It should return either `true` or `false`. We're done.
+ For example:
```js run
- // assume anything that canEat is an animal
+ // setup instanceOf check that assumes that anything that canEat is an animal
class Animal {
static [Symbol.hasInstance](obj) {
if (obj.canEat) return true;
@@ -61,10 +62,11 @@ The algorithm of `obj instanceof Class` works roughly as follows:
}
let obj = { canEat: true };
+
alert(obj instanceof Animal); // true: Animal[Symbol.hasInstance](obj) is called
```
-2. Most classes do not have `Symbol.hasInstance`. In that case, check if `Class.prototype` equals to one of prototypes in the `obj` prototype chain.
+2. Most classes do not have `Symbol.hasInstance`. In that case, the standard logic is used: `obj instanceOf Classs` checks whether `Class.prototype` equals to one of prototypes in the `obj` prototype chain.
In other words, compare:
```js
@@ -117,7 +119,7 @@ alert( rabbit instanceof Rabbit ); // false
That's one of the reasons to avoid changing `prototype`. Just to keep safe.
-## Bonus: Object toString for the type
+## Bonus: Object.prototype.toString for the type
We already know that plain objects are converted to string as `[object Object]`:
@@ -182,7 +184,7 @@ alert( {}.toString.call(user) ); // [object User]
For most environment-specific objects, there is such a property. Here are few browser specific examples:
```js run
-// toStringTag for the envinronment-specific object and class:
+// toStringTag for the environment-specific object and class:
alert( window[Symbol.toStringTag]); // window
alert( XMLHttpRequest.prototype[Symbol.toStringTag] ); // XMLHttpRequest
diff --git a/1-js/09-classes/06-instanceof/instanceof.png b/1-js/09-classes/06-instanceof/instanceof.png
new file mode 100644
index 000000000..ad0fc77ab
Binary files /dev/null and b/1-js/09-classes/06-instanceof/instanceof.png differ
diff --git a/1-js/09-classes/06-instanceof/instanceof@2x.png b/1-js/09-classes/06-instanceof/instanceof@2x.png
new file mode 100644
index 000000000..c25b166b3
Binary files /dev/null and b/1-js/09-classes/06-instanceof/instanceof@2x.png differ
diff --git a/1-js/07-object-oriented-programming/13-mixins/article.md b/1-js/09-classes/07-mixins/article.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/13-mixins/article.md
rename to 1-js/09-classes/07-mixins/article.md
diff --git a/1-js/07-object-oriented-programming/13-mixins/head.html b/1-js/09-classes/07-mixins/head.html
similarity index 100%
rename from 1-js/07-object-oriented-programming/13-mixins/head.html
rename to 1-js/09-classes/07-mixins/head.html
diff --git a/1-js/09-classes/07-mixins/mixin-inheritance.png b/1-js/09-classes/07-mixins/mixin-inheritance.png
new file mode 100644
index 000000000..6142ce7fc
Binary files /dev/null and b/1-js/09-classes/07-mixins/mixin-inheritance.png differ
diff --git a/1-js/09-classes/07-mixins/mixin-inheritance@2x.png b/1-js/09-classes/07-mixins/mixin-inheritance@2x.png
new file mode 100644
index 000000000..ccbd74300
Binary files /dev/null and b/1-js/09-classes/07-mixins/mixin-inheritance@2x.png differ
diff --git a/1-js/09-classes/index.md b/1-js/09-classes/index.md
new file mode 100644
index 000000000..87846ef6b
--- /dev/null
+++ b/1-js/09-classes/index.md
@@ -0,0 +1 @@
+# Classes
diff --git a/1-js/08-error-handling/1-try-catch/1-finally-or-code-after/solution.md b/1-js/10-error-handling/1-try-catch/1-finally-or-code-after/solution.md
similarity index 100%
rename from 1-js/08-error-handling/1-try-catch/1-finally-or-code-after/solution.md
rename to 1-js/10-error-handling/1-try-catch/1-finally-or-code-after/solution.md
diff --git a/1-js/08-error-handling/1-try-catch/1-finally-or-code-after/task.md b/1-js/10-error-handling/1-try-catch/1-finally-or-code-after/task.md
similarity index 86%
rename from 1-js/08-error-handling/1-try-catch/1-finally-or-code-after/task.md
rename to 1-js/10-error-handling/1-try-catch/1-finally-or-code-after/task.md
index e84687343..c573cc232 100644
--- a/1-js/08-error-handling/1-try-catch/1-finally-or-code-after/task.md
+++ b/1-js/10-error-handling/1-try-catch/1-finally-or-code-after/task.md
@@ -33,6 +33,6 @@ Compare the two code fragments.
*/!*
```
-We definitely need the cleanup after the work has started, doesn't matter if there was an error or not.
+We definitely need the cleanup after the work, doesn't matter if there was an error or not.
Is there an advantage here in using `finally` or both code fragments are equal? If there is such an advantage, then give an example when it matters.
diff --git a/1-js/08-error-handling/1-try-catch/article.md b/1-js/10-error-handling/1-try-catch/article.md
similarity index 94%
rename from 1-js/08-error-handling/1-try-catch/article.md
rename to 1-js/10-error-handling/1-try-catch/article.md
index ac3e0031b..4a1adba0c 100644
--- a/1-js/08-error-handling/1-try-catch/article.md
+++ b/1-js/10-error-handling/1-try-catch/article.md
@@ -68,7 +68,7 @@ Let's see more examples.
} catch(err) {
- alert(`Error has occured!`); // *!*(3) <--*/!*
+ alert(`Error has occurred!`); // *!*(3) <--*/!*
}
@@ -108,14 +108,14 @@ try {
}
```
-That's because `try..catch` actually wraps the `setTimeout` call that schedules the function. But the function itself is executed later, when the engine has already left the `try..catch` construct.
+That's because the function itself is executed later, when the engine has already left the `try..catch` construct.
To catch an exception inside a scheduled function, `try..catch` must be inside that function:
```js run
setTimeout(function() {
try {
noSuchVariable; // try..catch handles the error!
- } catch (e) {
+ } catch {
alert( "error is caught here!" );
}
}, 1000);
@@ -165,6 +165,19 @@ try {
}
```
+## Optional "catch" binding
+
+[recent browser=new]
+
+If we don't need error details, `catch` may omit it:
+
+```js
+try {
+ // ...
+} catch {
+ // error object omitted
+}
+```
## Using "try..catch"
@@ -325,7 +338,7 @@ Now `catch` became a single place for all error handling: both for `JSON.parse`
## Rethrowing
-In the example above we use `try..catch` to handle incorrect data. But is it possible that *another unexpected error* occurs within the `try {...}` block? Like a variable is undefined or something else, not just that "incorrect data" thing.
+In the example above we use `try..catch` to handle incorrect data. But is it possible that *another unexpected error* occurs within the `try {...}` block? Like a programming error (variable is not defined) or something else, not just that "incorrect data" thing.
Like this:
@@ -342,7 +355,7 @@ try {
}
```
-Of course, everything's possible! Programmers do make mistakes. Even in open-source utilities used by millions for decades -- suddenly a crazy bug may be discovered that leads to terrible hacks (like it happened with the `ssh` tool).
+Of course, everything's possible! Programmers do make mistakes. Even in open-source utilities used by millions for decades -- suddenly a bug may be discovered that leads to terrible hacks.
In our case, `try..catch` is meant to catch "incorrect data" errors. But by its nature, `catch` gets *all* errors from `try`. Here it gets an unexpected error, but still shows the same `"JSON Error"` message. That's wrong and also makes the code more difficult to debug.
@@ -476,7 +489,7 @@ The code has two ways of execution:
1. If you answer "Yes" to "Make an error?", then `try -> catch -> finally`.
2. If you say "No", then `try -> finally`.
-The `finally` clause is often used when we start doing something before `try..catch` and want to finalize it in any case of outcome.
+The `finally` clause is often used when we start doing something and want to finalize it in any case of outcome.
For instance, we want to measure the time that a Fibonacci numbers function `fib(n)` takes. Naturally, we can start measuring before it runs and finish afterwards. But what if there's an error during the function call? In particular, the implementation of `fib(n)` in the code below returns an error for negative or non-integer numbers.
@@ -508,14 +521,14 @@ try {
}
*/!*
-alert(result || "error occured");
+alert(result || "error occurred");
alert( `execution took ${diff}ms` );
```
You can check by running the code with entering `35` into `prompt` -- it executes normally, `finally` after `try`. And then enter `-1` -- there will be an immediate error, an the execution will take `0ms`. Both measurements are done correctly.
-In other words, there may be two ways to exit a function: either a `return` or `throw`. The `finally` clause handles them both.
+In other words, the function may finish with `return` or `throw`, that doesn't matter. The `finally` clause executes in both cases.
```smart header="Variables are local inside `try..catch..finally`"
@@ -577,7 +590,7 @@ Let's imagine we've got a fatal error outside of `try..catch`, and the script di
Is there a way to react on such occurrences? We may want to log the error, show something to the user (normally they don't see error messages) etc.
-There is none in the specification, but environments usually provide it, because it's really useful. For instance, Node.JS has [process.on('uncaughtException')](https://nodejs.org/api/process.html#process_event_uncaughtexception) for that. And in the browser we can assign a function to special [window.onerror](mdn:api/GlobalEventHandlers/onerror) property. It will run in case of an uncaught error.
+There is none in the specification, but environments usually provide it, because it's really useful. For instance, Node.js has [process.on('uncaughtException')](https://nodejs.org/api/process.html#process_event_uncaughtexception) for that. And in the browser we can assign a function to special [window.onerror](mdn:api/GlobalEventHandlers/onerror) property. It will run in case of an uncaught error.
The syntax:
@@ -630,7 +643,7 @@ They work like this:
## Summary
-The `try..catch` construct allows to handle runtime errors. It literally allows to try running the code and catch errors that may occur in it.
+The `try..catch` construct allows to handle runtime errors. It literally allows to "try" running the code and "catch" errors that may occur in it.
The syntax is:
@@ -653,6 +666,8 @@ Error objects have following properties:
- `name` -- the string with error name (error constructor name).
- `stack` (non-standard) -- the stack at the moment of error creation.
+If an error object is not needed, we can omit it by using `catch {` instead of `catch(err) {`.
+
We can also generate our own errors using the `throw` operator. Technically, the argument of `throw` can be anything, but usually it's an error object inheriting from the built-in `Error` class. More on extending errors in the next chapter.
Rethrowing is a basic pattern of error handling: a `catch` block usually expects and knows how to handle the particular error type, so it should rethrow errors it doesn't know.
diff --git a/1-js/10-error-handling/1-try-catch/try-catch-flow.png b/1-js/10-error-handling/1-try-catch/try-catch-flow.png
new file mode 100644
index 000000000..8b3775381
Binary files /dev/null and b/1-js/10-error-handling/1-try-catch/try-catch-flow.png differ
diff --git a/1-js/10-error-handling/1-try-catch/try-catch-flow@2x.png b/1-js/10-error-handling/1-try-catch/try-catch-flow@2x.png
new file mode 100644
index 000000000..f85eb6321
Binary files /dev/null and b/1-js/10-error-handling/1-try-catch/try-catch-flow@2x.png differ
diff --git a/1-js/08-error-handling/2-custom-errors/1-format-error/solution.md b/1-js/10-error-handling/2-custom-errors/1-format-error/solution.md
similarity index 100%
rename from 1-js/08-error-handling/2-custom-errors/1-format-error/solution.md
rename to 1-js/10-error-handling/2-custom-errors/1-format-error/solution.md
diff --git a/1-js/08-error-handling/2-custom-errors/1-format-error/task.md b/1-js/10-error-handling/2-custom-errors/1-format-error/task.md
similarity index 100%
rename from 1-js/08-error-handling/2-custom-errors/1-format-error/task.md
rename to 1-js/10-error-handling/2-custom-errors/1-format-error/task.md
diff --git a/1-js/08-error-handling/2-custom-errors/article.md b/1-js/10-error-handling/2-custom-errors/article.md
similarity index 87%
rename from 1-js/08-error-handling/2-custom-errors/article.md
rename to 1-js/10-error-handling/2-custom-errors/article.md
index d7d61166d..70ff1dec1 100644
--- a/1-js/08-error-handling/2-custom-errors/article.md
+++ b/1-js/10-error-handling/2-custom-errors/article.md
@@ -6,7 +6,7 @@ Our errors should support basic error properties like `message`, `name` and, pre
JavaScript allows to use `throw` with any argument, so technically our custom error classes don't need to inherit from `Error`. But if we inherit, then it becomes possible to use `obj instanceof Error` to identify error objects. So it's better to inherit from it.
-As we build our application, our own errors naturally form a hierarchy, for instance `HttpTimeoutError` may inherit from `HttpError`, and so on.
+As the application grows, our own errors naturally form a hierarchy, for instance `HttpTimeoutError` may inherit from `HttpError`, and so on.
## Extending Error
@@ -19,7 +19,7 @@ let json = `{ "name": "John", "age": 30 }`;
Internally, we'll use `JSON.parse`. If it receives malformed `json`, then it throws `SyntaxError`.
-But even if `json` is syntactically correct, that doesn't mean that it's a valid user, right? It may miss the necessary data. For instance, if may not have `name` and `age` properties that are essential for our users.
+But even if `json` is syntactically correct, that doesn't mean that it's a valid user, right? It may miss the necessary data. For instance, it may not have `name` and `age` properties that are essential for our users.
Our function `readUser(json)` will not only read JSON, but check ("validate") the data. If there are no required fields, or the format is wrong, then that's an error. And that's not a `SyntaxError`, because the data is syntactically correct, but another kind of error. We'll call it `ValidationError` and create a class for it. An error of that kind should also carry the information about the offending field.
@@ -126,7 +126,7 @@ We could also look at `err.name`, like this:
The `instanceof` version is much better, because in the future we are going to extend `ValidationError`, make subtypes of it, like `PropertyRequiredError`. And `instanceof` check will continue to work for new inheriting classes. So that's future-proof.
-Also it's important that if `catch` meets an unknown error, then it rethrows it in the line `(**)`. The `catch` only knows how to handle validation and syntax errors, other kinds (due to a typo in the code or such) should fall through.
+Also it's important that if `catch` meets an unknown error, then it rethrows it in the line `(**)`. The `catch` block only knows how to handle validation and syntax errors, other kinds (due to a typo in the code or other unknown ones) should fall through.
## Further inheritance
@@ -185,7 +185,7 @@ try {
The new class `PropertyRequiredError` is easy to use: we only need to pass the property name: `new PropertyRequiredError(property)`. The human-readable `message` is generated by the constructor.
-Please note that `this.name` in `PropertyRequiredError` constructor is again assigned manually. That may become a bit tedius -- to assign `this.name = ` when creating each custom error. But there's a way out. We can make our own "basic error" class that removes this burden from our shoulders by using `this.constructor.name` for `this.name` in the constructor. And then inherit from it.
+Please note that `this.name` in `PropertyRequiredError` constructor is again assigned manually. That may become a bit tedious -- to assign `this.name = ` in every custom error class. But there's a way out. We can make our own "basic error" class that removes this burden from our shoulders by using `this.constructor.name` for `this.name` in its constructor. And then inherit all ours custom errors from it.
Let's call it `MyError`.
@@ -218,7 +218,7 @@ Now custom errors are much shorter, especially `ValidationError`, as we got rid
## Wrapping exceptions
-The purpose of the function `readUser` in the code above is "to read the user data", right? There may occur different kinds of errors in the process. Right now we have `SyntaxError` and `ValidationError`, but in the future `readUser` function may grow: the new code will probably generate other kinds of errors.
+The purpose of the function `readUser` in the code above is "to read the user data", right? There may occur different kinds of errors in the process. Right now we have `SyntaxError` and `ValidationError`, but in the future `readUser` function may grow and probably generate other kinds of errors.
The code which calls `readUser` should handle these errors. Right now it uses multiple `if` in the `catch` block to check for different error types and rethrow the unknown ones. But if `readUser` function generates several kinds of errors -- then we should ask ourselves: do we really want to check for all error types one-by-one in every code that calls `readUser`?
@@ -303,5 +303,5 @@ The approach is called "wrapping exceptions", because we take "low level excepti
## Summary
- We can inherit from `Error` and other built-in error classes normally, just need to take care of `name` property and don't forget to call `super`.
-- Most of the time, we should use `instanceof` to check for particular errors. It also works with inheritance. But sometimes we have an error object coming from the 3rd-party library and there's no easy way to get the class. Then `name` property can be used for such checks.
-- Wrapping exceptions is a widespread technique when a function handles low-level exceptions and makes a higher-level object to report about the errors. Low-level exceptions sometimes become properties of that object like `err.cause` in the examples above, but that's not strictly required.
+- We can use `instanceof` to check for particular errors. It also works with inheritance. But sometimes we have an error object coming from the 3rd-party library and there's no easy way to get the class. Then `name` property can be used for such checks.
+- Wrapping exceptions is a widespread technique: a function handles low-level exceptions and creates higher-level errors instead of various low-level ones. Low-level exceptions sometimes become properties of that object like `err.cause` in the examples above, but that's not strictly required.
diff --git a/1-js/08-error-handling/index.md b/1-js/10-error-handling/index.md
similarity index 100%
rename from 1-js/08-error-handling/index.md
rename to 1-js/10-error-handling/index.md
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.md b/1-js/11-async/01-callbacks/01-animate-circle-callback/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.md
rename to 1-js/11-async/01-callbacks/01-animate-circle-callback/solution.md
diff --git a/6-async/01-callbacks/01-animate-circle-callback/solution.view/index.html b/1-js/11-async/01-callbacks/01-animate-circle-callback/solution.view/index.html
similarity index 100%
rename from 6-async/01-callbacks/01-animate-circle-callback/solution.view/index.html
rename to 1-js/11-async/01-callbacks/01-animate-circle-callback/solution.view/index.html
diff --git a/6-async/01-callbacks/01-animate-circle-callback/task.md b/1-js/11-async/01-callbacks/01-animate-circle-callback/task.md
similarity index 100%
rename from 6-async/01-callbacks/01-animate-circle-callback/task.md
rename to 1-js/11-async/01-callbacks/01-animate-circle-callback/task.md
diff --git a/6-async/01-callbacks/article.md b/1-js/11-async/01-callbacks/article.md
similarity index 94%
rename from 6-async/01-callbacks/article.md
rename to 1-js/11-async/01-callbacks/article.md
index a5a91793e..ee0bb3caa 100644
--- a/6-async/01-callbacks/article.md
+++ b/1-js/11-async/01-callbacks/article.md
@@ -98,7 +98,7 @@ Here we did it in `loadScript`, but of course, it's a general approach.
## Callback in callback
-How to load two scripts sequentially: the first one, and then the second one after it?
+How can we load two scripts sequentially: the first one, and then the second one after it?
The natural solution would be to put the second `loadScript` call inside the callback, like this:
@@ -140,7 +140,7 @@ So, every new action is inside a callback. That's fine for few actions, but not
## Handling errors
-In examples above we didn't consider errors. What if the script loading fails? Our callback should be able to react on that.
+In the above examples we didn't consider errors. What if the script loading fails? Our callback should be able to react on that.
Here's an improved version of `loadScript` that tracks loading errors:
@@ -262,7 +262,7 @@ function step3(error, script) {
See? It does the same, and there's no deep nesting now because we made every action a separate top-level function.
-It works, but the code looks like a torn apart spreadsheet. It's difficult to read, and you probably noticed that. One needs to eye-jump between pieces while reading it. That's inconvenient, especially if the reader is not familiar with the code and doesn't know where to eye-jump.
+It works, but the code looks like a torn apart spreadsheet. It's difficult to read, and you probably noticed that one needs to eye-jump between pieces while reading it. That's inconvenient, especially if the reader is not familiar with the code and doesn't know where to eye-jump.
Also, the functions named `step*` are all of single use, they are created only to avoid the "pyramid of doom." No one is going to reuse them outside of the action chain. So there's a bit of a namespace cluttering here.
diff --git a/1-js/11-async/01-callbacks/callback-hell.png b/1-js/11-async/01-callbacks/callback-hell.png
new file mode 100644
index 000000000..567ec284e
Binary files /dev/null and b/1-js/11-async/01-callbacks/callback-hell.png differ
diff --git a/1-js/11-async/01-callbacks/callback-hell@2x.png b/1-js/11-async/01-callbacks/callback-hell@2x.png
new file mode 100644
index 000000000..4d6b0ad70
Binary files /dev/null and b/1-js/11-async/01-callbacks/callback-hell@2x.png differ
diff --git a/6-async/01-callbacks/one.js b/1-js/11-async/01-callbacks/one.js
similarity index 100%
rename from 6-async/01-callbacks/one.js
rename to 1-js/11-async/01-callbacks/one.js
diff --git a/6-async/02-promise-basics/01-re-resolve/solution.md b/1-js/11-async/02-promise-basics/01-re-resolve/solution.md
similarity index 100%
rename from 6-async/02-promise-basics/01-re-resolve/solution.md
rename to 1-js/11-async/02-promise-basics/01-re-resolve/solution.md
diff --git a/6-async/02-promise-basics/01-re-resolve/task.md b/1-js/11-async/02-promise-basics/01-re-resolve/task.md
similarity index 100%
rename from 6-async/02-promise-basics/01-re-resolve/task.md
rename to 1-js/11-async/02-promise-basics/01-re-resolve/task.md
diff --git a/6-async/02-promise-basics/02-delay-promise/solution.md b/1-js/11-async/02-promise-basics/02-delay-promise/solution.md
similarity index 100%
rename from 6-async/02-promise-basics/02-delay-promise/solution.md
rename to 1-js/11-async/02-promise-basics/02-delay-promise/solution.md
diff --git a/6-async/02-promise-basics/02-delay-promise/task.md b/1-js/11-async/02-promise-basics/02-delay-promise/task.md
similarity index 100%
rename from 6-async/02-promise-basics/02-delay-promise/task.md
rename to 1-js/11-async/02-promise-basics/02-delay-promise/task.md
diff --git a/3-animation/2-css-animations/3-animate-circle/solution.md b/1-js/11-async/02-promise-basics/03-animate-circle-promise/solution.md
similarity index 100%
rename from 3-animation/2-css-animations/3-animate-circle/solution.md
rename to 1-js/11-async/02-promise-basics/03-animate-circle-promise/solution.md
diff --git a/6-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html b/1-js/11-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html
similarity index 100%
rename from 6-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html
rename to 1-js/11-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html
diff --git a/6-async/02-promise-basics/03-animate-circle-promise/task.md b/1-js/11-async/02-promise-basics/03-animate-circle-promise/task.md
similarity index 100%
rename from 6-async/02-promise-basics/03-animate-circle-promise/task.md
rename to 1-js/11-async/02-promise-basics/03-animate-circle-promise/task.md
diff --git a/6-async/02-promise-basics/article.md b/1-js/11-async/02-promise-basics/article.md
similarity index 64%
rename from 6-async/02-promise-basics/article.md
rename to 1-js/11-async/02-promise-basics/article.md
index 6f0ebe704..8cb318e4f 100644
--- a/6-async/02-promise-basics/article.md
+++ b/1-js/11-async/02-promise-basics/article.md
@@ -8,7 +8,7 @@ Everyone is happy, because the people don't crowd you any more, and fans, becaus
This is a real-life analogy for things we often have in programming:
-1. A "producing code" that does something and takes time. For instance, the code loads a remote script. That's a "singer".
+1. A "producing code" that does something and takes time. For instance, the code loads data over a network. That's a "singer".
2. A "consuming code" that wants the result of the "producing code" once it's ready. Many functions may need that result. These are the "fans".
3. A *promise* is a special JavaScript object that links the "producing code" and the "consuming code" together. In terms of our analogy: this is the "subscription list". The "producing code" takes whatever time it needs to produce the promised result, and the "promise" makes that result available to all of the subscribed code when it's ready.
@@ -27,7 +27,7 @@ The function passed to `new Promise` is called the *executor*. When the promise
The resulting `promise` object has internal properties:
- `state` — initially "pending", then changes to either "fulfilled" or "rejected",
-- `result` — an arbitrary value of your choosing, initially `undefined`.
+- `result` — an arbitrary value, initially `undefined`.
When the executor finishes the job, it should call one of the functions that it gets as arguments:
@@ -48,15 +48,15 @@ Here's an example of a Promise constructor and a simple executor function with i
let promise = new Promise(function(resolve, reject) {
// the function is executed automatically when the promise is constructed
- // after 1 second signal that the job is done with the result "done!"
- setTimeout(() => *!*resolve("done!")*/!*, 1000);
+ // after 1 second signal that the job is done with the result "done"
+ setTimeout(() => *!*resolve("done")*/!*, 1000);
});
```
We can see two things by running the code above:
1. The executor is called automatically and immediately (by the `new Promise`).
-2. The executor receives two arguments: `resolve` and `reject` — these functions are pre-defined by the JavaScript engine. So we don't need to create them. Instead, we should write the executor to call them when ready.
+2. The executor receives two arguments: `resolve` and `reject` — these functions are pre-defined by the JavaScript engine. So we don't need to create them. We only should call one of them when ready.
After one second of "processing" the executor calls `resolve("done")` to produce the result:
@@ -77,10 +77,10 @@ let promise = new Promise(function(resolve, reject) {
To summarize, the executor should do a job (something that takes time usually) and then call `resolve` or `reject` to change the state of the corresponding Promise object.
-The Promise that is either resolved or rejected is called "settled", as opposed to a "pending" Promise.
+The Promise that is either resolved or rejected is called "settled", as opposed to a initially "pending" Promise.
````smart header="There can be only a single result or an error"
-The executor should call only one `resolve` or `reject`. The promise's state change is final.
+The executor should call only one `resolve` or one `reject`. The promise's state change is final.
All further calls of `resolve` and `reject` are ignored:
@@ -95,11 +95,11 @@ let promise = new Promise(function(resolve, reject) {
The idea is that a job done by the executor may have only one result or an error.
-Further, `resolve`/`reject` expect only one argument and will ignore additional arguments.
+Also, `resolve`/`reject` expect only one argument (or none) and will ignore additional arguments.
````
```smart header="Reject with `Error` objects"
-In case if something goes wrong, we can call `reject` with any type of argument (just like `resolve`). But it is recommended to use `Error` objects (or objects that inherit from `Error`). The reasoning for that will soon become apparent.
+In case something goes wrong, we can call `reject` with any type of argument (just like `resolve`). But it is recommended to use `Error` objects (or objects that inherit from `Error`). The reasoning for that will soon become apparent.
```
````smart header="Immediately calling `resolve`/`reject`"
@@ -112,20 +112,24 @@ let promise = new Promise(function(resolve, reject) {
});
```
-For instance, this might happen when we start to do a job but then see that everything has already been completed.
+For instance, this might happen when we start to do a job but then see that everything has already been completed and cached.
-That's fine. We immediately have a resolved Promise, nothing wrong with that.
+That's fine. We immediately have a resolved promise.
````
```smart header="The `state` and `result` are internal"
-The properties `state` and `result` of the Promise object are internal. We can't directly access them from our "consuming code". We can use the methods `.then`/`.catch` for that. They are described below.
+The properties `state` and `result` of the Promise object are internal. We can't directly access them from our "consuming code". We can use the methods `.then`/`.catch`/`.finally` for that. They are described below.
```
-## Consumers: "then" and "catch"
+## Consumers: then, catch, finally
-A Promise object serves as a link between the executor (the "producing code" or "singer") and the consuming functions (the "fans"), which will receive the result or error. Consuming functions can be registered (subscribed) using the methods `.then` and `.catch`.
+A Promise object serves as a link between the executor (the "producing code" or "singer") and the consuming functions (the "fans"), which will receive the result or error. Consuming functions can be registered (subscribed) using methods `.then`, `.catch` and `.finally`.
-The syntax of `.then` is:
+### then
+
+The most important, fundamental one is `.then`.
+
+The syntax is:
```js
promise.then(
@@ -136,15 +140,15 @@ promise.then(
The first argument of `.then` is a function that:
-1. runs when the Promise is resolved, and
+1. runs when the promise is resolved, and
2. receives the result.
The second argument of `.then` is a function that:
-1. runs when the Promise is rejected, and
+1. runs when the promise is rejected, and
2. receives the error.
-For instance, here's the reaction to a successfuly resolved promise:
+For instance, here's a reaction to a successfully resolved promise:
```js run
let promise = new Promise(function(resolve, reject) {
@@ -190,6 +194,8 @@ promise.then(alert); // shows "done!" after 1 second
*/!*
```
+### catch
+
If we're interested only in errors, then we can use `null` as the first argument: `.then(null, errorHandlingFunction)`. Or we can use `.catch(errorHandlingFunction)`, which is exactly the same:
@@ -206,50 +212,73 @@ promise.catch(alert); // shows "Error: Whoops!" after 1 second
The call `.catch(f)` is a complete analog of `.then(null, f)`, it's just a shorthand.
-````smart header="On settled promises `then` runs immediately"
-If a promise is pending, `.then/catch` handlers wait for the result. Otherwise, if a promise has already settled, they execute immediately:
+### finally
-```js run
-// an immediately resolved promise
-let promise = new Promise(resolve => resolve("done!"));
+Just like there's a `finally` clause in a regular `try {...} catch {...}`, there's `finally` in promises.
-promise.then(alert); // done! (shows up right now)
+The call `.finally(f)` is similar to `.then(f, f)` in the sense that it always runs when the promise is settled: be it resolve or reject.
+
+`finally` is a good handler for performing cleanup, e.g. stopping our loading indicators, as they are not needed any more, no matter what the outcome is.
+
+Like this:
+
+```js
+new Promise((resolve, reject) => {
+ /* do something that takes time, and then call resolve/reject */
+})
+*!*
+ // runs when the promise is settled, doesn't matter successfully or not
+ .finally(() => stop loading indicator)
+*/!*
+ .then(result => show result, err => show error)
```
-Some tasks may sometimes require time and sometimes finish immediately. The good thing is: the `.then` handler is guaranteed to run in both cases.
-````
+It's not exactly an alias of `then(f,f)` though. There are several important differences:
-````smart header="Handlers of `.then`/`.catch` are always asynchronous"
-Even when the Promise is immediately resolved, code which occurs on lines *below* your `.then`/`.catch` may still execute first.
+1. A `finally` handler has no arguments. In `finally` we don't know whether the promise is successful or not. That's all right, as our task is usually to perform "general" finalizing procedures.
+2. A `finally` handler passes through results and errors to the next handler.
-The JavaScript engine has an internal execution queue which gets all `.then/catch` handlers.
+ For instance, here the result is passed through `finally` to `then`:
+ ```js run
+ new Promise((resolve, reject) => {
+ setTimeout(() => resolve("result"), 2000)
+ })
+ .finally(() => alert("Promise ready"))
+ .then(result => alert(result)); // <-- .then handles the result
+ ```
-But it only looks into that queue when the current execution is finished.
+ And here there's an error in the promise, passed through `finally` to `catch`:
-In other words, `.then/catch` handlers are pending execution until the engine is done with the current code.
+ ```js run
+ new Promise((resolve, reject) => {
+ throw new Error("error");
+ })
+ .finally(() => alert("Promise ready"))
+ .catch(err => alert(err)); // <-- .catch handles the error object
+ ```
-For instance, here:
+ That's very convenient, because `finally` is not meant to process a promise result. So it passes it through.
-```js run
-// an "immediately" resolved Promise
-const executor = resolve => resolve("done!");
-const promise = new Promise(executor);
+ We'll talk more about promise chaining and result-passing between handlers in the next chapter.
-promise.then(alert); // this alert shows last (*)
+3. Last, but not least, `.finally(f)` is a more convenient syntax than `.then(f, f)`: no need to duplicate the function `f`.
-alert("code finished"); // this alert shows first
-```
+````smart header="On settled promises handlers runs immediately"
+If a promise is pending, `.then/catch/finally` handlers wait for the result. Otherwise, if a promise has already settled, they execute immediately:
-The promise becomes settled immediately, but the engine first finishes the current code, calls `alert`, and only *afterwards* looks into the queue to run `.then` handler.
+```js run
+// an immediately resolved promise
+let promise = new Promise(resolve => resolve("done!"));
-So the code *after* `.then` ends up always running *before* the Promise's subscribers, even in the case of an immediately-resolved Promise.
+promise.then(alert); // done! (shows up right now)
+```
-Usually that's unimportant, but in some scenarios the order may matter a great deal.
+The good thing is: a `.then` handler is guaranteed to run whether the promise takes time or settles it immediately.
````
Next, let's see more practical examples of how promises can help us to write asynchronous code.
-## Example: loadScript
+## Example: loadScript [#loadscript]
We've got the `loadScript` function for loading a script from the previous chapter.
@@ -261,7 +290,7 @@ function loadScript(src, callback) {
script.src = src;
script.onload = () => callback(null, script);
- script.onerror = () => callback(new Error(`Script load error ` + src));
+ script.onerror = () => callback(new Error(`Script load error for ${src}`));
document.head.append(script);
}
@@ -278,7 +307,7 @@ function loadScript(src) {
script.src = src;
script.onload = () => resolve(script);
- script.onerror = () => reject(new Error("Script load error: " + src));
+ script.onerror = () => reject(new Error(`Script load error for ${src}`));
document.head.append(script);
});
@@ -288,7 +317,7 @@ function loadScript(src) {
Usage:
```js run
-let promise = loadScript("https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js");
+let promise = loadScript("https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js");
promise.then(
script => alert(`${script.src} is loaded!`),
@@ -300,11 +329,10 @@ promise.then(script => alert('One more handler to do something else!'));
We can immediately see a few benefits over the callback-based pattern:
-```compare minus="Callbacks" plus="Promises"
-- We must have a ready `callback` function when calling `loadScript`. In other words, we must know what to do with the result *before* `loadScript` is called.
-- There can be only one callback.
-+ Promises allow us to do things in the natural order. First, we run `loadScript`, and `.then` we write what to do with the result.
-+ We can call `.then` on a Promise as many times as we want. Each time, we're adding a new "fan", a new subscribing function, to the "subscription list". More about this in the next section: [Promise Chaining](/promise-chaining).
-```
-So Promises already give us better code flow and flexibility. But there's more. We'll see that in the next chapters.
+| Promises | Callbacks |
+|----------|-----------|
+| Promises allow us to do things in the natural order. First, we run `loadScript(script)`, and `.then` we write what to do with the result. | We must have a `callback` function at our disposal when calling `loadScript(script, callback)`. In other words, we must know what to do with the result *before* `loadScript` is called. |
+| We can call `.then` on a Promise as many times as we want. Each time, we're adding a new "fan", a new subscribing function, to the "subscription list". More about this in the next chapter: [](info:promise-chaining). | There can be only one callback. |
+
+So Promises give us better code flow and flexibility. But there's more. We'll see that in the next chapters.
diff --git a/6-async/02-promise-basics/head.html b/1-js/11-async/02-promise-basics/head.html
similarity index 100%
rename from 6-async/02-promise-basics/head.html
rename to 1-js/11-async/02-promise-basics/head.html
diff --git a/6-async/02-promise-basics/promise-init.png b/1-js/11-async/02-promise-basics/promise-init.png
similarity index 100%
rename from 6-async/02-promise-basics/promise-init.png
rename to 1-js/11-async/02-promise-basics/promise-init.png
diff --git a/6-async/02-promise-basics/promise-init@2x.png b/1-js/11-async/02-promise-basics/promise-init@2x.png
similarity index 100%
rename from 6-async/02-promise-basics/promise-init@2x.png
rename to 1-js/11-async/02-promise-basics/promise-init@2x.png
diff --git a/1-js/11-async/02-promise-basics/promise-reject-1.png b/1-js/11-async/02-promise-basics/promise-reject-1.png
new file mode 100644
index 000000000..3ae74879c
Binary files /dev/null and b/1-js/11-async/02-promise-basics/promise-reject-1.png differ
diff --git a/1-js/11-async/02-promise-basics/promise-reject-1@2x.png b/1-js/11-async/02-promise-basics/promise-reject-1@2x.png
new file mode 100644
index 000000000..9eff3793c
Binary files /dev/null and b/1-js/11-async/02-promise-basics/promise-reject-1@2x.png differ
diff --git a/1-js/11-async/02-promise-basics/promise-resolve-1.png b/1-js/11-async/02-promise-basics/promise-resolve-1.png
new file mode 100644
index 000000000..b4bb51826
Binary files /dev/null and b/1-js/11-async/02-promise-basics/promise-resolve-1.png differ
diff --git a/1-js/11-async/02-promise-basics/promise-resolve-1@2x.png b/1-js/11-async/02-promise-basics/promise-resolve-1@2x.png
new file mode 100644
index 000000000..ecb4af35d
Binary files /dev/null and b/1-js/11-async/02-promise-basics/promise-resolve-1@2x.png differ
diff --git a/1-js/11-async/02-promise-basics/promise-resolve-reject.png b/1-js/11-async/02-promise-basics/promise-resolve-reject.png
new file mode 100644
index 000000000..6f0294f01
Binary files /dev/null and b/1-js/11-async/02-promise-basics/promise-resolve-reject.png differ
diff --git a/1-js/11-async/02-promise-basics/promise-resolve-reject@2x.png b/1-js/11-async/02-promise-basics/promise-resolve-reject@2x.png
new file mode 100644
index 000000000..b59301ff7
Binary files /dev/null and b/1-js/11-async/02-promise-basics/promise-resolve-reject@2x.png differ
diff --git a/6-async/03-promise-chaining/01-then-vs-catch/solution.md b/1-js/11-async/03-promise-chaining/01-then-vs-catch/solution.md
similarity index 100%
rename from 6-async/03-promise-chaining/01-then-vs-catch/solution.md
rename to 1-js/11-async/03-promise-chaining/01-then-vs-catch/solution.md
diff --git a/6-async/03-promise-chaining/01-then-vs-catch/task.md b/1-js/11-async/03-promise-chaining/01-then-vs-catch/task.md
similarity index 96%
rename from 6-async/03-promise-chaining/01-then-vs-catch/task.md
rename to 1-js/11-async/03-promise-chaining/01-then-vs-catch/task.md
index 51c08d7c9..cefca60aa 100644
--- a/6-async/03-promise-chaining/01-then-vs-catch/task.md
+++ b/1-js/11-async/03-promise-chaining/01-then-vs-catch/task.md
@@ -3,10 +3,11 @@
Are these code fragments equal? In other words, do they behave the same way in any circumstances, for any handler functions?
```js
-promise.then(f1, f2);
+promise.then(f1).catch(f2);
```
-Versus;
+Versus:
+
```js
-promise.then(f1).catch(f2);
+promise.then(f1, f2);
```
diff --git a/1-js/11-async/03-promise-chaining/article.md b/1-js/11-async/03-promise-chaining/article.md
new file mode 100644
index 000000000..858f12d8f
--- /dev/null
+++ b/1-js/11-async/03-promise-chaining/article.md
@@ -0,0 +1,387 @@
+
+# Promises chaining
+
+Let's return to the problem mentioned in the chapter : we have a sequence of asynchronous tasks to be done one after another. For instance, loading scripts. How can we code it well?
+
+Promises provide a couple of recipes to do that.
+
+In this chapter we cover promise chaining.
+
+It looks like this:
+
+```js run
+new Promise(function(resolve, reject) {
+
+ setTimeout(() => resolve(1), 1000); // (*)
+
+}).then(function(result) { // (**)
+
+ alert(result); // 1
+ return result * 2;
+
+}).then(function(result) { // (***)
+
+ alert(result); // 2
+ return result * 2;
+
+}).then(function(result) {
+
+ alert(result); // 4
+ return result * 2;
+
+});
+```
+
+The idea is that the result is passed through the chain of `.then` handlers.
+
+Here the flow is:
+1. The initial promise resolves in 1 second `(*)`,
+2. Then the `.then` handler is called `(**)`.
+3. The value that it returns is passed to the next `.then` handler `(***)`
+4. ...and so on.
+
+As the result is passed along the chain of handlers, we can see a sequence of `alert` calls: `1` -> `2` -> `4`.
+
+
+
+The whole thing works, because a call to `promise.then` returns a promise, so that we can call the next `.then` on it.
+
+When a handler returns a value, it becomes the result of that promise, so the next `.then` is called with it.
+
+To make these words more clear, here's the start of the chain:
+
+```js run
+new Promise(function(resolve, reject) {
+
+ setTimeout(() => resolve(1), 1000);
+
+}).then(function(result) {
+
+ alert(result);
+ return result * 2; // <-- (1)
+
+}) // <-- (2)
+// .then…
+```
+
+The value returned by `.then` is a promise, that's why we are able to add another `.then` at `(2)`. When the value is returned in `(1)`, that promise becomes resolved, so the next handler runs with the value.
+
+**A classic newbie error: technically we can also add many `.then` to a single promise. This is not chaining.**
+
+For example:
+```js run
+let promise = new Promise(function(resolve, reject) {
+ setTimeout(() => resolve(1), 1000);
+});
+
+promise.then(function(result) {
+ alert(result); // 1
+ return result * 2;
+});
+
+promise.then(function(result) {
+ alert(result); // 1
+ return result * 2;
+});
+
+promise.then(function(result) {
+ alert(result); // 1
+ return result * 2;
+});
+```
+
+What we did here is just several handlers to one promise. They don't pass the result to each other, instead they process it independently.
+
+Here's the picture (compare it with the chaining above):
+
+
+
+All `.then` on the same promise get the same result -- the result of that promise. So in the code above all `alert` show the same: `1`.
+
+In practice we rarely need multiple handlers for one promise. Chaining is used much more often.
+
+## Returning promises
+
+Normally, a value returned by a `.then` handler is immediately passed to the next handler. But there's an exception.
+
+If the returned value is a promise, then the further execution is suspended until it settles. After that, the result of that promise is given to the next `.then` handler.
+
+For instance:
+
+```js run
+new Promise(function(resolve, reject) {
+
+ setTimeout(() => resolve(1), 1000);
+
+}).then(function(result) {
+
+ alert(result); // 1
+
+*!*
+ return new Promise((resolve, reject) => { // (*)
+ setTimeout(() => resolve(result * 2), 1000);
+ });
+*/!*
+
+}).then(function(result) { // (**)
+
+ alert(result); // 2
+
+ return new Promise((resolve, reject) => {
+ setTimeout(() => resolve(result * 2), 1000);
+ });
+
+}).then(function(result) {
+
+ alert(result); // 4
+
+});
+```
+
+Here the first `.then` shows `1` returns `new Promise(…)` in the line `(*)`. After one second it resolves, and the result (the argument of `resolve`, here it's `result*2`) is passed on to handler of the second `.then` in the line `(**)`. It shows `2` and does the same thing.
+
+So the output is again 1 -> 2 -> 4, but now with 1 second delay between `alert` calls.
+
+Returning promises allows us to build chains of asynchronous actions.
+
+## Example: loadScript
+
+Let's use this feature with the promisified `loadScript`, defined in the [previous chapter](/promise-basics#loadscript), to load scripts one by one, in sequence:
+
+```js run
+loadScript("/article/promise-chaining/one.js")
+ .then(function(script) {
+ return loadScript("/article/promise-chaining/two.js");
+ })
+ .then(function(script) {
+ return loadScript("/article/promise-chaining/three.js");
+ })
+ .then(function(script) {
+ // use functions declared in scripts
+ // to show that they indeed loaded
+ one();
+ two();
+ three();
+ });
+```
+
+This code can be made bit shorter with arrow functions:
+
+```js run
+loadScript("/article/promise-chaining/one.js")
+ .then(script => loadScript("/article/promise-chaining/two.js"))
+ .then(script => loadScript("/article/promise-chaining/three.js"))
+ .then(script => {
+ // scripts are loaded, we can use functions declared there
+ one();
+ two();
+ three();
+ });
+```
+
+
+Here each `loadScript` call returns a promise, and the next `.then` runs when it resolves. Then it initiates the loading of the next script. So scripts are loaded one after another.
+
+We can add more asynchronous actions to the chain. Please note that code is still "flat", it grows down, not to the right. There are no signs of "pyramid of doom".
+
+Please note that technically we can add `.then` directly to each `loadScript`, like this:
+
+```js run
+loadScript("/article/promise-chaining/one.js").then(script1 => {
+ loadScript("/article/promise-chaining/two.js").then(script2 => {
+ loadScript("/article/promise-chaining/three.js").then(script3 => {
+ // this function has access to variables script1, script2 and script3
+ one();
+ two();
+ three();
+ });
+ });
+});
+```
+
+This code does the same: loads 3 scripts in sequence. But it "grows to the right". So we have the same problem as with callbacks.
+
+People who start to use promises sometimes don't know about chaining, so they write it this way. Generally, chaining is preferred.
+
+Sometimes it's ok to write `.then` directly, because the nested function has access to the outer scope. In the example above the most nested callback has access to all variables `script1`, `script2`, `script3`. But that's an exception rather than a rule.
+
+
+````smart header="Thenables"
+To be precise, `.then` may return an arbitrary "thenable" object, and it will be treated the same way as a promise.
+
+A "thenable" object is any object with a method `.then`.
+
+The idea is that 3rd-party libraries may implement "promise-compatible" objects of their own. They can have extended set of methods, but also be compatible with native promises, because they implement `.then`.
+
+Here's an example of a thenable object:
+
+```js run
+class Thenable {
+ constructor(num) {
+ this.num = num;
+ }
+ then(resolve, reject) {
+ alert(resolve); // function() { native code }
+ // resolve with this.num*2 after the 1 second
+ setTimeout(() => resolve(this.num * 2), 1000); // (**)
+ }
+}
+
+new Promise(resolve => resolve(1))
+ .then(result => {
+ return new Thenable(result); // (*)
+ })
+ .then(alert); // shows 2 after 1000ms
+```
+
+JavaScript checks the object returned by `.then` handler in the line `(*)`: if it has a callable method named `then`, then it calls that method providing native functions `resolve`, `reject` as arguments (similar to executor) and waits until one of them is called. In the example above `resolve(2)` is called after 1 second `(**)`. Then the result is passed further down the chain.
+
+This feature allows to integrate custom objects with promise chains without having to inherit from `Promise`.
+````
+
+
+## Bigger example: fetch
+
+In frontend programming promises are often used for network requests. So let's see an extended example of that.
+
+We'll use the [fetch](mdn:api/WindowOrWorkerGlobalScope/fetch) method to load the information about the user from the remote server. The method is quite complex, it has many optional parameters, but the basic usage is quite simple:
+
+```js
+let promise = fetch(url);
+```
+
+This makes a network request to the `url` and returns a promise. The promise resolves with a `response` object when the remote server responds with headers, but *before the full response is downloaded*.
+
+To read the full response, we should call a method `response.text()`: it returns a promise that resolves when the full text downloaded from the remote server, with that text as a result.
+
+The code below makes a request to `user.json` and loads its text from the server:
+
+```js run
+fetch('/article/promise-chaining/user.json')
+ // .then below runs when the remote server responds
+ .then(function(response) {
+ // response.text() returns a new promise that resolves with the full response text
+ // when we finish downloading it
+ return response.text();
+ })
+ .then(function(text) {
+ // ...and here's the content of the remote file
+ alert(text); // {"name": "iliakan", isAdmin: true}
+ });
+```
+
+There is also a method `response.json()` that reads the remote data and parses it as JSON. In our case that's even more convenient, so let's switch to it.
+
+We'll also use arrow functions for brevity:
+
+```js run
+// same as above, but response.json() parses the remote content as JSON
+fetch('/article/promise-chaining/user.json')
+ .then(response => response.json())
+ .then(user => alert(user.name)); // iliakan
+```
+
+Now let's do something with the loaded user.
+
+For instance, we can make one more request to GitHub, load the user profile and show the avatar:
+
+```js run
+// Make a request for user.json
+fetch('/article/promise-chaining/user.json')
+ // Load it as json
+ .then(response => response.json())
+ // Make a request to GitHub
+ .then(user => fetch(`https://api.github.com/users/${user.name}`))
+ // Load the response as json
+ .then(response => response.json())
+ // Show the avatar image (githubUser.avatar_url) for 3 seconds (maybe animate it)
+ .then(githubUser => {
+ let img = document.createElement('img');
+ img.src = githubUser.avatar_url;
+ img.className = "promise-avatar-example";
+ document.body.append(img);
+
+ setTimeout(() => img.remove(), 3000); // (*)
+ });
+```
+
+The code works, see comments about the details. Although, there's a potential problem in it, a typical error of those who begin to use promises.
+
+Look at the line `(*)`: how can we do something *after* the avatar has finished showing and gets removed? For instance, we'd like to show a form for editing that user or something else. As of now, there's no way.
+
+To make the chain extendable, we need to return a promise that resolves when the avatar finishes showing.
+
+Like this:
+
+```js run
+fetch('/article/promise-chaining/user.json')
+ .then(response => response.json())
+ .then(user => fetch(`https://api.github.com/users/${user.name}`))
+ .then(response => response.json())
+*!*
+ .then(githubUser => new Promise(function(resolve, reject) {
+*/!*
+ let img = document.createElement('img');
+ img.src = githubUser.avatar_url;
+ img.className = "promise-avatar-example";
+ document.body.append(img);
+
+ setTimeout(() => {
+ img.remove();
+*!*
+ resolve(githubUser);
+*/!*
+ }, 3000);
+ }))
+ // triggers after 3 seconds
+ .then(githubUser => alert(`Finished showing ${githubUser.name}`));
+```
+
+Now right after `setTimeout` runs `img.remove()`, it calls `resolve(githubUser)`, thus passing the control to the next `.then` in the chain and passing forward the user data.
+
+As a rule, an asynchronous action should always return a promise.
+
+That makes it possible to plan actions after it. Even if we don't plan to extend the chain now, we may need it later.
+
+Finally, we can split the code into reusable functions:
+
+```js run
+function loadJson(url) {
+ return fetch(url)
+ .then(response => response.json());
+}
+
+function loadGithubUser(name) {
+ return fetch(`https://api.github.com/users/${name}`)
+ .then(response => response.json());
+}
+
+function showAvatar(githubUser) {
+ return new Promise(function(resolve, reject) {
+ let img = document.createElement('img');
+ img.src = githubUser.avatar_url;
+ img.className = "promise-avatar-example";
+ document.body.append(img);
+
+ setTimeout(() => {
+ img.remove();
+ resolve(githubUser);
+ }, 3000);
+ });
+}
+
+// Use them:
+loadJson('/article/promise-chaining/user.json')
+ .then(user => loadGithubUser(user.name))
+ .then(showAvatar)
+ .then(githubUser => alert(`Finished showing ${githubUser.name}`));
+ // ...
+```
+
+## Summary
+
+If a `.then` (or `catch/finally`, doesn't matter) handler returns a promise, the rest of the chain waits until it settles. When it does, its result (or error) is passed further.
+
+Here's a full picture:
+
+
diff --git a/6-async/03-promise-chaining/getMessage.js b/1-js/11-async/03-promise-chaining/getMessage.js
similarity index 100%
rename from 6-async/03-promise-chaining/getMessage.js
rename to 1-js/11-async/03-promise-chaining/getMessage.js
diff --git a/1-js/11-async/03-promise-chaining/head.html b/1-js/11-async/03-promise-chaining/head.html
new file mode 100644
index 000000000..0a0075fb9
--- /dev/null
+++ b/1-js/11-async/03-promise-chaining/head.html
@@ -0,0 +1,22 @@
+
+
+
diff --git a/6-async/03-promise-chaining/one.js b/1-js/11-async/03-promise-chaining/one.js
similarity index 100%
rename from 6-async/03-promise-chaining/one.js
rename to 1-js/11-async/03-promise-chaining/one.js
diff --git a/1-js/11-async/03-promise-chaining/promise-handler-variants-2.png b/1-js/11-async/03-promise-chaining/promise-handler-variants-2.png
new file mode 100644
index 000000000..712f57b82
Binary files /dev/null and b/1-js/11-async/03-promise-chaining/promise-handler-variants-2.png differ
diff --git a/1-js/11-async/03-promise-chaining/promise-handler-variants-2@2x.png b/1-js/11-async/03-promise-chaining/promise-handler-variants-2@2x.png
new file mode 100644
index 000000000..5b57be809
Binary files /dev/null and b/1-js/11-async/03-promise-chaining/promise-handler-variants-2@2x.png differ
diff --git a/1-js/11-async/03-promise-chaining/promise-handler-variants.png b/1-js/11-async/03-promise-chaining/promise-handler-variants.png
new file mode 100644
index 000000000..2643fde89
Binary files /dev/null and b/1-js/11-async/03-promise-chaining/promise-handler-variants.png differ
diff --git a/1-js/11-async/03-promise-chaining/promise-handler-variants@2x.png b/1-js/11-async/03-promise-chaining/promise-handler-variants@2x.png
new file mode 100644
index 000000000..313e241cc
Binary files /dev/null and b/1-js/11-async/03-promise-chaining/promise-handler-variants@2x.png differ
diff --git a/1-js/11-async/03-promise-chaining/promise-then-chain.png b/1-js/11-async/03-promise-chaining/promise-then-chain.png
new file mode 100644
index 000000000..fab8a92ad
Binary files /dev/null and b/1-js/11-async/03-promise-chaining/promise-then-chain.png differ
diff --git a/1-js/11-async/03-promise-chaining/promise-then-chain@2x.png b/1-js/11-async/03-promise-chaining/promise-then-chain@2x.png
new file mode 100644
index 000000000..421b59359
Binary files /dev/null and b/1-js/11-async/03-promise-chaining/promise-then-chain@2x.png differ
diff --git a/1-js/11-async/03-promise-chaining/promise-then-many.png b/1-js/11-async/03-promise-chaining/promise-then-many.png
new file mode 100644
index 000000000..b13d20a9e
Binary files /dev/null and b/1-js/11-async/03-promise-chaining/promise-then-many.png differ
diff --git a/1-js/11-async/03-promise-chaining/promise-then-many@2x.png b/1-js/11-async/03-promise-chaining/promise-then-many@2x.png
new file mode 100644
index 000000000..f0609c946
Binary files /dev/null and b/1-js/11-async/03-promise-chaining/promise-then-many@2x.png differ
diff --git a/6-async/03-promise-chaining/three.js b/1-js/11-async/03-promise-chaining/three.js
similarity index 100%
rename from 6-async/03-promise-chaining/three.js
rename to 1-js/11-async/03-promise-chaining/three.js
diff --git a/6-async/03-promise-chaining/two.js b/1-js/11-async/03-promise-chaining/two.js
similarity index 100%
rename from 6-async/03-promise-chaining/two.js
rename to 1-js/11-async/03-promise-chaining/two.js
diff --git a/6-async/03-promise-chaining/user.json b/1-js/11-async/03-promise-chaining/user.json
similarity index 100%
rename from 6-async/03-promise-chaining/user.json
rename to 1-js/11-async/03-promise-chaining/user.json
diff --git a/6-async/03-promise-chaining/02-error-async/solution.md b/1-js/11-async/04-promise-error-handling/01-error-async/solution.md
similarity index 100%
rename from 6-async/03-promise-chaining/02-error-async/solution.md
rename to 1-js/11-async/04-promise-error-handling/01-error-async/solution.md
diff --git a/6-async/03-promise-chaining/02-error-async/task.md b/1-js/11-async/04-promise-error-handling/01-error-async/task.md
similarity index 100%
rename from 6-async/03-promise-chaining/02-error-async/task.md
rename to 1-js/11-async/04-promise-error-handling/01-error-async/task.md
diff --git a/1-js/11-async/04-promise-error-handling/article.md b/1-js/11-async/04-promise-error-handling/article.md
new file mode 100644
index 000000000..3424d099e
--- /dev/null
+++ b/1-js/11-async/04-promise-error-handling/article.md
@@ -0,0 +1,345 @@
+
+# Error handling with promises
+
+Asynchronous actions may sometimes fail: in case of an error the corresponding promise becomes rejected. For instance, `fetch` fails if the remote server is not available. We can use `.catch` to handle errors (rejections).
+
+Promise chaining is great at that aspect. When a promise rejects, the control jumps to the closest rejection handler down the chain. That's very convenient in practice.
+
+For instance, in the code below the URL is wrong (no such site) and `.catch` handles the error:
+
+```js run
+*!*
+fetch('https://no-such-server.blabla') // rejects
+*/!*
+ .then(response => response.json())
+ .catch(err => alert(err)) // TypeError: failed to fetch (the text may vary)
+```
+
+Or, maybe, everything is all right with the site, but the response is not valid JSON:
+
+```js run
+fetch('/') // fetch works fine now, the server responds with the HTML page
+*!*
+ .then(response => response.json()) // rejects: the page is HTML, not a valid json
+*/!*
+ .catch(err => alert(err)) // SyntaxError: Unexpected token < in JSON at position 0
+```
+
+The easiest way to catch all errors is to append `.catch` to the end of chain:
+
+```js run
+fetch('/article/promise-chaining/user.json')
+ .then(response => response.json())
+ .then(user => fetch(`https://api.github.com/users/${user.name}`))
+ .then(response => response.json())
+ .then(githubUser => new Promise((resolve, reject) => {
+ let img = document.createElement('img');
+ img.src = githubUser.avatar_url;
+ img.className = "promise-avatar-example";
+ document.body.append(img);
+
+ setTimeout(() => {
+ img.remove();
+ resolve(githubUser);
+ }, 3000);
+ }))
+*!*
+ .catch(error => alert(error.message));
+*/!*
+```
+
+Normally, `.catch` doesn't trigger at all, because there are no errors. But if any of the promises above rejects (a network problem or invalid json or whatever), then it would catch it.
+
+## Implicit try..catch
+
+The code of a promise executor and promise handlers has an "invisible `try..catch`" around it. If an exception happens, it gets caught and treated as a rejection.
+
+For instance, this code:
+
+```js run
+new Promise((resolve, reject) => {
+*!*
+ throw new Error("Whoops!");
+*/!*
+}).catch(alert); // Error: Whoops!
+```
+
+...Works exactly the same as this:
+
+```js run
+new Promise((resolve, reject) => {
+*!*
+ reject(new Error("Whoops!"));
+*/!*
+}).catch(alert); // Error: Whoops!
+```
+
+The "invisible `try..catch`" around the executor automatically catches the error and treats it as a rejection.
+
+This happens not only in the executor, but in its handlers as well. If we `throw` inside a `.then` handler, that means a rejected promise, so the control jumps to the nearest error handler.
+
+Here's an example:
+
+```js run
+new Promise((resolve, reject) => {
+ resolve("ok");
+}).then((result) => {
+*!*
+ throw new Error("Whoops!"); // rejects the promise
+*/!*
+}).catch(alert); // Error: Whoops!
+```
+
+This happens for all errors, not just those caused by the `throw` statement. For example, a programming error:
+
+```js run
+new Promise((resolve, reject) => {
+ resolve("ok");
+}).then((result) => {
+*!*
+ blabla(); // no such function
+*/!*
+}).catch(alert); // ReferenceError: blabla is not defined
+```
+
+The final `.catch` not only catches explicit rejections, but also occasional errors in the handlers above.
+
+## Rethrowing
+
+As we already noticed, `.catch` behaves like `try..catch`. We may have as many `.then` handlers as we want, and then use a single `.catch` at the end to handle errors in all of them.
+
+In a regular `try..catch` we can analyze the error and maybe rethrow it if can't handle. The same thing is possible for promises.
+
+If we `throw` inside `.catch`, then the control goes to the next closest error handler. And if we handle the error and finish normally, then it continues to the closest successful `.then` handler.
+
+In the example below the `.catch` successfully handles the error:
+
+```js run
+// the execution: catch -> then
+new Promise((resolve, reject) => {
+
+ throw new Error("Whoops!");
+
+}).catch(function(error) {
+
+ alert("The error is handled, continue normally");
+
+}).then(() => alert("Next successful handler runs"));
+```
+
+Here the `.catch` block finishes normally. So the next successful `.then` handler is called.
+
+In the example below we see the other situation with `.catch`. The handler `(*)` catches the error and just can't handle it (e.g. it only knows how to handle `URIError`), so it throws it again:
+
+```js run
+// the execution: catch -> catch -> then
+new Promise((resolve, reject) => {
+
+ throw new Error("Whoops!");
+
+}).catch(function(error) { // (*)
+
+ if (error instanceof URIError) {
+ // handle it
+ } else {
+ alert("Can't handle such error");
+
+*!*
+ throw error; // throwing this or another error jumps to the next catch
+*/!*
+ }
+
+}).then(function() {
+ /* never runs here */
+}).catch(error => { // (**)
+
+ alert(`The unknown error has occurred: ${error}`);
+ // don't return anything => execution goes the normal way
+
+});
+```
+
+Then the execution jumps from the first `.catch` `(*)` to the next one `(**)` down the chain.
+
+In the section below we'll see a practical example of rethrowing.
+
+## Fetch error handling example
+
+Let's improve error handling for the user-loading example.
+
+The promise returned by [fetch](mdn:api/WindowOrWorkerGlobalScope/fetch) rejects when it's impossible to make a request. For instance, a remote server is not available, or the URL is malformed. But if the remote server responds with error 404, or even error 500, then it's considered a valid response.
+
+What if the server returns a non-JSON page with error 500 in the line `(*)`? What if there's no such user, and GitHub returns a page with error 404 at `(**)`?
+
+```js run
+fetch('no-such-user.json') // (*)
+ .then(response => response.json())
+ .then(user => fetch(`https://api.github.com/users/${user.name}`)) // (**)
+ .then(response => response.json())
+ .catch(alert); // SyntaxError: Unexpected token < in JSON at position 0
+ // ...
+```
+
+
+As of now, the code tries to load the response as JSON no matter what and dies with a syntax error. You can see that by running the example above, as the file `no-such-user.json` doesn't exist.
+
+That's not good, because the error just falls through the chain, without details: what failed and where.
+
+So let's add one more step: we should check the `response.status` property that has HTTP status, and if it's not 200, then throw an error.
+
+```js run
+class HttpError extends Error { // (1)
+ constructor(response) {
+ super(`${response.status} for ${response.url}`);
+ this.name = 'HttpError';
+ this.response = response;
+ }
+}
+
+function loadJson(url) { // (2)
+ return fetch(url)
+ .then(response => {
+ if (response.status == 200) {
+ return response.json();
+ } else {
+ throw new HttpError(response);
+ }
+ })
+}
+
+loadJson('no-such-user.json') // (3)
+ .catch(alert); // HttpError: 404 for .../no-such-user.json
+```
+
+1. We make a custom class for HTTP Errors to distinguish them from other types of errors. Besides, the new class has a constructor that accepts `response` object and saves it in the error. So error-handling code will be able to access the response.
+2. Then we put together the requesting and error-handling code into a function that fetches the `url` *and* treats any non-200 status as an error. That's convenient, because we often need such logic.
+3. Now `alert` shows a more helpful descriptive message.
+
+The great thing about having our own class for errors is that we can easily check for it in error-handling code using `instanceof`.
+
+For instance, we can make a request, and then if we get 404 -- ask the user to modify the information.
+
+The code below loads a user with the given name from GitHub. If there's no such user, then it asks for the correct name:
+
+```js run
+function demoGithubUser() {
+ let name = prompt("Enter a name?", "iliakan");
+
+ return loadJson(`https://api.github.com/users/${name}`)
+ .then(user => {
+ alert(`Full name: ${user.name}.`);
+ return user;
+ })
+ .catch(err => {
+*!*
+ if (err instanceof HttpError && err.response.status == 404) {
+*/!*
+ alert("No such user, please reenter.");
+ return demoGithubUser();
+ } else {
+ throw err; // (*)
+ }
+ });
+}
+
+demoGithubUser();
+```
+
+Please note: `.catch` here catches all errors, but it "knows how to handle" only `HttpError 404`. In that particular case it means that there's no such user, and `.catch` just retries in that case.
+
+For other errors, it has no idea what could go wrong. Maybe a programming error or something. So it just rethrows it in the line `(*)`.
+
+## Unhandled rejections
+
+What happens when an error is not handled? For instance, after the rethrow `(*)` in the example above.
+
+Or we could just forget to append an error handler to the end of the chain, like here:
+
+```js untrusted run refresh
+new Promise(function() {
+ noSuchFunction(); // Error here (no such function)
+})
+ .then(() => {
+ // successful promise handlers, one or more
+ }); // without .catch at the end!
+```
+
+In case of an error, the promise state becomes "rejected", and the execution should jump to the closest rejection handler. But there is no such handler in the examples above. So the error gets "stuck". There's no code to handle it.
+
+In practice, just like with a regular unhandled errors, it means that something has terribly gone wrong.
+
+What happens when a regular error occurs and is not caught by `try..catch`? The script dies. Similar thing happens with unhandled promise rejections.
+
+The JavaScript engine tracks such rejections and generates a global error in that case. You can see it in the console if you run the example above.
+
+In the browser we can catch such errors using the event `unhandledrejection`:
+
+```js run
+*!*
+window.addEventListener('unhandledrejection', function(event) {
+ // the event object has two special properties:
+ alert(event.promise); // [object Promise] - the promise that generated the error
+ alert(event.reason); // Error: Whoops! - the unhandled error object
+});
+*/!*
+
+new Promise(function() {
+ throw new Error("Whoops!");
+}); // no catch to handle the error
+```
+
+The event is the part of the [HTML standard](https://html.spec.whatwg.org/multipage/webappapis.html#unhandled-promise-rejections).
+
+If an error occurs, and there's no `.catch`, the `unhandledrejection` handler triggers, and gets the `event` object with the information about the error, so we can do something.
+
+Usually such errors are unrecoverable, so our best way out is to inform the user about the problem and probably report the incident to the server.
+
+In non-browser environments like Node.js there are other similar ways to track unhandled errors.
+
+
+## Summary
+
+- `.catch` handles promise rejections of all kinds: be it a `reject()` call, or an error thrown in a handler.
+- We should place `.catch` exactly in places where we want to handle errors and know how to handle them. The handler should analyze errors (custom error classes help) and rethrow unknown ones.
+- It's ok not to use `.catch` at all, if there's no way to recover from an error.
+- In any case we should have the `unhandledrejection` event handler (for browsers, and analogs for other environments), to track unhandled errors and inform the user (and probably our server) about the them, so that our app never "just dies".
+
+And finally, if we have load-indication, then `.finally` is a great handler to stop it when the fetch is complete:
+
+```js run
+function demoGithubUser() {
+ let name = prompt("Enter a name?", "iliakan");
+
+*!*
+ document.body.style.opacity = 0.3; // (1) start the indication
+*/!*
+
+ return loadJson(`https://api.github.com/users/${name}`)
+*!*
+ .finally(() => { // (2) stop the indication
+ document.body.style.opacity = '';
+ return new Promise(resolve => setTimeout(resolve)); // (*)
+ })
+*/!*
+ .then(user => {
+ alert(`Full name: ${user.name}.`);
+ return user;
+ })
+ .catch(err => {
+ if (err instanceof HttpError && err.response.status == 404) {
+ alert("No such user, please reenter.");
+ return demoGithubUser();
+ } else {
+ throw err;
+ }
+ });
+}
+
+demoGithubUser();
+```
+
+Here on the line `(1)` we indicate loading by dimming the document. The method doesn't matter, could use any type of indication instead.
+
+When the promise is settled, be it a successful fetch or an error, `finally` triggers at the line `(2)` and stops the indication.
+
+There's a little browser trick `(*)` with returning a zero-timeout promise from `finally`. That's because some browsers (like Chrome) need "a bit time" outside promise handlers to paint document changes. So it ensures that the indication is visually stopped before going further on the chain.
diff --git a/1-js/11-async/04-promise-error-handling/getMessage.js b/1-js/11-async/04-promise-error-handling/getMessage.js
new file mode 100644
index 000000000..6c5893433
--- /dev/null
+++ b/1-js/11-async/04-promise-error-handling/getMessage.js
@@ -0,0 +1,3 @@
+function getMessage() {
+ return "Hello, world!";
+}
diff --git a/6-async/03-promise-chaining/head.html b/1-js/11-async/04-promise-error-handling/head.html
similarity index 62%
rename from 6-async/03-promise-chaining/head.html
rename to 1-js/11-async/04-promise-error-handling/head.html
index 31c6b4271..a0b741962 100644
--- a/6-async/03-promise-chaining/head.html
+++ b/1-js/11-async/04-promise-error-handling/head.html
@@ -1,16 +1,4 @@
diff --git a/1-js/12-generators-iterators/index.md b/1-js/12-generators-iterators/index.md
new file mode 100644
index 000000000..ccc909d1a
--- /dev/null
+++ b/1-js/12-generators-iterators/index.md
@@ -0,0 +1,2 @@
+
+# Generators, advanced iteration
diff --git a/1-js/13-modules/01-modules-intro/article.md b/1-js/13-modules/01-modules-intro/article.md
new file mode 100644
index 000000000..789760fcc
--- /dev/null
+++ b/1-js/13-modules/01-modules-intro/article.md
@@ -0,0 +1,379 @@
+
+# Modules, introduction
+
+As our application grows bigger, we want to split it into multiple files, so called 'modules'.
+A module usually contains a class or a library of useful functions.
+
+For a long time, JavaScript existed without a language-level module syntax. That wasn't a problem, because initially scripts were small and simple, so there was no need.
+
+But eventually scripts became more and more complex, so the community invented a variety of ways to organize code into modules, special libraries to load modules on demand.
+
+For instance:
+
+- [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition) -- one of the most ancient module systems, initially implemented by the library [require.js](http://requirejs.org/).
+- [CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1) -- the module system created for Node.js server.
+- [UMD](https://github.com/umdjs/umd) -- one more module system, suggested as a universal one, compatible with AMD and CommonJS.
+
+Now all these slowly become a part of history, but we still can find them in old scripts. The language-level module system appeared in the standard in 2015, gradually evolved since then, and is now supported by all major browsers and in Node.js.
+
+## What is a module?
+
+A module is just a file, a single script, as simple as that.
+
+There are directives `export` and `import` to interchange functionality between modules, call functions of one module from another one:
+
+- `export` keyword labels variables and functions that should be accessible from outside the current module.
+- `import` allows to import functionality from other modules.
+
+For instance, if we have a file `sayHi.js` exporting a function:
+
+```js
+// 📁 sayHi.js
+export function sayHi(user) {
+ alert(`Hello, ${user}!`);
+}
+```
+
+...Then another file may import and use it:
+
+```js
+// 📁 main.js
+import {sayHi} from './sayHi.js';
+
+alert(sayHi); // function...
+sayHi('John'); // Hello, John!
+```
+
+In this tutorial we concentrate on the language itself, but we use browser as the demo environment, so let's see how to use modules in the browser.
+
+As modules support special keywords and features, we must tell the browser that a script should be treated as module, by using the attribute `
+```
+
+Here we can see it in the browser, but the same is true for any module.
+
+### Module-level scope
+
+Each module has its own top-level scope. In other words, top-level variables and functions from a module are not seen in other scripts.
+
+In the example below, two scripts are imported, and `hello.js` tries to use `user` variable declared in `user.js`, and fails:
+
+[codetabs src="scopes" height="140" current="index.html"]
+
+Modules are expected to `export` what they want to be accessible from outside and `import` what they need.
+
+So we should import `user.js` directly into `hello.js` instead of `index.html`.
+
+That's the correct variant:
+
+[codetabs src="scopes-working" height="140" current="hello.js"]
+
+In the browser, independent top-level scope also exists for each `
+
+
+```
+
+If we really need to make a window-level global variable, we can explicitly assign it to `window` and access as `window.user`. But that's an exception requiring a good reason.
+
+### A module code is evaluated only the first time when imported
+
+If the same module is imported into multiple other places, its code is executed only the first time, then exports are given to all importers.
+
+That has important consequences. Let's see that on examples.
+
+First, if executing a module code brings side-effects, like showing a message, then importing it multiple times will trigger it only once -- the first time:
+
+```js
+// 📁 alert.js
+alert("Module is evaluated!");
+```
+
+```js
+// Import the same module from different files
+
+// 📁 1.js
+import `./alert.js`; // Module is evaluated!
+
+// 📁 2.js
+import `./alert.js`; // (nothing)
+```
+
+In practice, top-level module code is mostly used for initialization. We create data structures, pre-fill them, and if we want something to be reusable -- export it.
+
+Now, a more advanced example.
+
+Let's say, a module exports an object:
+
+```js
+// 📁 admin.js
+export let admin = {
+ name: "John"
+};
+```
+
+If this module is imported from multiple files, the module is only evaluated the first time, `admin` object is created, and then passed to all further importers.
+
+All importers get exactly the one and only `admin` object:
+
+```js
+// 📁 1.js
+import {admin} from './admin.js';
+admin.name = "Pete";
+
+// 📁 2.js
+import {admin} from './admin.js';
+alert(admin.name); // Pete
+
+*!*
+// Both 1.js and 2.js imported the same object
+// Changes made in 1.js are visible in 2.js
+*/!*
+```
+
+So, let's reiterate -- the module is executed only once. Exports are generated, and then they are shared between importers, so if something changes the `admin` object, other modules will see that .
+
+Such behavior is great for modules that require configuration. We can set required properties on the first import, and then in further imports it's ready.
+
+For instance, `admin.js` module may provide certain functionality, but expect the credentials to come into the `admin` object from outside:
+
+```js
+// 📁 admin.js
+export let admin = { };
+
+export function sayHi() {
+ alert(`Ready to serve, ${admin.name}!`);
+}
+```
+
+Now, in `init.js`, the first script of our app, we set `admin.name`. Then everyone will see it, including calls made from inside `admin.js` itself:
+
+```js
+// 📁 init.js
+import {admin} from './admin.js';
+admin.name = "Pete";
+```
+
+```js
+// 📁 other.js
+import {admin, sayHi} from './admin.js';
+
+alert(admin.name); // *!*Pete*/!*
+
+sayHi(); // Ready to serve, *!*Pete*/!*!
+```
+
+### import.meta
+
+The object `import.meta` contains the information about the current module.
+
+Its content depends on the environment. In the browser, it contains the url of the script, or a current webpage url if inside HTML:
+
+```html run height=0
+
+```
+
+### Top-level "this" is undefined
+
+That's kind of a minor feature, but for completeness we should mention it.
+
+In a module, top-level `this` is undefined, as opposed to a global object in non-module scripts:
+
+```html run height=0
+
+
+
+```
+
+## Browser-specific features
+
+There are also several browser-specific differences of scripts with `type="module"` compared to regular ones.
+
+You may want skip those for now if you're reading for the first time, or if you don't use JavaScript in a browser.
+
+### Module scripts are deferred
+
+Module scripts are *always* deferred, same effect as `defer` attribute (described in the chapter [](info:script-async-defer)), for both external and inline scripts.
+
+In other words:
+- external module scripts `
+
+Compare to regular script below:
+
+
+
+
+```
+
+Please note: the second script actually works before the first! So we'll see `undefined` first, and then `object`.
+
+That's because modules are deferred, so way wait for the document to be processed. The regular scripts runs immediately, so we saw its output first.
+
+When using modules, we should be aware that HTML-page shows up as it loads, and JavaScript modules run after that, so the user may see the page before the JavaScript application is ready. Some functionality may not work yet. We should put transparent overlays or "loading indicators", or otherwise ensure that the visitor won't be confused by that.
+
+### Async works on inline scripts
+
+Async attribute `
+```
+
+### External scripts
+
+There are two notable differences of external module scripts:
+
+1. External scripts with same `src` run only once:
+ ```html
+
+
+
+ ```
+
+2. External scripts that are fetched from another domain require [CORS](mdn:Web/HTTP/CORS) headers. In other words, if a module script is fetched from another domain, the remote server must supply a header `Access-Control-Allow-Origin: *` (may use fetching domain instead of `*`) to indicate that the fetch is allowed.
+ ```html
+
+
+
+ ```
+
+ That ensures better security by default.
+
+### No "bare" modules allowed
+
+In the browser, `import` must get either a relative or absolute URL. Modules without any path are called "bare" modules. Such modules are not allowed in `import`.
+
+For instance, this `import` is invalid:
+```js
+import {sayHi} from 'sayHi'; // Error, "bare" module
+// the module must have a path, e.g. './sayHi.js' or wherever the module is
+```
+
+Certain environments, like Node.js or bundle tools allow bare modules, without any path, as they have own ways for finding modules and hooks to fine-tune them. But browsers do not support bare modules yet.
+
+### Compatibility, "nomodule"
+
+Old browsers do not understand `type="module"`. Scripts of the unknown type are just ignored. For them, it's possible to provide a fallback using `nomodule` attribute:
+
+```html run
+
+
+
+```
+
+If we use bundle tools, then as scripts are bundled together into a single file (or few files), `import/export` statements inside those scripts are replaced by special bundler functions. So the resulting "bundled" script does not contain any `import/export`, it doesn't require `type="module"`, and we can put it into a regular script:
+
+```html
+
+
+```
+
+## Build tools
+
+In real-life, browser modules are rarely used in their "raw" form. Usually, we bundle them together with a special tool such as [Webpack](https://webpack.js.org/) and deploy to the production server.
+
+One of the benefits of using bundlers -- they give more control over how modules are resolved, allowing bare modules and much more, like CSS/HTML modules.
+
+Build tools do the following:
+
+1. Take a "main" module, the one intended to be put in `
diff --git a/1-js/13-modules/01-modules-intro/say.view/say.js b/1-js/13-modules/01-modules-intro/say.view/say.js
new file mode 100644
index 000000000..198a3be6d
--- /dev/null
+++ b/1-js/13-modules/01-modules-intro/say.view/say.js
@@ -0,0 +1,3 @@
+export function sayHi(user) {
+ return `Hello, ${user}!`;
+}
diff --git a/1-js/13-modules/01-modules-intro/scopes-working.view/hello.js b/1-js/13-modules/01-modules-intro/scopes-working.view/hello.js
new file mode 100644
index 000000000..6c087ea81
--- /dev/null
+++ b/1-js/13-modules/01-modules-intro/scopes-working.view/hello.js
@@ -0,0 +1,3 @@
+import {user} from './user.js';
+
+document.body.innerHTML = user; // John
diff --git a/1-js/13-modules/01-modules-intro/scopes-working.view/index.html b/1-js/13-modules/01-modules-intro/scopes-working.view/index.html
new file mode 100644
index 000000000..b78f75912
--- /dev/null
+++ b/1-js/13-modules/01-modules-intro/scopes-working.view/index.html
@@ -0,0 +1,2 @@
+
+
diff --git a/1-js/13-modules/01-modules-intro/scopes-working.view/user.js b/1-js/13-modules/01-modules-intro/scopes-working.view/user.js
new file mode 100644
index 000000000..d289329c6
--- /dev/null
+++ b/1-js/13-modules/01-modules-intro/scopes-working.view/user.js
@@ -0,0 +1 @@
+export let user = "John";
diff --git a/1-js/13-modules/01-modules-intro/scopes.view/hello.js b/1-js/13-modules/01-modules-intro/scopes.view/hello.js
new file mode 100644
index 000000000..714aafa1f
--- /dev/null
+++ b/1-js/13-modules/01-modules-intro/scopes.view/hello.js
@@ -0,0 +1 @@
+alert(user); // no such variable (each module has independent variables)
diff --git a/1-js/13-modules/01-modules-intro/scopes.view/index.html b/1-js/13-modules/01-modules-intro/scopes.view/index.html
new file mode 100644
index 000000000..a87e96fdf
--- /dev/null
+++ b/1-js/13-modules/01-modules-intro/scopes.view/index.html
@@ -0,0 +1,3 @@
+
+
+
diff --git a/1-js/13-modules/01-modules-intro/scopes.view/user.js b/1-js/13-modules/01-modules-intro/scopes.view/user.js
new file mode 100644
index 000000000..12ec850d9
--- /dev/null
+++ b/1-js/13-modules/01-modules-intro/scopes.view/user.js
@@ -0,0 +1 @@
+let user = "John";
diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md
new file mode 100644
index 000000000..8aa122f07
--- /dev/null
+++ b/1-js/13-modules/02-import-export/article.md
@@ -0,0 +1,441 @@
+# Export and Import
+
+Export and import directives are very versatile.
+
+In the previous chapter we saw a simple use, now let's explore more examples.
+
+## Export before declarations
+
+We can label any declaration as exported by placing `export` before it, be it a variable, function or a class.
+
+For instance, here all exports are valid:
+
+```js
+// export an array
+*!*export*/!* let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+// export a constant
+*!*export*/!* const MODULES_BECAME_STANDARD_YEAR = 2015;
+
+// export a class
+*!*export*/!* class User {
+ constructor(name) {
+ this.name = name;
+ }
+}
+```
+
+````smart header="No semicolons after export class/function"
+Please note that `export` before a class or a function does not make it a [function expression](info:function-expressions-arrows). It's still a function declaration, albeit exported.
+
+Most JavaScript style guides recommend semicolons after statements, but not after function and class declarations.
+
+That's why there should be no semicolons at the end of `export class` and `export function`.
+
+```js
+export function sayHi(user) {
+ alert(`Hello, ${user}!`);
+} *!* // no ; at the end */!*
+```
+
+````
+
+## Export apart from declarations
+
+Also, we can put `export` separately.
+
+Here we first declare, and then export:
+
+```js
+// 📁 say.js
+function sayHi(user) {
+ alert(`Hello, ${user}!`);
+}
+
+function sayBye(user) {
+ alert(`Bye, ${user}!`);
+}
+
+*!*
+export {sayHi, sayBye}; // a list of exported variables
+*/!*
+```
+
+...Or, technically we could put `export` above functions as well.
+
+## Import *
+
+Usually, we put a list of what to import into `import {...}`, like this:
+
+```js
+// 📁 main.js
+*!*
+import {sayHi, sayBye} from './say.js';
+*/!*
+
+sayHi('John'); // Hello, John!
+sayBye('John'); // Bye, John!
+```
+
+But if the list is long, we can import everything as an object using `import * as `, for instance:
+
+```js
+// 📁 main.js
+*!*
+import * as say from './say.js';
+*/!*
+
+say.sayHi('John');
+say.sayBye('John');
+```
+
+At first sight, "import everything" seems such a cool thing, short to write, why should we ever explicitly list what we need to import?
+
+Well, there are few reasons.
+
+1. Modern build tools ([webpack](http://webpack.github.io) and others) bundle modules together and optimize them to speedup loading and remove unused stuff.
+
+ Let's say, we added a 3rd-party library `lib.js` to our project with many functions:
+ ```js
+ // 📁 lib.js
+ export function sayHi() { ... }
+ export function sayBye() { ... }
+ export function becomeSilent() { ... }
+ ```
+
+ Now if we only use one of `lib.js` functions in our project:
+ ```js
+ // 📁 main.js
+ import {sayHi} from './lib.js';
+ ```
+ ...Then the optimizer will automatically detect it and totally remove the other functions from the bundled code, thus making the build smaller. That is called "tree-shaking".
+
+2. Explicitly listing what to import gives shorter names: `sayHi()` instead of `lib.sayHi()`.
+3. Explicit imports give better overview of the code structure: what is used and where. It makes code support and refactoring easier.
+
+## Import "as"
+
+We can also use `as` to import under different names.
+
+For instance, let's import `sayHi` into the local variable `hi` for brevity, and same for `sayBye`:
+
+```js
+// 📁 main.js
+*!*
+import {sayHi as hi, sayBye as bye} from './say.js';
+*/!*
+
+hi('John'); // Hello, John!
+bye('John'); // Bye, John!
+```
+
+## Export "as"
+
+The similar syntax exists for `export`.
+
+Let's export functions as `hi` and `bye`:
+
+```js
+// 📁 say.js
+...
+export {sayHi as hi, sayBye as bye};
+```
+
+Now `hi` and `bye` are official names for outsiders:
+
+```js
+// 📁 main.js
+import * as say from './say.js';
+
+say.hi('John'); // Hello, John!
+say.bye('John'); // Bye, John!
+```
+
+## export default
+
+So far, we've seen how to import/export multiple things, optionally "as" other names.
+
+In practice, modules contain either:
+- A library, pack of functions, like `lib.js`.
+- Or an entity, like `class User` is described in `user.js`, the whole module has only this class.
+
+Mostly, the second approach is preferred, so that every "thing" resides in its own module.
+
+Naturally, that requires a lot of files, as everything wants its own module, but that's not a problem at all. Actually, code navigation becomes easier, if files are well-named and structured into folders.
+
+Modules provide special `export default` syntax to make "one thing per module" way look better.
+
+It requires following `export` and `import` statements:
+
+1. Put `export default` before the "main export" of the module.
+2. Call `import` without curly braces.
+
+For instance, here `user.js` exports `class User`:
+
+```js
+// 📁 user.js
+export *!*default*/!* class User { // just add "default"
+ constructor(name) {
+ this.name = name;
+ }
+}
+```
+
+...And `main.js` imports it:
+
+```js
+// 📁 main.js
+import *!*User*/!* from './user.js'; // not {User}, just User
+
+new User('John');
+```
+
+Imports without curly braces look nicer. A common mistake when starting to use modules is to forget curly braces at all. So, remember, `import` needs curly braces for named imports and doesn't need them for the default one.
+
+| Named export | Default export |
+|--------------|----------------|
+| `export class User {...}` | `export default class User {...}` |
+| `import {User} from ...` | `import User from ...`|
+
+Naturally, there may be only one "default" export per file.
+
+We may have both default and named exports in a single module, but in practice people usually don't mix them. A module has either named exports or the default one.
+
+**Another thing to note is that named exports must (naturally) have a name, while `export default` may be anonymous.**
+
+For instance, these are all perfectly valid default exports:
+
+```js
+export default class { // no class name
+ constructor() { ... }
+}
+
+export default function(user) { // no function name
+ alert(`Hello, ${user}!`);
+}
+
+// export a single value, without making a variable
+export default ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+```
+
+That's fine, because `export default` is only one per file. Contrary to that, omitting a name for named imports would be an error:
+
+```js
+export class { // Error! (non-default export needs a name)
+ constructor() {}
+}
+```
+
+### "Default" alias
+
+The "default" keyword is used as an "alias" for the default export, for standalone exports and other scenarios when we need to reference it.
+
+For example, if we already have a function declared, that's how to `export default` it (separately from the definition):
+
+```js
+function sayHi(user) {
+ alert(`Hello, ${user}!`);
+}
+
+export {sayHi as default}; // same as if we added "export default" before the function
+```
+
+Or, let's say a module `user.js` exports one main "default" thing and a few named ones (rarely the case, but happens):
+
+```js
+// 📁 user.js
+export default class User {
+ constructor(name) {
+ this.name = name;
+ }
+}
+
+export function sayHi(user) {
+ alert(`Hello, ${user}!`);
+}
+```
+
+Here's how to import the default export along with a named one:
+
+```js
+// 📁 main.js
+import {*!*default as User*/!*, sayHi} from './user.js';
+
+new User('John');
+```
+
+Or, if we consider importing `*` as an object, then the `default` property is exactly the default export:
+
+```js
+// 📁 main.js
+import * as user from './user.js';
+
+let User = user.default;
+new User('John');
+```
+
+
+### Should I use default exports?
+
+One should be careful about using default exports, because they are more difficult to maintain.
+
+Named exports are explicit. They exactly name what they import, so we have that information from them, that's a good thing.
+
+Also, named exports enforce us to use exactly the right name to import:
+
+```js
+import {User} from './user.js';
+// import {MyUser} won't work, the name must be {User}
+```
+
+For default exports, we always choose the name when importing:
+
+```js
+import User from './user.js'; // works
+import MyUser from './user.js'; // works too
+// could be import Anything..., and it'll be work
+```
+
+So, there's a little bit more freedom that can be abused, so that team members may use different names for the same thing.
+
+Usually, to avoid that and keep the code consistent, there's a rule that imported variables should correspond to file names, e.g:
+
+```js
+import User from './user.js';
+import LoginForm from './loginForm.js';
+import func from '/path/to/func.js';
+...
+```
+
+Another solution would be to use named exports everywhere. Even if only a single thing is exported, it's still exported under a name, without `default`.
+
+That also makes re-export (see below) a little bit easier.
+
+## Re-export
+
+"Re-export" syntax `export ... from ...` allows to import things and immediately export them (possibly under another name), like this:
+
+```js
+export {sayHi} from './say.js';
+export {default as User} from './user.js';
+```
+
+What's the point, why that's needed? Let's see a practical use case.
+
+Imagine, we're writing a "package": a folder with a lot of modules, mostly needed internally, with some of the functionality exported outside (tools like NPM allow to publish and distribute packages, but here it doesn't matter).
+
+A directory structure could be like this:
+```
+auth/
+ index.js
+ user.js
+ helpers.js
+ tests/
+ login.js
+ providers/
+ github.js
+ facebook.js
+ ...
+```
+
+We'd like to expose the package functionality via a single entry point, the "main file" `auth/index.js`, to be used like this:
+
+```js
+import {login, logout} from 'auth/index.js'
+```
+
+The idea is that outsiders, developers who use our package, should not meddle with its internal structure. They should not search for files inside our package folder. We export only what's necessary in `auth/index.js` and keep the rest hidden from prying eyes.
+
+Now, as the actual exported functionality is scattered among the package, we can gather and "re-export" it in `auth/index.js`:
+
+```js
+// 📁 auth/index.js
+import {login, logout} from './helpers.js';
+export {login, logout};
+
+import User from './user.js';
+export {User};
+
+import Github from './providers/github.js';
+export {Github};
+...
+```
+
+"Re-exporting" is just a shorter notation for that:
+
+```js
+// 📁 auth/index.js
+export {login, logout} from './helpers.js';
+// or, to re-export all helpers, we could use:
+// export * from './helpers.js';
+
+export {default as User} from './user.js';
+
+export {default as Github} from './providers/github.js';
+...
+```
+
+````warn header="Re-exporting default is tricky"
+Please note: `export User from './user.js'` won't work. It's actually a syntax error. To re-export the default export, we must mention it explicitly `{default as ...}`, like in the example above.
+
+Also, there's another oddity: `export * from './user.js'` re-exports only named exports, excluding the default one. Once again, we need to mention it explicitly.
+
+For instance, to re-export everything, two statements will be necessary:
+```js
+export * from './module.js'; // to re-export named exports
+export {default} from './module.js'; // to re-export default
+```
+
+The default should be mentioned explicitly only when re-exporting: `import * as obj` works fine. It imports the default export as `obj.default`. So there's a slight asymmetry between import and export constructs here.
+````
+
+## Summary
+
+There are following types of `export`:
+
+- Before declaration:
+ - `export [default] class/function/variable ...`
+- Standalone:
+ - `export {x [as y], ...}`.
+- Re-export:
+ - `export {x [as y], ...} from "mod"`
+ - `export * from "mod"` (doesn't re-export default).
+ - `export {default [as y]} from "mod"` (re-export default).
+
+Import:
+
+- Named exports from module:
+ - `import {x [as y], ...} from "mod"`
+- Default export:
+ - `import x from "mod"`
+ - `import {default as x} from "mod"`
+- Everything:
+ - `import * as obj from "mod"`
+- Import the module (it runs), but do not assign it to a variable:
+ - `import "mod"`
+
+We can put import/export statements at the top or at the bottom of a script, that doesn't matter.
+
+So this is technically fine:
+```js
+sayHi();
+
+// ...
+
+import {sayHi} from './say.js'; // import at the end of the script
+```
+
+In practice imports are usually at the start of the file, but that's only for better convenience.
+
+**Please note that import/export statements don't work if inside `{...}`.**
+
+A conditional import, like this, won't work:
+```js
+if (something) {
+ import {sayHi} from "./say.js"; // Error: import must be at top level
+}
+```
+
+...But what if we really need to import something conditionally? Or at the right time? Like, load a module upon request, when it's really needed?
+
+We'll see dynamic imports in the next chapter.
diff --git a/1-js/13-modules/03-modules-dynamic-imports/article.md b/1-js/13-modules/03-modules-dynamic-imports/article.md
new file mode 100644
index 000000000..ee8bf0a4c
--- /dev/null
+++ b/1-js/13-modules/03-modules-dynamic-imports/article.md
@@ -0,0 +1,54 @@
+
+# Dynamic imports
+
+Export and import statements that we covered in previous chapters are called "static".
+
+That's because they are indeed static. The syntax is very strict.
+
+First, we can't dynamically generate any parameters of `import`.
+
+The module path must be a primitive string, can't be a function call. This won't work:
+
+```js
+import ... from *!*getModuleName()*/!*; // Error, only from "string" is allowed
+```
+
+Second, we can't import conditionally or at run-time:
+
+```js
+if(...) {
+ import ...; // Error, not allowed!
+}
+
+{
+ import ...; // Error, we can't put import in any block
+}
+```
+
+That's because, import/export aim to provide a backbone for the code structure. That's a good thing, as code structure can be analyzed, modules can be gathered and bundled together, unused exports can be removed (tree-shaken). That's possible only because everything is fixed.
+
+But how do we import a module dynamically, on-demand?
+
+## The import() function
+
+The `import(module)` function can be called from anywhere. It returns a promise that resolves into a module object.
+
+The usage pattern looks like this:
+
+```js run
+let modulePath = prompt("Module path?");
+
+import(modulePath)
+ .then(obj => )
+ .catch(err => )
+```
+
+Or, we could use `let module = await import(modulePath)` if inside an async function.
+
+Like this:
+
+[codetabs src="say" current="index.html"]
+
+So, dynamic imports are very simple to use.
+
+Also, dynamic imports work in regular scripts, they don't require `script type="module"`.
diff --git a/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html b/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html
new file mode 100644
index 000000000..80909cf94
--- /dev/null
+++ b/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html
@@ -0,0 +1,10 @@
+
+
+
diff --git a/1-js/13-modules/03-modules-dynamic-imports/say.view/say.js b/1-js/13-modules/03-modules-dynamic-imports/say.view/say.js
new file mode 100644
index 000000000..cff234b7c
--- /dev/null
+++ b/1-js/13-modules/03-modules-dynamic-imports/say.view/say.js
@@ -0,0 +1,11 @@
+export function hi() {
+ alert(`Hello`);
+}
+
+export function bye() {
+ alert(`Bye`);
+}
+
+export default function() {
+ alert("Module loaded (export default)!");
+}
diff --git a/1-js/13-modules/index.md b/1-js/13-modules/index.md
new file mode 100644
index 000000000..78fb060e8
--- /dev/null
+++ b/1-js/13-modules/index.md
@@ -0,0 +1,2 @@
+
+# Modules
diff --git a/1-js/plan3.txt b/1-js/plan3.txt
deleted file mode 100644
index 4d553174f..000000000
--- a/1-js/plan3.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-todo:
-
-intl?
-proxy?
-eval?
diff --git a/10-misc/01-proxy/01-error-nonexisting/solution.md b/10-misc/01-proxy/01-error-nonexisting/solution.md
new file mode 100644
index 000000000..099664a1d
--- /dev/null
+++ b/10-misc/01-proxy/01-error-nonexisting/solution.md
@@ -0,0 +1,23 @@
+
+```js run
+let user = {
+ name: "John"
+};
+
+function wrap(target) {
+ return new Proxy(target, {
+ get(target, prop, receiver) {
+ if (prop in target) {
+ return Reflect.get(target, prop, receiver);
+ } else {
+ throw new ReferenceError(`Property doesn't exist: "${prop}"`)
+ }
+ }
+ });
+}
+
+user = wrap(user);
+
+alert(user.name); // John
+alert(user.age); // Error: Property doesn't exist
+```
diff --git a/10-misc/01-proxy/01-error-nonexisting/task.md b/10-misc/01-proxy/01-error-nonexisting/task.md
new file mode 100644
index 000000000..0b8b35720
--- /dev/null
+++ b/10-misc/01-proxy/01-error-nonexisting/task.md
@@ -0,0 +1,31 @@
+
+# Error on reading non-existant property
+
+Create a proxy that throws an error for an attempt to read of a non-existant property.
+
+That can help to detect programming mistakes early.
+
+Write a function `wrap(target)` that takes an object `target` and return a proxy instead with that functionality.
+
+That's how it should work:
+
+```js
+let user = {
+ name: "John"
+};
+
+function wrap(target) {
+ return new Proxy(target, {
+*!*
+ /* your code */
+*/!*
+ });
+}
+
+user = wrap(user);
+
+alert(user.name); // John
+*!*
+alert(user.age); // Error: Property doesn't exist
+*/!*
+```
diff --git a/10-misc/01-proxy/02-array-negative/solution.md b/10-misc/01-proxy/02-array-negative/solution.md
new file mode 100644
index 000000000..207205501
--- /dev/null
+++ b/10-misc/01-proxy/02-array-negative/solution.md
@@ -0,0 +1,19 @@
+
+```js run
+let array = [1, 2, 3];
+
+array = new Proxy(array, {
+ get(target, prop, receiver) {
+ if (prop < 0) {
+ // even if we access it like arr[1]
+ // prop is a string, so need to convert it to number
+ prop = +prop + target.length;
+ }
+ return Reflect.get(target, prop, receiver);
+ }
+});
+
+
+alert(array[-1]); // 3
+alert(array[-2]); // 2
+```
diff --git a/10-misc/01-proxy/02-array-negative/task.md b/10-misc/01-proxy/02-array-negative/task.md
new file mode 100644
index 000000000..6663b6f59
--- /dev/null
+++ b/10-misc/01-proxy/02-array-negative/task.md
@@ -0,0 +1,33 @@
+
+# Accessing array[-1]
+
+In some languages, we can access array elements using negative indexes, counted from the end.
+
+Like this:
+
+```js
+let array = [1, 2, 3];
+
+array[-1]; // 3, the last element
+array[-2]; // 2, one step from the end
+array[-3]; // 1, two steps from the end
+```
+
+In other words, `array[-N]` is the same as `array[array.length - N]`.
+
+Create a proxy to implement that behavior.
+
+That's how it should work:
+
+```js
+let array = [1, 2, 3];
+
+array = new Proxy(array, {
+ /* your code */
+});
+
+alert( array[-1] ); // 3
+alert( array[-2] ); // 2
+
+// Other array functionality should be kept "as is"
+```
diff --git a/10-misc/01-proxy/03-observable/solution.md b/10-misc/01-proxy/03-observable/solution.md
new file mode 100644
index 000000000..dcb4f2a79
--- /dev/null
+++ b/10-misc/01-proxy/03-observable/solution.md
@@ -0,0 +1,40 @@
+The solution consists of two parts:
+
+1. Whenever `.observe(handler)` is called, we need to remember the handler somewhere, to be able to call it later. We can store it right in the object, using our symbol as the key.
+2. We need a proxy with `set` trap to call handlers in case of any change.
+
+```js run
+let handlers = Symbol('handlers');
+
+function makeObservable(target) {
+ // 1. Initialize handlers store
+ target[handlers] = [];
+
+ // Store the handler function in array for future calls
+ target.observe = function(handler) {
+ this[handlers].push(handler);
+ };
+
+ // 2. Create a proxy to handle changes
+ return new Proxy(target, {
+ set(target, property, value, receiver) {
+ let success = Reflect.set(...arguments); // forward the operation to object
+ if (success) { // if there were no error while setting the property
+ // call all handlers
+ target[handlers].forEach(handler => handler(property, value));
+ }
+ return success;
+ }
+ });
+}
+
+let user = {};
+
+user = makeObservable(user);
+
+user.observe((key, value) => {
+ alert(`SET ${key}=${value}`);
+});
+
+user.name = "John";
+```
diff --git a/10-misc/01-proxy/03-observable/task.md b/10-misc/01-proxy/03-observable/task.md
new file mode 100644
index 000000000..6220104c8
--- /dev/null
+++ b/10-misc/01-proxy/03-observable/task.md
@@ -0,0 +1,29 @@
+
+# Observable
+
+Create a function `makeObservable(target)` that "makes the object observable" by returning a proxy.
+
+Here's how it should work:
+
+```js run
+function makeObservable(target) {
+ /* your code */
+}
+
+let user = {};
+user = makeObservable(user);
+
+user.observe((key, value) => {
+ alert(`SET ${key}=${value}`);
+});
+
+user.name = "John"; // alerts: SET name=John
+```
+
+In other words, an object returned by `makeObservable` has the method `observe(handler)`.
+
+Whenever a property changes, `handler(key, value)` is called with the name and value o the property.
+
+
+P.S. In this task, please handle only writing to a property. Other operations can be implemented in a similar way.
+P.P.S. You might want to introduce a global variable or a global structure to store handlers. That's fine here. In real life, such function lives in a module, that has its own global scope.
diff --git a/10-misc/01-proxy/article.md b/10-misc/01-proxy/article.md
new file mode 100644
index 000000000..63b4ca2fe
--- /dev/null
+++ b/10-misc/01-proxy/article.md
@@ -0,0 +1,877 @@
+
+# Proxy and Reflect
+
+A *proxy* wraps another object and intercepts operations, like reading/writing properties and others, optionally handling them on its own, or transparently allowing the object to handle them.
+
+Proxies are used in many libraries and some browser frameworks. We'll see many practical applications in this chapter.
+
+The syntax:
+
+```js
+let proxy = new Proxy(target, handler)
+```
+
+- `target` -- is an object to wrap, can be anything, including functions.
+- `handler` -- an object with "traps": methods that intercept operations., e.g. `get` for reading a property, `set` for writing a property, etc.
+
+For operations on `proxy`, if there's a corresponding trap in `handler`, then it runs, and the proxy has a chance to handle it, otherwise the operation is performed on `target`.
+
+As a starting example, let's create a proxy without any traps:
+
+```js run
+let target = {};
+let proxy = new Proxy(target, {}); // empty handler
+
+proxy.test = 5; // writing to proxy (1)
+alert(target.test); // 5, the property appeared in target!
+
+alert(proxy.test); // 5, we can read it from proxy too (2)
+
+for(let key in proxy) alert(key); // test, iteration works (3)
+```
+
+As there are no traps, all operations on `proxy` are forwarded to `target`.
+
+1. A writing operation `proxy.test=` sets the value on `target`.
+2. A reading operation `proxy.test` returns the value from `target`.
+3. Iteration over `proxy` returns values from `target`.
+
+As we can see, without any traps, `proxy` is a transparent wrapper around `target`.
+
+
+
+The proxy is a special "exotic object". It doesn't have "own" properties. With an empty handler it transparently forwards operations to `target`.
+
+If we want any magic, we should add traps.
+
+There's a list of internal object operations in the [Proxy specification](https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots). A proxy can intercept any of these, we just need to add a handler method.
+
+In the table below:
+- **Internal Method** is the specification-specific name for the operation. For example, `[[Get]]` is the name of the internal, specification-only method of reading a property. The specification describes how this is done at the very lowest level.
+- **Handler Method** is a method name that we should add to proxy `handler` to trap the operation and perform custom actions.
+
+
+| Internal Method | Handler Method | Traps... |
+|-----------------|----------------|-------------|
+| `[[Get]]` | `get` | reading a property |
+| `[[Set]]` | `set` | writing to a property |
+| `[[HasProperty]]` | `has` | `in` operator |
+| `[[Delete]]` | `deleteProperty` | `delete` operator |
+| `[[Call]]` | `apply` | function call |
+| `[[Construct]]` | `construct` | `new` operator |
+| `[[GetPrototypeOf]]` | `getPrototypeOf` | [Object.getPrototypeOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf) |
+| `[[SetPrototypeOf]]` | `setPrototypeOf` | [Object.setPrototypeOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf) |
+| `[[IsExtensible]]` | `isExtensible` | [Object.isExtensible](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible) |
+| `[[PreventExtensions]]` | `preventExtensions` | [Object.preventExtensions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions) |
+| `[[GetOwnProperty]]` | `getOwnPropertyDescriptor` | [Object.getOwnPropertyDescriptor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) |
+| `[[DefineOwnProperty]]` | `defineProperty` | [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty), [Object.defineProperties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties) |
+| `[[OwnPropertyKeys]]` | `ownKeys` | [Object.keys](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys), [Object.getOwnPropertyNames](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames), [Object.getOwnPropertySymbols](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols), iteration keys |
+
+```warn header="Invariants"
+JavaScript enforces some invariants -- conditions that must be fulfilled by internal methods and traps.
+
+Most of them are for return values:
+- `[[Set]]` must return `true` if the value was written successfully, otherwise `false`.
+- `[[Delete]]` must return `true` if the value was deleted successfully, otherwise `false`.
+- ...and so on, we'll see more in examples below.
+
+There are some other invariants, like:
+- `[[GetPrototypeOf]]`, applied to the proxy object must return the same value as `[[GetPrototypeOf]]` applied to the proxy object's target object.
+
+In other words, reading prototype of a `proxy` must always return the prototype of the target object. The `getPrototypeOf` trap may intercept this operation, but it must follow this rule, not do something crazy.
+
+Invariants ensure correct and consistent behavior of language features. The full invariants list is in [the specification](https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots), you probably won't violate them, if not doing something weird.
+```
+
+Let's see how that works on practical examples.
+
+## Default value with "get" trap
+
+The most common traps are for reading/writing properties.
+
+To intercept the reading, the `handler` should have a method `get(target, property, receiver)`.
+
+It triggers when a property is read:
+
+- `target` -- is the target object, the one passed as the first argument to `new Proxy`,
+- `property` -- property name,
+- `receiver` -- if the property is a getter, then `receiver` is the object that's going to be used as `this` in that code. Usually that's the `proxy` object itself (or an object that inherits from it, if we inherit from proxy).
+
+Let's use `get` to implement default values for an object.
+
+For instance, we'd like a numeric array to return `0` for non-existant values instead of `undefined`.
+
+Let's wrap it into a proxy that traps reading and returns the default value if there's no such property:
+
+```js run
+let numbers = [0, 1, 2];
+
+numbers = new Proxy(numbers, {
+ get(target, prop) {
+ if (prop in target) {
+ return target[prop];
+ } else {
+ return 0; // default value
+ }
+ }
+});
+
+*!*
+alert( numbers[1] ); // 1
+alert( numbers[123] ); // 0 (no such value)
+*/!*
+```
+
+The approach is generic. We can use `Proxy` to implement any logic for "default" values.
+
+Imagine, we have a dictionary with phrases along with translations:
+
+```js run
+let dictionary = {
+ 'Hello': 'Hola',
+ 'Bye': 'Adiós'
+};
+
+alert( dictionary['Hello'] ); // Hola
+alert( dictionary['Welcome'] ); // undefined
+```
+
+Right now, if there's no phrase, reading from `dictionary` returns `undefined`. But in practice, leaving a phrase non-translated is usually better than `undefined`. So let's make a non-translated phrase the default value instead of `undefined`.
+
+To achieve that, we'll wrap `dictionary` in a proxy that intercepts reading operations:
+
+```js run
+let dictionary = {
+ 'Hello': 'Hola',
+ 'Bye': 'Adiós'
+};
+
+dictionary = new Proxy(dictionary, {
+*!*
+ get(target, phrase) { // intercept reading a property from dictionary
+*/!*
+ if (phrase in target) { // if we have it in the dictionary
+ return target[phrase]; // return the translation
+ } else {
+ // otherwise, return the non-translated phrase
+ return phrase;
+ }
+ }
+});
+
+// Look up arbitrary phrases in the dictionary!
+// At worst, they are not translated.
+alert( dictionary['Hello'] ); // Hola
+*!*
+alert( dictionary['Welcome to Proxy']); // Welcome to Proxy (no translation)
+*/!*
+```
+
+````smart header="Proxy should be used instead of `target` everywhere"
+Please note how the proxy overwrites the variable:
+
+```js
+dictionary = new Proxy(dictionary, ...);
+numbers = new Proxy(numbers, ...);
+```
+
+The proxy should totally replace the target object everywhere. No one should ever reference the target object after it got proxied. Otherwise it's easy to mess up.
+````
+
+## Validation with "set" trap
+
+Now let's intercept writing as well.
+
+Let's say we want a numeric array. If a value of another type is added, there should be an error.
+
+The `set` trap triggers when a property is written: `set(target, property, value, receiver)`
+
+- `target` -- is the target object, the one passed as the first argument to `new Proxy`,
+- `property` -- property name,
+- `value` -- property value,
+- `receiver` -- same as in `get` trap, only matters if the property is a setter.
+
+The `set` trap should return `true` if setting is successful, and `false` otherwise (leads to `TypeError`).
+
+Let's use it to validate new values:
+
+```js run
+let numbers = [];
+
+numbers = new Proxy(numbers, { // (*)
+*!*
+ set(target, prop, val) { // to intercept property writing
+*/!*
+ if (typeof val == 'number') {
+ target[prop] = val;
+ return true;
+ } else {
+ return false;
+ }
+ }
+});
+
+numbers.push(1);
+numbers.push(2);
+alert("Length is: " + numbers.length); // 2
+
+*!*
+numbers.push("test"); // TypeError ('set' on proxy returned false)
+*/!*
+
+alert("This line is never reached (error in the line above)");
+```
+
+Please note: the built-in functionality of arrays is still working! The `length` property auto-increases when values are added. Our proxy doesn't break anything.
+
+Also, we don't have to override value-adding array methods like `push` and `unshift`, and so on! Internally, they use `[[Set]]` operation, that's intercepted by the proxy.
+
+So the code is clean and concise.
+
+```warn header="Don't forget to return `true`"
+As said above, there are invariants to be held.
+
+For `set`, it must return `true` for a successful write.
+
+If it returns a falsy value (or doesn't return anything), that triggers `TypeError`.
+```
+
+## Protected properties with "deleteProperty" and "ownKeys"
+
+There's a widespread convention that properties and methods prefixed by an underscore `_` are internal. They shouldn't be accessible from outside the object.
+
+Technically, that's possible though:
+
+```js run
+let user = {
+ name: "John",
+ _password: "secret"
+};
+
+alert(user._password); // secret
+```
+
+Let's use proxies to prevent any access to properties starting with `_`.
+
+We'll need the traps:
+- `get` to throw an error when reading,
+- `set` to throw an error when writing,
+- `deleteProperty` to throw an error when deleting,
+- `ownKeys` to skip properties starting with `_` when iterating over an object or using `Object.keys()`
+
+Here's the code:
+
+```js run
+let user = {
+ name: "John",
+ _password: "***"
+};
+
+user = new Proxy(user, {
+*!*
+ get(target, prop) {
+*/!*
+ if (prop.startsWith('_')) {
+ throw new Error("Access denied");
+ }
+ let value = target[prop];
+ return (typeof value === 'function') ? value.bind(target) : value; // (*)
+ },
+*!*
+ set(target, prop, val) { // to intercept property writing
+*/!*
+ if (prop.startsWith('_')) {
+ throw new Error("Access denied");
+ } else {
+ target[prop] = val;
+ }
+ },
+*!*
+ deleteProperty(target, prop) { // to intercept property deletion
+*/!*
+ if (prop.startsWith('_')) {
+ throw new Error("Access denied");
+ } else {
+ delete target[prop];
+ return true;
+ }
+ },
+*!*
+ ownKeys(target) { // to intercept property list
+*/!*
+ return Object.keys(target).filter(key => !key.startsWith('_'));
+ }
+});
+
+// "get" doesn't allow to read _password
+try {
+ alert(user._password); // Error: Access denied
+} catch(e) { alert(e.message); }
+
+// "set" doesn't allow to write _password
+try {
+ user._password = "test"; // Error: Access denied
+} catch(e) { alert(e.message); }
+
+// "deleteProperty" doesn't allow to delete _password
+try {
+ delete user._password; // Error: Access denied
+} catch(e) { alert(e.message); }
+
+// "ownKeys" filters out _password
+for(let key in user) alert(key); // name
+```
+
+Please note the important detail in `get` trap, in the line `(*)`:
+
+```js
+get(target, prop) {
+ // ...
+ let value = target[prop];
+*!*
+ return (typeof value === 'function') ? value.bind(target) : value; // (*)
+*/!*
+}
+```
+
+If an object method is called, such as `user.checkPassword()`, it must be able to access `_password`:
+
+```js
+user = {
+ // ...
+ checkPassword(value) {
+ // object method must be able to read _password
+ return value === this._password;
+ }
+}
+```
+
+Normally, `user.checkPassword()` call gets proxied `user` as `this` (the object before dot becomes `this`), so when it tries to access `this._password`, the property protection kicks in and throws an error. So we bind it to `target` in the line `(*)`. Then all operations from that function directly reference the object, without any property protection.
+
+That solution is not ideal, as the method may pass the unproxied object somewhere else, and then we'll get messed up: where's the original object, and where's the proxied one.
+
+As an object may be proxied multiple times (multiple proxies may add different "tweaks" to the object), weird bugs may follow.
+
+So, for complex objects with methods such proxy shouldn't be used.
+
+```smart header="Private properties of a class"
+Modern JavaScript engines natively support private properties in classes, prefixed with `#`. They are described in the chapter . No proxies required.
+
+Such properties have their own issues though. In particular, they are not inherited.
+```
+
+
+## "In range" with "has" trap
+
+Let's say we have a range object:
+
+```js
+let range = {
+ start: 1,
+ end: 10
+};
+```
+
+We'd like to use "in" operator to check that a number is in `range`.
+
+The "has" trap intercepts "in" calls: `has(target, property)`
+
+- `target` -- is the target object, passed as the first argument to `new Proxy`,
+- `property` -- property name
+
+Here's the demo:
+
+```js run
+let range = {
+ start: 1,
+ end: 10
+};
+
+range = new Proxy(range, {
+*!*
+ has(target, prop) {
+*/!*
+ return prop >= target.start && prop <= target.end
+ }
+});
+
+*!*
+alert(5 in range); // true
+alert(50 in range); // false
+*/!*
+```
+
+A nice syntactic sugar, isn't it?
+
+## Wrapping functions: "apply"
+
+We can wrap a proxy around a function as well.
+
+The `apply(target, thisArg, args)` trap handles calling a proxy as function:
+
+- `target` is the target object,
+- `thisArg` is the value of `this`.
+- `args` is a list of arguments.
+
+For example, let's recall `delay(f, ms)` decorator, that we did in the chapter .
+
+In that chapter we did it without proxies. A call to `delay(f, ms)` would return a function that forwards all calls to `f` after `ms` milliseconds.
+
+Here's the function-based implementation:
+
+```js run
+// no proxies, just a function wrapper
+function delay(f, ms) {
+ // return a wrapper that passes the call to f after the timeout
+ return function() { // (*)
+ setTimeout(() => f.apply(this, arguments), ms);
+ };
+}
+
+function sayHi(user) {
+ alert(`Hello, ${user}!`);
+}
+
+// now calls to sayHi will be delayed for 3 seconds
+sayHi = delay(sayHi, 3000);
+
+sayHi("John"); // Hello, John! (after 3 seconds)
+```
+
+As you can see, that mostly works. The wrapper function `(*)` performs the call after the timeout.
+
+But a wrapper function does not forward property read/write operations or anything else. So if we have a property on the original function, we can't access it after wrapping:
+
+```js run
+function delay(f, ms) {
+ return function() {
+ setTimeout(() => f.apply(this, arguments), ms);
+ };
+}
+
+function sayHi(user) {
+ alert(`Hello, ${user}!`);
+}
+
+*!*
+alert(sayHi.length); // 1 (function length is the arguments count)
+*/!*
+
+sayHi = delay(sayHi, 3000);
+
+*!*
+alert(sayHi.length); // 0 (wrapper has no arguments)
+*/!*
+```
+
+
+`Proxy` is much more powerful, as it forwards everything to the target object.
+
+Let's use `Proxy` instead of a wrapping function:
+
+```js run
+function delay(f, ms) {
+ return new Proxy(f, {
+ apply(target, thisArg, args) {
+ setTimeout(() => target.apply(thisArg, args), ms);
+ }
+ });
+}
+
+function sayHi(user) {
+ alert(`Hello, ${user}!`);
+}
+
+sayHi = delay(sayHi, 3000);
+
+*!*
+alert(sayHi.length); // 1 (*) proxy forwards "get length" operation to the target
+*/!*
+
+sayHi("John"); // Hello, John! (after 3 seconds)
+```
+
+The result is the same, but now not only calls, but all operations on the proxy are forwarded to the original function. So `sayHi.length` is returned correctly after the wrapping in the line `(*)`.
+
+We've got a "richer" wrapper.
+
+There exist other traps, but probably you've already got the idea.
+
+## Reflect
+
+The `Reflect` API was designed to work in tandem with `Proxy`.
+
+For every internal object operation that can be trapped, there's a `Reflect` method. It has the same name and arguments as the trap, and can be used to forward the operation to an object.
+
+For example:
+
+```js run
+let user = {
+ name: "John",
+};
+
+user = new Proxy(user, {
+ get(target, prop, receiver) {
+ alert(`GET ${prop}`);
+*!*
+ return Reflect.get(target, prop, receiver); // (1)
+*/!*
+ },
+ set(target, prop, val, receiver) {
+ alert(`SET ${prop} TO ${val}`);
+*!*
+ return Reflect.set(target, prop, val, receiver); // (2)
+*/!*
+ }
+});
+
+let name = user.name; // GET name
+user.name = "Pete"; // SET name TO Pete
+```
+
+- `Reflect.get` gets the property, like `target[prop]` that we used before.
+- `Reflect.set` sets the property, like `target[prop] = value`, and also ensures the correct return value.
+
+In most cases, we can do the same thing without `Reflect`. But we may miss some peculiar aspects.
+
+Consider the following example, it doesn't use `Reflect` and doesn't work right.
+
+We have a proxied user object and inherit from it, then use a getter:
+
+```js run
+let user = {
+ _name: "Guest",
+ get name() {
+ return this._name;
+ }
+};
+
+user = new Proxy(user, {
+ get(target, prop, receiver) {
+ return target[prop]; // (*)
+ }
+});
+
+
+let admin = {
+ __proto__: user,
+ _name: "Admin"
+};
+
+*!*
+// Expected: Admin
+alert(admin.name); // Guest (?!?)
+*/!*
+```
+
+As you can see, the result is incorrect! The `admin.name` is expected to be `"Admin"`, not `"Guest"`! Without the proxy, it would be `"Admin"`, looks like the proxying "broke" our object.
+
+
+
+Why this happens? That's easy to understand if we explore what's going on during the call in the last line of the code.
+
+1. There's no `name` property in `admin`, so `admin.name` call goes to `admin` prototype.
+2. The prototype is the proxy, so its `get` trap intercepts the attempt to read `name`.
+3. In the line `(*)` it returns `target[prop]`, but what is the `target`?
+ - The `target`, the first argument of `get`, is always the object passed to `new Proxy`, the original `user`.
+ - So, `target[prop]` invokes the getter `name` with `this=target=user`.
+ - Hence the result is `"Guest"`.
+
+How to fix it? That's what the `receiver`, the third argument of `get` is for! It holds the correct `this`. We just need to call `Reflect.get` to pass it on.
+
+Here's the correct variant:
+
+```js run
+let user = {
+ _name: "Guest",
+ get name() {
+ return this._name;
+ }
+};
+
+user = new Proxy(user, {
+ get(target, prop, receiver) {
+*!*
+ return Reflect.get(target, prop, receiver); // (*)
+*/!*
+ }
+});
+
+
+let admin = {
+ __proto__: user,
+ _name: "Admin"
+};
+
+*!*
+alert(admin.name); // Admin
+*/!*
+```
+
+Now the `receiver` holding the correct `this` is passed to getter by `Reflect.get` in the line `(*)`, so it works correctly.
+
+We could also write the trap as:
+
+```js
+get(target, prop, receiver) {
+ return Reflect.get(*!*...arguments*/!*);
+}
+```
+
+`Reflect` calls are named exactly the same way as traps and accept the same arguments. They were specifically designed this way.
+
+So, `return Reflect...` provides a safe no-brainer to forward the operation and make sure we don't forget anything related to that.
+
+## Proxy limitations
+
+Proxies are a great way to alter or tweak the behavior of the existing objects, including built-in ones, such as arrays.
+
+Still, it's not perfect. There are limitations.
+
+### Built-in objects: Internal slots
+
+Many built-in objects, for example `Map`, `Set`, `Date`, `Promise` and others make use of so-called "internal slots".
+
+These are like properties, but reserved for internal purposes. Built-in methods access them directly, not via `[[Get]]/[[Set]]` internal methods. So `Proxy` can't intercept that.
+
+Who cares? They are internal anyway!
+
+Well, here's the issue. After such built-in object gets proxied, the proxy doesn't have these internal slots, so built-in methods will fail.
+
+For example:
+
+```js run
+let map = new Map();
+
+let proxy = new Proxy(map, {});
+
+*!*
+proxy.set('test', 1); // Error
+*/!*
+```
+
+An attempt to set a value into a proxied `Map` fails, for the reason related to its [internal implementation](https://tc39.es/ecma262/#sec-map.prototype.set).
+
+Internally, a `Map` stores all data in its `[[MapData]]` internal slot. The proxy doesn't have such slot. The `set` method tries to access `this.[[MapData]]` internal property, but because `this=proxy`, can't find it in `proxy` and just fails.
+
+Fortunately, there's a way to fix it:
+
+```js run
+let map = new Map();
+
+let proxy = new Proxy(map, {
+ get(target, prop, receiver) {
+ let value = Reflect.get(...arguments);
+*!*
+ return typeof value == 'function' ? value.bind(target) : value;
+*/!*
+ }
+});
+
+proxy.set('test', 1);
+alert(proxy.get('test')); // 1 (works!)
+```
+
+Now it works fine, because `get` trap binds function properties, such as `map.set`, to the target object (`map`) itself.
+
+Unlike the previous example, the value of `this` inside `proxy.set(...)` will be not `proxy`, but the original `map`. So when the internal implementation of `set` tries to access `this.[[MapData]]` internal slot, it succeeds.
+
+```smart header="`Array` has no internal slots"
+A notable exception: built-in `Array` doesn't use internal slots. That's for historical reasons, as it appeared so long ago.
+
+So there's no such problem when proxying an array.
+```
+
+### Private fields
+
+The similar thing happens with private class fields.
+
+For example, `getName()` method accesses the private `#name` property and breaks after proxying:
+
+```js run
+class User {
+ #name = "Guest";
+
+ getName() {
+ return this.#name;
+ }
+}
+
+let user = new User();
+
+user = new Proxy(user, {});
+
+*!*
+alert(user.getName()); // Error
+*/!*
+```
+
+The reason is that private fields are implemented using internal slots. JavaScript does not use `[[Get]]/[[Set]]` when accessing them.
+
+In the call `user.getName()` the value of `this` is the proxied user, and it doesn't have the slot with private fields.
+
+Once again, the solution with binding the method makes it work:
+
+```js run
+class User {
+ #name = "Guest";
+
+ getName() {
+ return this.#name;
+ }
+}
+
+let user = new User();
+
+user = new Proxy(user, {
+ get(target, prop, receiver) {
+ let value = Reflect.get(...arguments);
+ return typeof value == 'function' ? value.bind(target) : value;
+ }
+});
+
+alert(user.getName()); // Guest
+```
+
+That said, the solution has drawbacks, explained previously: it exposes the original object to the method, potentially allowing it to be passed further and breaking other proxied functionality.
+
+### Proxy != target
+
+Proxy and the original object are different objects. That's natural, right?
+
+So if we store the original object somewhere, and then proxy it, then things might break:
+
+```js run
+let allUsers = new Set();
+
+class User {
+ constructor(name) {
+ this.name = name;
+ allUsers.add(this);
+ }
+}
+
+let user = new User("John");
+
+alert(allUsers.has(user)); // true
+
+user = new Proxy(user, {});
+
+*!*
+alert(allUsers.has(user)); // false
+*/!*
+```
+
+As we can see, after proxying we can't find `user` in the set `allUsers`, because the proxy is a different object.
+
+```warn header="Proxies can't intercept a strict equality test `===`"
+Proxies can intercept many operators, such as `new` (with `construct`), `in` (with `has`), `delete` (with `deleteProperty`) and so on.
+
+But there's no way to intercept a strict equality test for objects. An object is strictly equal to itself only, and no other value.
+
+So all operations and built-in classes that compare objects for equality will differentiate between the object and the proxy. No transparent replacement here.
+```
+
+
+## Revocable proxies
+
+A *revocable* proxy is a proxy that can be disabled.
+
+Let's say we have a resource, and would like to close access to it any moment.
+
+What we can do is to wrap it into a revocable proxy, without any traps. Such proxy will forward operations to object, and we also get a special method to disable it.
+
+The syntax is:
+
+```js
+let {proxy, revoke} = Proxy.revocable(target, handler)
+```
+
+The call returns an object with the `proxy` and `revoke` function to disable it.
+
+Here's an example:
+
+```js run
+let object = {
+ data: "Valuable data"
+};
+
+let {proxy, revoke} = Proxy.revocable(object, {});
+
+// pass the proxy somewhere instead of object...
+alert(proxy.data); // Valuable data
+
+// later in our code
+revoke();
+
+// the proxy isn't working any more (revoked)
+alert(proxy.data); // Error
+```
+
+A call to `revoke()` removes all internal references to the target object from the proxy, so they are no more connected. The target object can be garbage-collected after that.
+
+We can also store `revoke` in a `WeakMap`, to be able to easily find it by the proxy:
+
+
+```js run
+*!*
+let revokes = new WeakMap();
+*/!*
+
+let object = {
+ data: "Valuable data"
+};
+
+let {proxy, revoke} = Proxy.revocable(object, {});
+
+revokes.set(proxy, revoke);
+
+// ..later in our code..
+revoke = revokes.get(proxy);
+revoke();
+
+alert(proxy.data); // Error (revoked)
+```
+
+The benefit of such approach is that we don't have to carry `revoke` around. We can get it from the map by `proxy` when needeed.
+
+Using `WeakMap` instead of `Map` here, because it should not block garbage collection. If a proxy object becomes "unreachable" (e.g. no variable references it any more), `WeakMap` allows it to be wiped from memory (we don't need its revoke in that case).
+
+## References
+
+- Specification: [Proxy](https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots).
+- MDN: [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy).
+
+## Summary
+
+`Proxy` is a wrapper around an object, that forwards operations to the object, optionally trapping some of them.
+
+It can wrap any kind of object, including classes and functions.
+
+The syntax is:
+
+```js
+let proxy = new Proxy(target, {
+ /* traps */
+});
+```
+
+...Then we should use `proxy` everywhere instead of `target`. A proxy doesn't have its own properties or methods. It traps an operation if the trap is provided or forwards it to `target` object.
+
+We can trap:
+- Reading (`get`), writing (`set`), deleting (`deleteProperty`) a property (even a non-existing one).
+- Calling functions with `new` (`construct` trap) and without `new` (`apply` trap)
+- Many other operations (the full list is at the beginning of the article and in the [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)).
+
+That allows us to create "virtual" properties and methods, implement default values, observable objects, function decorators and so much more.
+
+We can also wrap an object multiple times in different proxies, decorating it with various aspects of functionality.
+
+The [Reflect](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect) API is designed to complement [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). For any `Proxy` trap, there's a `Reflect` call with same arguments. We should use those to forward calls to target objects.
+
+Proxies have some limitations:
+
+- Built-in objects have "internal slots", access to those can't be proxied. See the workaround above.
+- The same holds true for private class fields, as they are internally implemented using slots. So proxied method calls must have the target object as `this` to access them.
+- Object equality tests `===` can't be intercepted.
+- Performance: benchmarks depend on an engine, but generally accessing a property using a simplest proxy takes a few times longer. In practice that only matters for some "bottleneck" objects though.
diff --git a/10-misc/01-proxy/proxy-inherit.png b/10-misc/01-proxy/proxy-inherit.png
new file mode 100644
index 000000000..84110b6d6
Binary files /dev/null and b/10-misc/01-proxy/proxy-inherit.png differ
diff --git a/10-misc/01-proxy/proxy-inherit@2x.png b/10-misc/01-proxy/proxy-inherit@2x.png
new file mode 100644
index 000000000..bfb71b6a0
Binary files /dev/null and b/10-misc/01-proxy/proxy-inherit@2x.png differ
diff --git a/10-misc/01-proxy/proxy.png b/10-misc/01-proxy/proxy.png
new file mode 100644
index 000000000..97aa07390
Binary files /dev/null and b/10-misc/01-proxy/proxy.png differ
diff --git a/10-misc/01-proxy/proxy@2x.png b/10-misc/01-proxy/proxy@2x.png
new file mode 100644
index 000000000..53b4610c8
Binary files /dev/null and b/10-misc/01-proxy/proxy@2x.png differ
diff --git a/10-misc/02-eval/1-eval-calculator/solution.md b/10-misc/02-eval/1-eval-calculator/solution.md
new file mode 100644
index 000000000..24d40c9b8
--- /dev/null
+++ b/10-misc/02-eval/1-eval-calculator/solution.md
@@ -0,0 +1,11 @@
+Let's use `eval` to calculate the maths expression:
+
+```js demo run
+let expr = prompt("Type an arithmetic expression?", '2*3+2');
+
+alert( eval(expr) );
+```
+
+The user can input any text or code though.
+
+To make things safe, and limit it to arithmetics only, we can check the `expr` using a [regular expression](info:regular-expressions), so that it only may contain digits and operators.
diff --git a/10-misc/02-eval/1-eval-calculator/task.md b/10-misc/02-eval/1-eval-calculator/task.md
new file mode 100644
index 000000000..3ebf7272f
--- /dev/null
+++ b/10-misc/02-eval/1-eval-calculator/task.md
@@ -0,0 +1,11 @@
+importance: 4
+
+---
+
+# Eval-calculator
+
+Create a calculator that prompts for an arithmetic expression and returns its result.
+
+There's no need to check the expression for correctness in this task.
+
+[demo]
diff --git a/10-misc/02-eval/article.md b/10-misc/02-eval/article.md
new file mode 100644
index 000000000..1f3b487a3
--- /dev/null
+++ b/10-misc/02-eval/article.md
@@ -0,0 +1,107 @@
+# Eval: run a code string
+
+The built-in `eval` function allows to execute a string of `code`.;
+
+The syntax is:
+
+```js
+let result = eval(code);
+```
+
+For example:
+
+```js run
+let code = 'alert("Hello")';
+eval(code); // Hello
+```
+
+A call to `eval` returns the result of the last statement.
+
+For example:
+```js run
+let value = eval('1+1');
+alert(value); // 2
+```
+
+The code is executed in the current lexical environment, so it can see outer variables:
+
+```js run no-beautify
+let a = 1;
+
+function f() {
+ let a = 2;
+
+*!*
+ eval('alert(a)'); // 2
+*/!*
+}
+
+f();
+```
+
+It can change outer variables as well:
+
+```js untrusted refresh run
+let x = 5;
+eval("x = 10");
+alert(x); // 10, value modified
+```
+
+In strict mode, `eval` has its own lexical environment. So functions and variables, declared inside eval, are not visible outside:
+
+```js untrusted refresh run
+// reminder: 'use strict' is enabled in runnable examples by default
+
+eval("let x = 5; function f() {}");
+
+alert(typeof x); // undefined (no such variable)
+// function f is also not visible
+```
+
+Without `use strict`, `eval` doesn't have its own lexical environment, so we would see `x` and `f` outside.
+
+## Using "eval"
+
+In modern programming `eval` is used very sparingly. It's often said that "eval is evil".
+
+The reason is simple: long, long time ago JavaScript was a much weaker language, many things could only be done with `eval`. But that time passed a decade ago.
+
+Right now, there's almost no reason to use `eval`. If someone is using it, there's a good chance they can replace it with a modern language construct or a [JavaScript Module](info:modules).
+
+Still, if you're sure you need to dynamically `eval` a string of code, please note that its ability to access outer variables has side-effects.
+
+Code minifiers (tools used before JS gets to production, to compress it) replace local variables with shorter ones for brewity. That's usually safe, but not if `eval` is used, as it may reference them. So minifiers don't replace all local variables that might be visible from `eval`. That negatively affects code compression ratio.
+
+Using outer local variables inside `eval` is a bad programming practice, as it makes maintaining the code more difficult.
+
+There are two ways how to evade any eval-related problems.
+
+**If eval'ed code doesn't use outer variables, please call `eval` as `window.eval(...)`:**
+
+This way the code is executed in the global scope:
+
+```js untrusted refresh run
+let x = 1;
+{
+ let x = 5;
+ window.eval('alert(x)'); // 1 (global variable)
+}
+```
+
+**If your code needs local variables, execute it with `new Function` and pass them as arguments:**
+
+```js run
+let f = new Function('a', 'alert(a)');
+
+f(5); // 5
+```
+
+The `new Function` construct is explained in the chapter . It creates a function from a string, also in the global scope. So it can't see local variables. But it's so much clearer to pass them explicitly as arguments, like in the example above.
+
+## Summary
+
+A call to `eval(code)` runs the string of code and returns the result of the last statement.
+- Rarely used in modern JavaScript, as there's usually no need.
+- Can access outer local variables. That's considered bad practice.
+- Instead, to `eval` the code in the global scope, use `window.eval(code)`.
+- Or, if your code needs some data from the outer scope, use `new Function` and pass it as arguments.
diff --git a/10-misc/12-mutation-observer/article.md b/10-misc/12-mutation-observer/article.md
new file mode 100644
index 000000000..552c2a890
--- /dev/null
+++ b/10-misc/12-mutation-observer/article.md
@@ -0,0 +1,250 @@
+
+# Mutation observer
+
+`MutationObserver` is a built-in object that observes a DOM element and fires a callback in case of changes.
+
+We'll first see syntax, and then explore a real-world use case.
+
+## Syntax
+
+`MutationObserver` is easy to use.
+
+First, we create an observer with a callback-function:
+
+```js
+let observer = new MutationObserver(callback);
+```
+
+And then attach it to a DOM node:
+
+```js
+observer.observe(node, config);
+```
+
+`config` is an object with boolean options "what kind of changes to react on":
+- `childList` -- changes in the direct children of `node`,
+- `subtree` -- in all descendants of `node`,
+- `attributes` -- attributes of `node`,
+- `attributeOldValue` -- record the old value of attribute (infers `attributes`),
+- `characterData` -- whether to observe `node.data` (text content),
+- `characterDataOldValue` -- record the old value of `node.data` (infers `characterData`),
+- `attributeFilter` -- an array of attribute names, to observe only selected ones.
+
+Then after any changes, the `callback` is executed, with a list of [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) objects as the first argument, and the observer itself as the second argument.
+
+[MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) objects have properties:
+
+- `type` -- mutation type, one of
+ - `"attributes"`: attribute modified
+ - `"characterData"`: data modified, used for text nodes,
+ - `"childList"`: child elements added/removed,
+- `target` -- where the change occurred: an element for "attributes", or text node for "characterData", or an element for a "childList" mutation,
+- `addedNodes/removedNodes` -- nodes that were added/removed,
+- `previousSibling/nextSibling` -- the previous and next sibling to added/removed nodes,
+- `attributeName/attributeNamespace` -- the name/namespace (for XML) of the changed attribute,
+- `oldValue` -- the previous value, only for attribute or text changes.
+
+
+For example, here's a `
` with `contentEditable` attribute. That attribute allows us to focus on it and edit.
+
+```html run
+,
+ // other properties empty
+}];
+```
+
+If we select and remove the `me` altogether, we'll get multiple mutations:
+
+```js
+mutationRecords = [{
+ type: "childList",
+ target: ,
+ removedNodes: [],
+ nextSibling: ,
+ previousSibling:
+ // other properties empty
+}, {
+ type: "characterData"
+ target:
+ // ...details depend on how the browser handles the change
+ // it may coalesce two adjacent text nodes "Edit " and ", please" into one node
+ // or it can just delete the extra space after "Edit".
+ // may be one mutation or a few
+}];
+```
+
+## Observer use case
+
+When `MutationObserver` is needed? Is there a scenario when such thing can be useful?
+
+We can track something like `contentEditable` and implement "undo/redo" functionality (record mutations and rollback/redo them on demand). There are also cases when `MutationObserver` is good from architectural standpoint.
+
+Let's say we're making a website about programming. Naturally, articles and other materials may contain source code snippets.
+
+An HTML markup of a code snippet looks like this:
+```html
+...
+` in the Elements tab.
- Press `key:Esc` -- it will open console right below the Elements tab.
diff --git a/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md
index e962eb662..266d26b1b 100644
--- a/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md
+++ b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md
@@ -1,4 +1,6 @@
-1. Yes, true. The element `elem.lastChild` is always the last one, it has no `nextSibling`, so if there are children, then yes.
-2. No, wrong, because `elem.children[0]` is the first child among elements. But there may be non-element nodes before it. So `previousSibling` may be a text node.
+1. Yes, true. The element `elem.lastChild` is always the last one, it has no `nextSibling`.
+2. No, wrong, because `elem.children[0]` is the first child *among elements*. But there may exist non-element nodes before it. So `previousSibling` may be a text node. Also, if there are no children, then trying to access `elem.children[0]`
-Please note that for both cases if there are no children, then there will be an error. For instance, if `elem.lastChild` is `null`, we can't access `elem.lastChild.nextSibling`.
+Please note: for both cases if there are no children, then there will be an error.
+
+If there are no children, `elem.lastChild` is `null`, so we can't access `elem.lastChild.nextSibling`. And the collection `elem.children` is empty (like an empty array `[]`).
diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md
index 976e595a2..be5a6531b 100644
--- a/2-ui/1-document/03-dom-navigation/article.md
+++ b/2-ui/1-document/03-dom-navigation/article.md
@@ -7,11 +7,11 @@ libs:
# Walking the DOM
-The DOM allows to do anything with elements and their contents, but first we need to reach the corresponding DOM object, get it into a variable, and then we are able to modify it.
+The DOM allows us to do anything with elements and their contents, but first we need to reach the corresponding DOM object.
All operations on the DOM start with the `document` object. From it we can access any node.
-Here's a picture of links that allow to travel between DOM nodes:
+Here's a picture of links that allow for travel between DOM nodes:
@@ -86,7 +86,7 @@ For instance, here `` has children `
Click and edit, please
+
+
+```
+
+If we change the text inside `me`, we'll get a single mutation:
+
+```js
+mutationRecords = [{
+ type: "characterData",
+ oldValue: "me",
+ target:
+ // here's the code
+ let hello = "world";
+` snippet looks like this (without line numbers by default):
+
+```js
+// here's the code
+let hello = "world";
+```
+
+Everything's simple so far, right? There are `` code snippets in HTML, we highlight them.
+
+Now let's go on. Let's say we're going to dynamically fetch materials from a server. We'll study methods for that [later in the tutorial](info:fetch-basics). For now it only matters that we fetch an HTML article from a webserver and display it on demand:
+
+```js
+let article = /* fetch new content from server */
+articleElem.innerHTML = article;
+```
+
+The new `article` HTML may contain code snippets. We need to call `Prism.highlightElem` on them, otherwise they won't get highlighted.
+
+**Where and when to call `Prism.highlightElem` for a dynamically loaded article?**
+
+We could append that call to the code that loads an article, like this:
+
+```js
+let article = /* fetch new content from server */
+articleElem.innerHTML = article;
+
+*!*
+let snippets = articleElem.querySelectorAll('pre[class*="language-"]');
+snippets.forEach(Prism.highlightElem);
+*/!*
+```
+
+...But imagine, we have many places in the code where we load contents: articles, quizzes, forum posts. Do we need to put the highlighting call everywhere? That's not very convenient, and also easy to forget.
+
+And what if the content is loaded by a third-party module? E.g. we have a forum written by someone else, that loads contents dynamically, and we'd like to add syntax highlighting to it. No one likes to patch third-party scripts.
+
+Luckily, there's another option.
+
+We can use `MutationObserver` to automatically detect code snippets inserted in the page and highlight them.
+
+So we'll handle the highlighting functionality in one place, relieving us from the need to integrate it.
+
+## Dynamic highlight demo
+
+Here's the working example.
+
+If you run this code, it starts observing the element below and highlighting any code snippets that appear there:
+
+```js run
+let observer = new MutationObserver(mutations => {
+
+ for(let mutation of mutations) {
+ // examine new nodes
+
+ for(let node of mutation.addedNodes) {
+ // we track only elements, skip other nodes (e.g. text nodes)
+ if (!(node instanceof HTMLElement)) continue;
+
+ // check the inserted element for being a code snippet
+ if (node.matches('pre[class*="language-"]')) {
+ Prism.highlightElement(node);
+ }
+
+ // maybe there's a code snippet somewhere in its subtree?
+ for(let elem of node.querySelectorAll('pre[class*="language-"]')) {
+ Prism.highlightElement(elem);
+ }
+ }
+ }
+
+});
+
+let demoElem = document.getElementById('highlight-demo');
+
+observer.observe(demoElem, {childList: true, subtree: true});
+```
+
+Demo element with id="highlight-demo", obverved by the example above.
+
+The code below populates `innerHTML`. Please run the code above first, it will watch and highlight the new content:
+
+```js run
+let demoElem = document.getElementById('highlight-demo');
+
+// dynamically insert content with code snippets
+demoElem.innerHTML = `A code snippet is below:
+ let hello = "world!";
+ Another one:
+
+ .class { margin: 5px; }
+
+`;
+```
+
+Now we have `MutationObserver` that can track all highlighting in observed elements or the whole `document`. We can add/remove code snippets in HTML without thinking about it.
+
+## Additional methods
+
+There's a method to stop observing the node:
+
+- `observer.disconnect()` -- stops the observation.
+
+Additionally:
+
+- `mutationRecords = observer.takeRecords()` -- gets a list of unprocessed mutation records, those that happened, but the callback did not handle them.
+
+```js
+// we're going to disconnect the observer
+// it might have not yet handled some mutations
+let mutationRecords = observer.takeRecords();
+// process mutationRecords
+
+// now all handled, disconnect
+observer.disconnect();
+```
+
+## Garbage collection
+
+Observers use weak references to nodes internally. That is: if a node is removed from DOM, and becomes unreachable, then it becomes garbage collected, an observer doesn't prevent that.
+
+## Summary
+
+`MutationObserver` can react on changes in DOM: attributes, added/removed elements, text content.
+
+We can use it to track changes introduced by other parts of our own or 3rd-party code.
+
+For example, to post-process dynamically inserted content, as demo `innerHTML`, like highlighting in the example above.
diff --git a/10-misc/index.md b/10-misc/index.md
new file mode 100644
index 000000000..65ab3188a
--- /dev/null
+++ b/10-misc/index.md
@@ -0,0 +1,4 @@
+
+# Miscellaneous
+
+Not yet categorized articles.
diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md
index 2266a2def..6ff17f9b8 100644
--- a/2-ui/1-document/01-browser-environment/article.md
+++ b/2-ui/1-document/01-browser-environment/article.md
@@ -4,7 +4,7 @@ The JavaScript language was initially created for web browsers. Since then, it h
A platform may be a browser, or a web-server, or a washing machine, or another *host*. Each of them provides platform-specific functionality. The JavaScript specification calls that a *host environment*.
-A host environment provides platform-specific objects and functions additional to the language core. Web browsers give a means to control web pages. Node.JS provides server-side features, and so on.
+A host environment provides platform-specific objects and functions additional to the language core. Web browsers give a means to control web pages. Node.js provides server-side features, and so on.
Here's a bird's-eye view of what we have when JavaScript runs in a web-browser:
diff --git a/2-ui/1-document/01-browser-environment/windowObjects.png b/2-ui/1-document/01-browser-environment/windowObjects.png
index 81803bd09..5408ecb15 100644
Binary files a/2-ui/1-document/01-browser-environment/windowObjects.png and b/2-ui/1-document/01-browser-environment/windowObjects.png differ
diff --git a/2-ui/1-document/01-browser-environment/windowObjects@2x.png b/2-ui/1-document/01-browser-environment/windowObjects@2x.png
index e6dae7c3d..d84b380d5 100644
Binary files a/2-ui/1-document/01-browser-environment/windowObjects@2x.png and b/2-ui/1-document/01-browser-environment/windowObjects@2x.png differ
diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md
index a701fb0ce..c496b16d1 100644
--- a/2-ui/1-document/02-dom-nodes/article.md
+++ b/2-ui/1-document/02-dom-nodes/article.md
@@ -106,7 +106,7 @@ drawHtmlTree(node3, 'div.domtree', 690, 150);
While generating the DOM, browsers automatically process errors in the document, close tags and so on.
-Such an "invalid" document:
+Such an document with unclosed tags:
```html no-beautify
Hello
@@ -176,7 +176,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500);
Here we see a new tree node type -- *comment node*, labeled as `#comment`.
-We may think -- why a comment is added to the DOM? It doesn't affect the visual representation in any way. But there's a rule -- if something's in HTML, then it also must be in the DOM tree.
+We may think -- why is a comment added to the DOM? It doesn't affect the visual representation in any way. But there's a rule -- if something's in HTML, then it also must be in the DOM tree.
**Everything in HTML, even comments, becomes a part of the DOM.**
@@ -225,7 +225,7 @@ The best way to study them is to click around. Most values are editable in-place
## Interaction with console
-As we explore the DOM, we also may want to apply JavaScript to it. Like: get a node and run some code to modify it, to see how it looks. Here are few tips to travel between the Elements tab and the console.
+As we explore the DOM, we also may want to apply JavaScript to it. Like: get a node and run some code to modify it, to see the result. Here are few tips to travel between the Elements tab and the console.
- Select the first `
` and `
- ` (and few blank text
```
-...And if we ask for all descendants of ``, then we get direct children `
- ` (being a child of `
- `) and `` (being a child of `
- `) -- the entire subtree.
+...And all descendants of `` are not only direct children ``, `
- ` but also more deeply nested elements, such as `
- ` (a child of `
- `) and `` (a child of `
- `) -- the entire subtree.
**The `childNodes` collection provides access to all child nodes, including text nodes.**
@@ -155,9 +155,9 @@ The first thing is nice. The second is tolerable, because we can use `Array.from
```warn header="DOM collections are read-only"
DOM collections, and even more -- *all* navigation properties listed in this chapter are read-only.
-We can't replace a child by something else assigning `childNodes[i] = ...`.
+We can't replace a child by something else by assigning `childNodes[i] = ...`.
-Changing DOM needs other methods, we'll see them in the next chapter.
+Changing DOM needs other methods. We will see them in the next chapter.
```
```warn header="DOM collections are live"
@@ -237,7 +237,12 @@ alert( document.documentElement.parentElement ); // null
In other words, the `documentElement` (``) is the root node. Formally, it has `document` as its parent. But `document` is not an element node, so `parentNode` returns it and `parentElement` does not.
-Sometimes that matters when we're walking over the chain of parents and call a method on each of them, but `document` doesn't have it, so we exclude it.
+This loop travels up from an arbitrary element `elem` to ``, but not to the `document`:
+```js
+while(elem = elem.parentElement) {
+ alert( elem ); // parent chain till
+}
+```
````
Let's modify one of the examples above: replace `childNodes` with `children`. Now it shows only elements:
@@ -309,7 +314,7 @@ An example of usage:
The specification: [tabular data](https://html.spec.whatwg.org/multipage/tables.html).
-There are also additional navigation properties for HTML forms. We'll look at them later when start working with forms.
+There are also additional navigation properties for HTML forms. We'll look at them later when we start working with forms.
# Summary
diff --git a/2-ui/1-document/03-dom-navigation/dom-links-elements.png b/2-ui/1-document/03-dom-navigation/dom-links-elements.png
index f7eef5d1f..c0e2f6941 100644
Binary files a/2-ui/1-document/03-dom-navigation/dom-links-elements.png and b/2-ui/1-document/03-dom-navigation/dom-links-elements.png differ
diff --git a/2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png b/2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png
index cf4e220cf..663471177 100644
Binary files a/2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png and b/2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png differ
diff --git a/2-ui/1-document/03-dom-navigation/dom-links.png b/2-ui/1-document/03-dom-navigation/dom-links.png
index 25b25b377..d6b5ddf96 100644
Binary files a/2-ui/1-document/03-dom-navigation/dom-links.png and b/2-ui/1-document/03-dom-navigation/dom-links.png differ
diff --git a/2-ui/1-document/03-dom-navigation/dom-links@2x.png b/2-ui/1-document/03-dom-navigation/dom-links@2x.png
index 84cd33d4e..827552f65 100644
Binary files a/2-ui/1-document/03-dom-navigation/dom-links@2x.png and b/2-ui/1-document/03-dom-navigation/dom-links@2x.png differ
diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md
index 3a7a9aeee..b5dbba50d 100644
--- a/2-ui/1-document/04-searching-elements-dom/article.md
+++ b/2-ui/1-document/04-searching-elements-dom/article.md
@@ -1,13 +1,14 @@
-# Searching: getElement* and querySelector*
+# Searching: getElement*, querySelector*
DOM navigation properties are great when elements are close to each other. What if they are not? How to get an arbitrary element of the page?
There are additional searching methods for that.
+
## document.getElementById or just id
If an element has the `id` attribute, then there's a global variable by the name from that `id`.
-We can use it to access the element, like this:
+We can use it to immediately access the element no matter where it is:
```html run
@@ -24,7 +25,9 @@ We can use it to access the element, like this: ``` -That's unless we declare the same-named variable by our own: +The behavior is described [in the specification](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem), but it is supported mainly for compatibility. The browser tries to help us by mixing namespaces of JS and DOM. Good for very simple scripts, but there may be name conflicts. Also, when we look in JS and don't have HTML in view, it's not obvious where the variable comes from. + +If we declare a variable with the same name, it takes precedence: ```html run untrusted height=0 @@ -32,12 +35,10 @@ That's unless we declare the same-named variable by our own: ``` -The behavior is described [in the specification](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem), but it is supported mainly for compatibility. The browser tries to help us by mixing namespaces of JS and DOM. Good for very simple scripts, but there may be name conflicts. Also, when we look in JS and don't have HTML in view, it's not obvious where the variable comes from. - The better alternative is to use a special method `document.getElementById(id)`. For instance: @@ -68,104 +69,9 @@ If there are multiple elements with the same `id`, then the behavior of correspo The method `getElementById` that can be called only on `document` object. It looks for the given `id` in the whole document. ``` -## getElementsBy* - -There are also other methods to look for nodes: - -- `elem.getElementsByTagName(tag)` looks for elements with the given tag and returns the collection of them. The `tag` parameter can also be a star `"*"` for "any tags". - -For instance: -```js -// get all divs in the document -let divs = document.getElementsByTagName('div'); -``` - -This method is callable in the context of any DOM element. - -Let's find all `input` tags inside the table: - -```html run height=50 -
-
- - -``` - -```warn header="Don't forget the `\"s\"` letter!" -Novice developers sometimes forget the letter `"s"`. That is, they try to call `getElementByTagName` instead of- -Your age: - -- - - - -getElementsByTagName. - -The `"s"` letter is absent in `getElementById`, because it returns a single element. But `getElementsByTagName` returns a collection of elements, so there's `"s"` inside. -``` - -````warn header="It returns a collection, not an element!" -Another widespread novice mistake is to write: - -```js -// doesn't work -document.getElementsByTagName('input').value = 5; -``` - -That won't work, because it takes a *collection* of inputs and assigns the value to it rather than to elements inside it. - -We should either iterate over the collection or get an element by its index, and then assign, like this: - -```js -// should work (if there's an input) -document.getElementsByTagName('input')[0].value = 5; -``` -```` - -There are also other rarely used methods of this kind: - -- `elem.getElementsByClassName(className)` returns elements that have the given CSS class. Elements may have other classes too. -- `document.getElementsByName(name)` returns elements with the given `name` attribute, document-wide. Exists for historical reasons, very rarely used, we mention it here only for completeness. - -For instance: - -```html run height=50 - - - -``` - ## querySelectorAll [#querySelectorAll] -Now goes the heavy artillery. - -The call to `elem.querySelectorAll(css)` returns all elements inside `elem` matching the given CSS selector. That's the most often used and powerful method. +By far, the most versatile method, `elem.querySelectorAll(css)` returns all elements inside `elem` matching the given CSS selector. Here we look for all `- ` elements that are last children: @@ -195,7 +101,6 @@ This method is indeed powerful, because any CSS selector can be used. Pseudo-classes in the CSS selector like `:hover` and `:active` are also supported. For instance, `document.querySelectorAll(':hover')` will return the collection with elements that the pointer is over now (in nesting order: from the outermost `` to the most nested one). ``` - ## querySelector [#querySelector] The call to `elem.querySelector(css)` returns the first element for the given CSS selector. @@ -230,9 +135,7 @@ For instance: ## closest -All elements that are directly above the given one are called its *ancestors*. - -In other words, ancestors are: parent, the parent of parent, its parent and so on. The ancestors together form the chain of parents from the element to the top. +*Ancestors* of an element are: parent, the parent of parent, its parent and so on. The ancestors together form the chain of parents from the element to the top. The method `elem.closest(css)` looks the nearest ancestor that matches the CSS-selector. The `elem` itself is also included in the search. @@ -260,14 +163,106 @@ For instance: ``` +## getElementsBy* + +There are also other methods to look for nodes by a tag, class, etc. + +Today, they are mostly history, as `querySelector` is more powerful and shorter to write. + +So here we cover them mainly for completeness, while you can still find them in the old scripts. + +- `elem.getElementsByTagName(tag)` looks for elements with the given tag and returns the collection of them. The `tag` parameter can also be a star `"*"` for "any tags". +- `elem.getElementsByClassName(className)` returns elements that have the given CSS class. +- `document.getElementsByName(name)` returns elements with the given `name` attribute, document-wide. very rarely used. + +For instance: +```js +// get all divs in the document +let divs = document.getElementsByTagName('div'); +``` + +Let's find all `input` tags inside the table: + +```html run height=50 +
+
+ + +``` + +```warn header="Don't forget the `\"s\"` letter!" +Novice developers sometimes forget the letter `"s"`. That is, they try to call `getElementByTagName` instead of+ +Your age: + ++ + + + +getElementsByTagName. + +The `"s"` letter is absent in `getElementById`, because it returns a single element. But `getElementsByTagName` returns a collection of elements, so there's `"s"` inside. +``` + +````warn header="It returns a collection, not an element!" +Another widespread novice mistake is to write: + +```js +// doesn't work +document.getElementsByTagName('input').value = 5; +``` + +That won't work, because it takes a *collection* of inputs and assigns the value to it rather than to elements inside it. + +We should either iterate over the collection or get an element by its index, and then assign, like this: + +```js +// should work (if there's an input) +document.getElementsByTagName('input')[0].value = 5; +``` +```` + +Looking for `.article` elements: + +```html run height=50 + + + +``` + ## Live collections All methods `"getElementsBy*"` return a *live* collection. Such collections always reflect the current state of the document and "auto-update" when it changes. In the example below, there are two scripts. -1. The first one creates a reference to the collection of ``. As of now, it's length is `1`. -2. The second scripts runs after the browser meets one more ``, so it's length is `2`. +1. The first one creates a reference to the collection of ``. As of now, its length is `1`. +2. The second scripts runs after the browser meets one more ``, so its length is `2`. ```html runFirst div@@ -310,8 +305,6 @@ If we use it instead, then both scripts output `1`: Now we can easily see the difference. The static collection did not increase after the appearance of a new `div` in the document. -Here we used separate scripts to illustrate how the element addition affects the collection, but any DOM manipulations affect them. Soon we'll see more of them. - ## Summary There are 6 main methods to search for nodes in DOM: @@ -327,6 +320,18 @@ There are 6 main methods to search for nodes in DOM:+ +querySelectorCSS-selector +✔ +- ++ +querySelectorAllCSS-selector +✔ +- +getElementByIdid- @@ -350,29 +355,15 @@ There are 6 main methods to search for nodes in DOM:✔ ✔ - -querySelectorCSS-selector -✔ -- -- -Please note that methods `getElementById` and `getElementsByName` can only be called in the context of the document: `document.getElementById(...)`. But not on an element: `elem.getElementById(...)` would cause an error. - -Other methods can be called on elements too. For instance `elem.querySelectorAll(...)` will search inside `elem` (in the DOM subtree). +By far the most used are `querySelector` and `querySelectorAll`, but `getElementBy*` can be sporadically helpful or found in the old scripts. Besides that: - There is `elem.matches(css)` to check if `elem` matches the given CSS selector. - There is `elem.closest(css)` to look for the nearest ancestor that matches the given CSS-selector. The `elem` itself is also checked. -And let's mention one more method here to check for the child-parent relationship: +And let's mention one more method here to check for the child-parent relationship, as it's sometimes useful: - `elemA.contains(elemB)` returns true if `elemB` is inside `elemA` (a descendant of `elemA`) or when `elemA==elemB`. diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md index 781b7a929..0088882c2 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md +++ b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md @@ -6,7 +6,9 @@ for (let li of document.querySelectorAll('li')) { } ``` -In the loop we need to get the text inside every `li`. We can read it directly from the first child node, that is the text node: +In the loop we need to get the text inside every `li`. + +We can read the text from the first child node of `li`, that is the text node: ```js for (let li of document.querySelectorAll('li')) { @@ -16,4 +18,4 @@ for (let li of document.querySelectorAll('li')) { } ``` -Then we can get the number of descendants `li.getElementsByTagName('li')`. +Then we can get the number of descendants as `li.getElementsByTagName('li').length`. diff --git a/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md index db7ebc9d8..185d2c130 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md +++ b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md @@ -27,7 +27,7 @@ Also, there's a reference to the constructor function inside the `prototype`: alert(HTMLDocument.prototype.constructor === HTMLDocument); // true ``` -For built-in classes in all prototypes there's a `constructor` reference, and we can get `constructor.name` to see the name of the class. Let's do it for all objects in the `document` prototype chain: +To get a name of the class as a string, we can use `constructor.name`. Let's do it for the whole `document` prototype chain, till class `Node`: ```js run alert(HTMLDocument.prototype.constructor.name); // HTMLDocument diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md index eca02163a..7fc36f854 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/article.md +++ b/2-ui/1-document/05-basic-dom-node-properties/article.md @@ -20,7 +20,7 @@ The classes are: - [EventTarget](https://dom.spec.whatwg.org/#eventtarget) -- is the root "abstract" class. Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called "events", we'll study them later. - [Node](http://dom.spec.whatwg.org/#interface-node) -- is also an "abstract" class, serving as a base for DOM nodes. It provides the core tree functionality: `parentNode`, `nextSibling`, `childNodes` and so on (they are getters). Objects of `Node` class are never created. But there are concrete node classes that inherit from it, namely: `Text` for text nodes, `Element` for element nodes and more exotic ones like `Comment` for comment nodes. -- [Element](http://dom.spec.whatwg.org/#interface-element) -- is a base class for DOM elements. It provides element-level navigation like `nextElementSibling`, `children` and searching methods like `getElementsByTagName`, `querySelector`. In the browser there may be not only HTML, but also XML and SVG documents. The `Element` class serves as a base for more specific classes: `SVGElement`, `XMLElement` and `HTMLElement`. +- [Element](http://dom.spec.whatwg.org/#interface-element) -- is a base class for DOM elements. It provides element-level navigation like `nextElementSibling`, `children` and searching methods like `getElementsByTagName`, `querySelector`. A browser supports not only HTML, but also XML and SVG. The `Element` class serves as a base for more specific classes: `SVGElement`, `XMLElement` and `HTMLElement`. - [HTMLElement](https://html.spec.whatwg.org/multipage/dom.html#htmlelement) -- is finally the basic class for all HTML elements. It is inherited by various HTML elements: - [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) -- the class for `` elements, - [HTMLBodyElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlbodyelement) -- the class for `` elements, @@ -76,7 +76,7 @@ Try it on `document.body`. ``` ````smart header="IDL in the spec" -In the specification, classes are described not using JavaScript, but a special [Interface description language](https://en.wikipedia.org/wiki/Interface_description_language) (IDL), that is usually easy to understand. +In the specification, DOM classes are described not using JavaScript, but a special [Interface description language](https://en.wikipedia.org/wiki/Interface_description_language) (IDL), that is usually easy to understand. In IDL all properties are prepended with their types. For instance, `DOMString`, `boolean` and so on. @@ -156,7 +156,7 @@ alert( document.body.nodeName ); // BODY alert( document.body.tagName ); // BODY ``` -Is there any difference between tagName and nodeName? +Is there any difference between `tagName` and `nodeName`? Sure, the difference is reflected in their names, but is indeed a bit subtle. @@ -175,11 +175,11 @@ For instance, let's compare `tagName` and `nodeName` for the `document` and a co @@ -232,14 +232,12 @@ We can try to insert invalid HTML, the browser will fix our errors: ``` ```smart header="Scripts don't execute" -If `innerHTML` inserts a ` ``` -That's an important difference. But even if a DOM property type is a string, it may differ from the attribute! +Most properties are strings though. -For instance, the `href` DOM property is always a *full* URL, even if the attribute contains a relative URL or just a `#hash`. +Quite rarely, even if a DOM property type is a string, it may differ from the attribute. For instance, the `href` DOM property is always a *full* URL, even if the attribute contains a relative URL or just a `#hash`. Here's an example: @@ -380,7 +380,7 @@ Methods to work with attributes are: - `elem.removeAttribute(name)` -- to remove the attribute. - `elem.attributes` is a collection of all attributes. -For most needs, DOM properties can serve us well. We should refer to attributes only when DOM properties do not suit us, when we need exactly attributes, for instance: +For most situations using DOM properties is preferable. We should refer to attributes only when DOM properties do not suit us, when we need exactly attributes, for instance: - We need a non-standard attribute. But if it starts with `data-`, then we should use `dataset`. - We want to read the value "as written" in HTML. The value of the DOM property may be different, for instance the `href` property is always a full URL, and we may want to get the "original" value. diff --git a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md index 93ae862fd..a38f01645 100644 --- a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md +++ b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md @@ -12,7 +12,7 @@ Here's an example: let text = 'text'; elem1.append(document.createTextNode(text)); - elem2.textContent = text; - elem3.innerHTML = text; + elem2.innerHTML = text; + elem3.textContent = text; ``` diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md index 70bc2ae9d..a1b53e337 100644 --- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md +++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md @@ -8,4 +8,4 @@ Create a colored clock like here: [iframe src="solution" height=60] -Use HTML/CSS for the styling, Javascript only updates time in elements. +Use HTML/CSS for the styling, JavaScript only updates time in elements. diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html index aec462fe8..06d9c01b1 100755 --- a/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html +++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html @@ -17,7 +17,7 @@ "oak": {} }, "Flowering": { - "redbud": {}, + "apple tree": {}, "magnolia": {} } } diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html index 9ba40a6d0..0f5f6b037 100644 --- a/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html +++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html @@ -17,7 +17,7 @@ "oak": {} }, "Flowering": { - "redbud": {}, + "apple tree": {}, "magnolia": {} } } @@ -29,11 +29,12 @@ function createTreeText(obj) { // standalone recursive function let li = ''; + let ul; for (let key in obj) { li += 'querySelectorAllCSS-selector -✔ -- -- ' + key + createTreeText(obj[key]) + '
'; } if (li) { - let ul = '- ' + li + '
- ' + li + '
- Flowering
@@ -51,7 +51,7 @@ "oak": {} }, "Flowering": { - "redbud": {}, + "apple tree": {}, "magnolia": {} } } diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md index 6b60c096f..5ec1a01bc 100644 --- a/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md +++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md @@ -21,7 +21,7 @@ let data = { "oak": {} }, "Flowering": { - "redbud": {}, + "apple tree": {}, "magnolia": {} } } diff --git a/2-ui/1-document/07-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md index 9c38b3344..39f002cf8 100644 --- a/2-ui/1-document/07-modifying-document/article.md +++ b/2-ui/1-document/07-modifying-document/article.md @@ -38,7 +38,7 @@ That was an HTML example. Now let's create the same `div` with JavaScript (assum To create DOM nodes, there are two methods: `document.createElement(tag)` -: Creates a new element with the given tag: +: Creates a new *element node* with the given tag: ```js let div = document.createElement('div'); @@ -67,7 +67,7 @@ After that, we have our DOM element ready. Right now it is just in a variable an To make the `div` show up, we need to insert it somewhere into `document`. For instance, in `document.body`. -There's a special method for that: `document.body.appendChild(div)`. +There's a special method `appendChild` for that: `document.body.appendChild(div)`. Here's the full code: @@ -136,7 +136,7 @@ Here's a brief list of methods to insert a node into a parent element (`parentEl ``` To insert `newLi` as the first element, we can do it like this: - + ```js list.insertBefore(newLi, list.firstChild); ``` @@ -146,9 +146,9 @@ Here's a brief list of methods to insert a node into a parent element (`parentEl All these methods return the inserted node. In other words, `parentElem.appendChild(node)` returns `node`. But usually the returned value is not used, we just run the method. -These methods are "old school": they exist from the ancient times and we can meet them in many old scripts. Unfortunately, there are some tasks that are hard to solve with them. +These methods are "old school": they exist from the ancient times and we can meet them in many old scripts. Unfortunately, they are not flexible enough. -For instance, how to insert *html* if we have it as a string? Or, given a node, how to insert another node *before* it? Of course, all that is doable, but not in an elegant way. +For instance, how to insert *html* if we have it as a string? Or, given a node, without reference to its parent, how to remove it? Of course, that's doable, but not in an elegant way. So there exist two other sets of insertion methods to handle all cases easily. @@ -162,6 +162,8 @@ This set of methods provides more flexible insertions: - `node.after(...nodes or strings)` –- insert nodes or strings after the `node`, - `node.replaceWith(...nodes or strings)` –- replaces `node` with the given nodes or strings. +All of them accept a list of DOM nodes and/or text strings. If a string is given it's inserted as a text node. + Here's an example of using these methods to add more items to a list and the text before/after it: ```html autorun @@ -236,14 +238,14 @@ But what if we want to insert HTML "as html", with all tags and stuff working, l There's another, pretty versatile method: `elem.insertAdjacentHTML(where, html)`. -The first parameter is a string, specifying where to insert. Must be one of the following: +The first parameter is a code word, specifying where to insert relative to `elem`. Must be one of the following: -- `"beforebegin"` -- insert `html` before `elem`, +- `"beforebegin"` -- insert `html` immediately before `elem`, - `"afterbegin"` -- insert `html` into `elem`, at the beginning, - `"beforeend"` -- insert `html` into `elem`, at the end, -- `"afterend"` -- insert `html` after `elem`. +- `"afterend"` -- insert `html` immediately after `elem`. -The second parameter is an HTML string, inserted "as is". +The second parameter is an HTML string, that is inserted "as HTML". For instance: @@ -335,13 +337,81 @@ An example of copying the message: ``` + +## DocumentFragment [#document-fragment] + +`DocumentFragment` is a special DOM node that serves as a wrapper to pass around lists of nodes. + +We can append other nodes to it, but when we insert it somewhere, then its content is inserted instead. + +For example, `getListContent` below generates a fragment with `-
-
- redbud +
- apple tree
- magnolia
- ` items, that are later inserted into `
- `:
+
+```html run
+
- 1 +
- 2 +
- 3 +
-
+
`, ` `, ` `, 2. or ``. -In most practical cases we can use `offsetParent` to get the nearest CSS-positioned ancestor. And `offsetLeft/offsetTop` provide x/y coordinates relative to it's upper-left corner. +In most practical cases we can use `offsetParent` to get the nearest CSS-positioned ancestor. And `offsetLeft/offsetTop` provide x/y coordinates relative to its upper-left corner. In the example below the inner `
` has `` as `offsetParent` and `offsetLeft/offsetTop` shifts from its upper-left corner (`180`): @@ -202,7 +202,7 @@ On the picture below we can see `scrollHeight` and `scrollTop` for a block with In other words, `scrollTop` is "how much is scrolled up". ````smart header="`scrollLeft/scrollTop` can be modified" -Most geometry properties that are read-only, but `scrollLeft/scrollTop` can be changed, and the browser will scroll the element. +Most of the geometry properties here are read-only, but `scrollLeft/scrollTop` can be changed, and the browser will scroll the element. ```online If you click the element below, the code `elem.scrollTop += 10` executes. That makes the element content scroll `10px` down. diff --git a/2-ui/1-document/09-size-and-scroll/metric-all.png b/2-ui/1-document/09-size-and-scroll/metric-all.png index a6335bcd8..6060b9890 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-all.png and b/2-ui/1-document/09-size-and-scroll/metric-all.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-all@2x.png b/2-ui/1-document/09-size-and-scroll/metric-all@2x.png index e084c257b..3c53be1dd 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-all@2x.png and b/2-ui/1-document/09-size-and-scroll/metric-all@2x.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.png b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.png index ffb10aa1b..efcc9440b 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.png and b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl@2x.png b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl@2x.png index 48510e6e0..9b7edcf57 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl@2x.png and b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl@2x.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top.png b/2-ui/1-document/09-size-and-scroll/metric-client-left-top.png index 33faf9be7..787557205 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-client-left-top.png and b/2-ui/1-document/09-size-and-scroll/metric-client-left-top.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top@2x.png b/2-ui/1-document/09-size-and-scroll/metric-client-left-top@2x.png index a8e170eab..8034c7aff 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-client-left-top@2x.png and b/2-ui/1-document/09-size-and-scroll/metric-client-left-top@2x.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-width-height.png b/2-ui/1-document/09-size-and-scroll/metric-client-width-height.png index d10edb5f6..d50d1186f 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-client-width-height.png and b/2-ui/1-document/09-size-and-scroll/metric-client-width-height.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-width-height@2x.png b/2-ui/1-document/09-size-and-scroll/metric-client-width-height@2x.png index f31f483e4..76017b9ee 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-client-width-height@2x.png and b/2-ui/1-document/09-size-and-scroll/metric-client-width-height@2x.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.png b/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.png index 8280e40f1..173bf1529 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.png and b/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding@2x.png b/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding@2x.png index 5a73f87a9..2d145d77f 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding@2x.png and b/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding@2x.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-css.png b/2-ui/1-document/09-size-and-scroll/metric-css.png index a28bbab78..5579b4abd 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-css.png and b/2-ui/1-document/09-size-and-scroll/metric-css.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-css@2x.png b/2-ui/1-document/09-size-and-scroll/metric-css@2x.png index e4fd7bb87..c4df7706b 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-css@2x.png and b/2-ui/1-document/09-size-and-scroll/metric-css@2x.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-parent.png b/2-ui/1-document/09-size-and-scroll/metric-offset-parent.png index a0fba50d2..059ef13ef 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-offset-parent.png and b/2-ui/1-document/09-size-and-scroll/metric-offset-parent.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-parent@2x.png b/2-ui/1-document/09-size-and-scroll/metric-offset-parent@2x.png index 125a91e15..0f86b4f85 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-offset-parent@2x.png and b/2-ui/1-document/09-size-and-scroll/metric-offset-parent@2x.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.png b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.png index f25957848..82551b8e1 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.png and b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-width-height@2x.png b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height@2x.png index 7bfb24c22..805687cd6 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-offset-width-height@2x.png and b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height@2x.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-top.png b/2-ui/1-document/09-size-and-scroll/metric-scroll-top.png index 13c57161f..83f410837 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-scroll-top.png and b/2-ui/1-document/09-size-and-scroll/metric-scroll-top.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-top@2x.png b/2-ui/1-document/09-size-and-scroll/metric-scroll-top@2x.png index bf0cf711a..1ef15502e 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-scroll-top@2x.png and b/2-ui/1-document/09-size-and-scroll/metric-scroll-top@2x.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.png b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.png index 197a5d764..54e6b9634 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.png and b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.png differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height@2x.png b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height@2x.png index 1e2a20f54..d57c5c198 100644 Binary files a/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height@2x.png and b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height@2x.png differ diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md index 4a62f56c6..b8c16a3c7 100644 --- a/2-ui/1-document/10-size-and-scroll-window/article.md +++ b/2-ui/1-document/10-size-and-scroll-window/article.md @@ -1,6 +1,6 @@ # Window sizes and scrolling -How to find out the width of the browser window? How to get the full height of the document, including the scrolled out part? How to scroll the page using JavaScript? +How to find out the width and height of the browser window? How to get the full width and height of the document, including the scrolled out part? How to scroll the page using JavaScript? From the DOM point of view, the root document element is `document.documentElement`. That element corresponds to `` and has geometry properties described in the [previous chapter](info:size-and-scroll). For some cases we can use it, but there are additional methods and peculiarities important enough to consider. @@ -44,7 +44,7 @@ Theoretically, as the root document element is `documentElement.clientWidth/Heig These properties work well for regular elements. But for the whole page these properties do not work as intended. In Chrome/Safari/Opera if there's no scroll, then `documentElement.scrollHeight` may be even less than `documentElement.clientHeight`! For regular elements that's a nonsense. -To have a reliable full window size, we should take the maximum of these properties: +To have a reliable result on the full document height, we should take the maximum of these properties: ```js run let scrollHeight = Math.max( @@ -96,7 +96,7 @@ It should work, but smells like cross-browser incompatibilities. Not good. Fortu ``` -- The method `scrollTo(pageX,pageY)` scrolls the page relative to the document top-left corner. It's like setting `scrollLeft/scrollTop`. +- The method `scrollTo(pageX,pageY)` scrolls the page relative to the document's top-left corner. It's like setting `scrollLeft/scrollTop`. To scroll to the very beginning, we can use `scrollTo(0,0)`. @@ -129,7 +129,7 @@ And this button scrolls the page to show it at the bottom: Sometimes we need to make the document "unscrollable". For instance, when we need to cover it with a large message requiring immediate attention, and we want the visitor to interact with that message, not with the document. -To make the document unscrollable, its enough to set `document.body.style.overflow = "hidden"`. The page will freeze on its current scroll. +To make the document unscrollable, it's enough to set `document.body.style.overflow = "hidden"`. The page will freeze on its current scroll. ```online Try it: @@ -145,7 +145,7 @@ We can use the same technique to "freeze" the scroll for other elements, not jus The drawback of the method is that the scrollbar disappears. If it occupied some space, then that space is now free, and the content "jumps" to fill it. -That looks a bit odd, but can be worked around if we compare `clientWidth` before and after the freeze, and if it increased (the scrollbar disappeared) then add `padding` to `document.body` in place of the scrollbar, to keep the content width same. +That looks a bit odd, but can be worked around if we compare `clientWidth` before and after the freeze, and if it increased (the scrollbar disappeared) then add `padding` to `document.body` in place of the scrollbar, to keep the content width the same. ## Summary diff --git a/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.png b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.png index 76a45a7a7..a3cf95f11 100644 Binary files a/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.png and b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.png differ diff --git a/2-ui/1-document/10-size-and-scroll-window/document-client-width-height@2x.png b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height@2x.png index 249db0edb..868dc8a26 100644 Binary files a/2-ui/1-document/10-size-and-scroll-window/document-client-width-height@2x.png and b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height@2x.png differ diff --git a/2-ui/1-document/11-coordinates/article.md b/2-ui/1-document/11-coordinates/article.md index ac5978f12..61b5161eb 100644 --- a/2-ui/1-document/11-coordinates/article.md +++ b/2-ui/1-document/11-coordinates/article.md @@ -48,7 +48,7 @@ Also: - Coordinates may be decimal fractions. That's normal, internally browser uses them for calculations. We don't have to round them when setting to `style.position.left/top`, the browser is fine with fractions. - Coordinates may be negative. For instance, if the page is scrolled down and the top `elem` is now above the window. Then, `elem.getBoundingClientRect().top` is negative. -- Some browsers (like Chrome) provide additional properties (`width` and `height`) to `getBoundingClientRect` as the result. We can also get them by subtraction: `height=bottom-top`, `width=right-left`. +- Some browsers (like Chrome) provide additional properties, `width` and `height` of the element that invoked the method to `getBoundingClientRect` as the result. We can also get them by subtraction: `height=bottom-top`, `width=right-left`. ```warn header="Coordinates right/bottom are different from CSS properties" If we compare window coordinates versus CSS positioning, then there are obvious similarities to `position:fixed`. The positioning of an element is also relative to the viewport. diff --git a/2-ui/1-document/11-coordinates/coords.png b/2-ui/1-document/11-coordinates/coords.png index da4869fb9..79d1fdbb6 100644 Binary files a/2-ui/1-document/11-coordinates/coords.png and b/2-ui/1-document/11-coordinates/coords.png differ diff --git a/2-ui/1-document/11-coordinates/coords@2x.png b/2-ui/1-document/11-coordinates/coords@2x.png index c3469f4cd..d3e340f50 100644 Binary files a/2-ui/1-document/11-coordinates/coords@2x.png and b/2-ui/1-document/11-coordinates/coords@2x.png differ diff --git a/2-ui/1-document/11-coordinates/document-window-coordinates-scroll.png b/2-ui/1-document/11-coordinates/document-window-coordinates-scroll.png index 9e4d9d5e9..29c59aad1 100644 Binary files a/2-ui/1-document/11-coordinates/document-window-coordinates-scroll.png and b/2-ui/1-document/11-coordinates/document-window-coordinates-scroll.png differ diff --git a/2-ui/1-document/11-coordinates/document-window-coordinates-scroll@2x.png b/2-ui/1-document/11-coordinates/document-window-coordinates-scroll@2x.png index 52e555c49..3c188ee45 100644 Binary files a/2-ui/1-document/11-coordinates/document-window-coordinates-scroll@2x.png and b/2-ui/1-document/11-coordinates/document-window-coordinates-scroll@2x.png differ diff --git a/2-ui/1-document/11-coordinates/document-window-coordinates-zero.png b/2-ui/1-document/11-coordinates/document-window-coordinates-zero.png index 3624196b0..3dc17f025 100644 Binary files a/2-ui/1-document/11-coordinates/document-window-coordinates-zero.png and b/2-ui/1-document/11-coordinates/document-window-coordinates-zero.png differ diff --git a/2-ui/1-document/11-coordinates/document-window-coordinates-zero@2x.png b/2-ui/1-document/11-coordinates/document-window-coordinates-zero@2x.png index 83f31950c..45f6b9e7f 100644 Binary files a/2-ui/1-document/11-coordinates/document-window-coordinates-zero@2x.png and b/2-ui/1-document/11-coordinates/document-window-coordinates-zero@2x.png differ diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md index ec2806696..cded5b622 100644 --- a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md @@ -1,4 +1,4 @@ -Can use `this` in the handler to reference "itself" here: +Can use `this` in the handler to reference "the element itself" here: ```html run height=50 diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.png b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.png index ca2f49edb..4a0549582 100644 Binary files a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.png and b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.png differ diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords@2x.png b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords@2x.png index b4c4d3ef2..ecf4e5d2f 100644 Binary files a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords@2x.png and b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords@2x.png differ diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md index 8312f0391..00de64008 100644 --- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md @@ -33,17 +33,17 @@ We have `event.clientX/clientY` -- window-relative coordinates of the click. To get field-relative `left` coordinate of the click, we can substract the field left edge and the border width: ```js -let left = event.clientX - fieldInnerCoords.left - field.clientLeft; +let left = event.clientX - fieldCoords.left - field.clientLeft; ``` -Normally, `ball.style.position.left` means the "left edge of the element" (the ball). So if we assign that `left`, then the ball edge would be under the mouse cursor. +Normally, `ball.style.position.left` means the "left edge of the element" (the ball). So if we assign that `left`, then the ball edge, not center, would be under the mouse cursor. We need to move the ball half-width left and half-height up to make it center. So the final `left` would be: ```js -let left = event.clientX - fieldInnerCoords.left - field.clientLeft - ball.offsetWidth/2; +let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2; ``` The vertical coordinate is calculated using the same logic. diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md index f4c105941..7554a2f09 100644 --- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md @@ -2,9 +2,9 @@ # HTML/CSS First let's create HTML/CSS. -A menu is a standalone graphical component on the page, so its better to put it into a single DOM element. +A menu is a standalone graphical component on the page, so it's better to put it into a single DOM element. -A list of menu items can be layed out as a list `ul/li`. +A list of menu items can be laid out as a list `ul/li`. Here's the example structure: @@ -29,7 +29,7 @@ Like this: So if we set `onclick` on it, then it will catch clicks to the right of the text. -...but `` has an implicit `display: inline`, so it occupies exactly enough place to fit all the text: +As `` has an implicit `display: inline`, it occupies exactly enough place to fit all the text: ```html autorun height=50 Sweeties (click me)! diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md index 05af13cca..34c313710 100644 --- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md +++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md @@ -2,7 +2,7 @@ importance: 5 --- -# Create a menu sliding menu +# Create a sliding menu Create a menu that opens/collapses on click: diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.png b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.png index b58ac0a66..93defb0bb 100644 Binary files a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.png and b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.png differ diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1@2x.png b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1@2x.png index fe6a0badd..7aa0d0f84 100644 Binary files a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1@2x.png and b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1@2x.png differ diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.png b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.png index 351ead9c4..a61bf5e57 100644 Binary files a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.png and b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.png differ diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2@2x.png b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2@2x.png index 05dbc1adf..4742579db 100644 Binary files a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2@2x.png and b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2@2x.png differ diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md index dcf64a200..ee69e9df2 100644 --- a/2-ui/2-events/01-introduction-browser-events/article.md +++ b/2-ui/2-events/01-introduction-browser-events/article.md @@ -18,7 +18,7 @@ Here's a list of the most useful DOM events, just to take a look at: **Keyboard events:** - `keydown` and `keyup` -- when the visitor presses and then releases the button. -**Document events** +**Document events:** - `DOMContentLoaded` -- when the HTML is loaded and processed, DOM is fully built. **CSS events:** @@ -160,9 +160,9 @@ button.onclick = sayThanks; button.onclick = sayThanks(); ``` -If we add brackets, then `sayThanks()` -- will be the *result* of the function execution, so `onclick` in the last code becomes `undefined` (the function returns nothing). That won't work. +If we add parentheses, `sayThanks()` -- is a function call. So the last line actually takes the *result* of the function execution, that is `undefined` (as the function returns nothing), and assigns it to `onclick`. That doesn't work. -...But in the markup we do need the brackets: +...But in the markup we do need the parentheses: ```html @@ -216,7 +216,7 @@ Web-standard developers understood that long ago and suggested an alternative wa The syntax to add a handler: ```js -element.addEventListener(event, handler[, phase]); +element.addEventListener(event, handler[, options]); ``` `event` @@ -225,15 +225,17 @@ element.addEventListener(event, handler[, phase]); `handler` : The handler function. -`phase` -: An optional argument, the "phase" for the handler to work. To be covered later. Usually we don't use it. +`options` +: An additional optional object with properties: + - `once`: if `true`, then the listener is automatically removed after it triggers. + - `capture`: the phase where to handle the event, to be covered later in the chapter ` the event first goes through the ancestors chain Handlers added using `on `-property or using HTML attributes or using `addEventListener(event, handler)` don't know anything about capturing, they only run on the 2nd and 3rd phases. -To catch an event on the capturing phase, we need to set the 3rd argument of `addEventListener` to `true`. +To catch an event on the capturing phase, we need to set the handler `capture` option to `true`: -There are two possible values for that optional last argument: +```js +elem.addEventListener(..., {capture: true}) +// or, just "true" is an alias to {capture: true} +elem.addEventListener(..., true) +``` + +There are two possible values of the `capture` option: - If it's `false` (default), then the handler is set on the bubbling phase. - If it's `true`, then the handler is set on the capturing phase. Note that while formally there are 3 phases, the 2nd phase ("target phase": the event reached the element) is not handled separately: handlers on both capturing and bubbling phases trigger at that phase. -If one puts capturing and bubbling handlers on the target element, the capture handler triggers last in the capturing phase and the bubble handler triggers first in the bubbling phase. - -Let's see it in action: +Let's see both capturing and bubbling in action: ```html run autorun height=140 edit + + +``` + +Once again, `pseudo` is a non-standard attribute. Chronologically, browsers first started to experiment with internal DOM structures to implement controls, and then, after time, shadow DOM was standardized to allow us, developers, to do the similar thing. + +Further on, we'll use the modern shadow DOM standard, covered by [DOM spec](https://dom.spec.whatwg.org/#shadow-trees) other related specifications. + +## Shadow tree + +A DOM element can have two types of DOM subtrees: + +1. Light tree -- a regular DOM subtree, made of HTML children. All subtrees that we've seen in previous chapters were "light". +2. Shadow tree -- a hidden DOM subtree, not reflected in HTML, hidden from prying eyes. + +If an element has both, then the browser renders only the shadow tree. But we can setup a kind of composition between shadow and light trees as well. We'll see the details later in the chapter ` element hides its internal DOM in shadow tree: + +```html run autorun height=60 + + + +``` + +That's how the resulting DOM looks in Chrome dev tools, all the content is under "#shadow-root": + + + +First, the call to `elem.attachShadow({mode: …})` creates a shadow tree. + +There are two limitations: +1. We can create only one shadow root per element. +2. The `elem` must be either a custom element, or one of: "article", "aside", "blockquote", "body", "div", "footer", "h1..h6", "header", "main" "nav", "p", "section", or "span". Other elements, like ` `, can't host shadow tree. + +The `mode` option sets the encapsulation level. It must have any of two values: +- `"open"` -- the shadow root is available as `elem.shadowRoot`. + + Any code is able to access the shadow tree of `elem`. +- `"closed"` -- `elem.shadowRoot` is always `null`. + + We can only access the shadow DOM by the reference returned by `attachShadow` (and probably hidden inside a class). Browser-native shadow trees, such as ``, are closed. There's no way to access them. + +The [shadow root](https://dom.spec.whatwg.org/#shadowroot), returned by `attachShadow`, is like an element: we can use `innerHTML` or DOM methods, such as `append`, to populate it. + +The element with a shadow root is called a "shadow tree host", and is available as the shadow root `host` property: + +```js +// assuming {mode: "open"}, otherwise elem.shadowRoot is null +alert(elem.shadowRoot.host === elem); // true +``` + +## Encapsulation + +Shadow DOM is strongly delimited from the main document: + +1. Shadow DOM elements are not visible to `querySelector` from the light DOM. In particular, Shadow DOM elements may have ids that conflict with those in the light DOM. They must be unique only within the shadow tree. +2. Shadow DOM has own stylesheets. Style rules from the outer DOM don't get applied. + +For example: + +```html run untrusted height=40 + + + + + +``` + +1. The style from the document does not affect the shadow tree. +2. ...But the style from the inside works. +3. To get elements in shadow tree, we must query from inside the tree. + +## References + +- DOM:
`: +```html + + + + +``` + +Usually, if we try to put `Contents +` inside, say, a ` - ` elements that are last children: @@ -195,7 +101,6 @@ This method is indeed powerful, because any CSS selector can be used. Pseudo-classes in the CSS selector like `:hover` and `:active` are also supported. For instance, `document.querySelectorAll(':hover')` will return the collection with elements that the pointer is over now (in nesting order: from the outermost `` to the most nested one). ``` - ## querySelector [#querySelector] The call to `elem.querySelector(css)` returns the first element for the given CSS selector. @@ -230,9 +135,7 @@ For instance: ## closest -All elements that are directly above the given one are called its *ancestors*. - -In other words, ancestors are: parent, the parent of parent, its parent and so on. The ancestors together form the chain of parents from the element to the top. +*Ancestors* of an element are: parent, the parent of parent, its parent and so on. The ancestors together form the chain of parents from the element to the top. The method `elem.closest(css)` looks the nearest ancestor that matches the CSS-selector. The `elem` itself is also included in the search. @@ -260,14 +163,106 @@ For instance: ``` +## getElementsBy* + +There are also other methods to look for nodes by a tag, class, etc. + +Today, they are mostly history, as `querySelector` is more powerful and shorter to write. + +So here we cover them mainly for completeness, while you can still find them in the old scripts. + +- `elem.getElementsByTagName(tag)` looks for elements with the given tag and returns the collection of them. The `tag` parameter can also be a star `"*"` for "any tags". +- `elem.getElementsByClassName(className)` returns elements that have the given CSS class. +- `document.getElementsByName(name)` returns elements with the given `name` attribute, document-wide. very rarely used. + +For instance: +```js +// get all divs in the document +let divs = document.getElementsByTagName('div'); +``` + +Let's find all `input` tags inside the table: + +```html run height=50 +
- `) -- the entire subtree.
**The `childNodes` collection provides access to all child nodes, including text nodes.**
@@ -155,9 +155,9 @@ The first thing is nice. The second is tolerable, because we can use `Array.from
```warn header="DOM collections are read-only"
DOM collections, and even more -- *all* navigation properties listed in this chapter are read-only.
-We can't replace a child by something else assigning `childNodes[i] = ...`.
+We can't replace a child by something else by assigning `childNodes[i] = ...`.
-Changing DOM needs other methods, we'll see them in the next chapter.
+Changing DOM needs other methods. We will see them in the next chapter.
```
```warn header="DOM collections are live"
@@ -237,7 +237,12 @@ alert( document.documentElement.parentElement ); // null
In other words, the `documentElement` (``) is the root node. Formally, it has `document` as its parent. But `document` is not an element node, so `parentNode` returns it and `parentElement` does not.
-Sometimes that matters when we're walking over the chain of parents and call a method on each of them, but `document` doesn't have it, so we exclude it.
+This loop travels up from an arbitrary element `elem` to ``, but not to the `document`:
+```js
+while(elem = elem.parentElement) {
+ alert( elem ); // parent chain till
+}
+```
````
Let's modify one of the examples above: replace `childNodes` with `children`. Now it shows only elements:
@@ -309,7 +314,7 @@ An example of usage:
The specification: [tabular data](https://html.spec.whatwg.org/multipage/tables.html).
-There are also additional navigation properties for HTML forms. We'll look at them later when start working with forms.
+There are also additional navigation properties for HTML forms. We'll look at them later when we start working with forms.
# Summary
diff --git a/2-ui/1-document/03-dom-navigation/dom-links-elements.png b/2-ui/1-document/03-dom-navigation/dom-links-elements.png
index f7eef5d1f..c0e2f6941 100644
Binary files a/2-ui/1-document/03-dom-navigation/dom-links-elements.png and b/2-ui/1-document/03-dom-navigation/dom-links-elements.png differ
diff --git a/2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png b/2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png
index cf4e220cf..663471177 100644
Binary files a/2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png and b/2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png differ
diff --git a/2-ui/1-document/03-dom-navigation/dom-links.png b/2-ui/1-document/03-dom-navigation/dom-links.png
index 25b25b377..d6b5ddf96 100644
Binary files a/2-ui/1-document/03-dom-navigation/dom-links.png and b/2-ui/1-document/03-dom-navigation/dom-links.png differ
diff --git a/2-ui/1-document/03-dom-navigation/dom-links@2x.png b/2-ui/1-document/03-dom-navigation/dom-links@2x.png
index 84cd33d4e..827552f65 100644
Binary files a/2-ui/1-document/03-dom-navigation/dom-links@2x.png and b/2-ui/1-document/03-dom-navigation/dom-links@2x.png differ
diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md
index 3a7a9aeee..b5dbba50d 100644
--- a/2-ui/1-document/04-searching-elements-dom/article.md
+++ b/2-ui/1-document/04-searching-elements-dom/article.md
@@ -1,13 +1,14 @@
-# Searching: getElement* and querySelector*
+# Searching: getElement*, querySelector*
DOM navigation properties are great when elements are close to each other. What if they are not? How to get an arbitrary element of the page?
There are additional searching methods for that.
+
## document.getElementById or just id
If an element has the `id` attribute, then there's a global variable by the name from that `id`.
-We can use it to access the element, like this:
+We can use it to immediately access the element no matter where it is:
```html run
- ` (a child of `
- `) -- the entire subtree.
+...And all descendants of `` are not only direct children `
`, `
- ` and also more nested elements like `