253 or be less than -253. As bigints are used in few special areas, we devote them a special chapter ` shows increasing values of `i`.
## Summary
-<<<<<<< HEAD
-- 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".
-
-Some use cases of `setTimeout(...,0)`:
-- 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).
-=======
- Methods `setTimeout(func, delay, ...args)` and `setInterval(func, delay, ...args)` allow us to run the `func` once/regularly after `delay` milliseconds.
- To cancel the execution, we should call `clearTimeout/clearInterval` with the value returned by `setTimeout/setInterval`.
- Nested `setTimeout` calls are a more flexible alternative to `setInterval`, allowing us to set the time *between* executions more precisely.
- Zero delay scheduling with `setTimeout(func, 0)` (the same as `setTimeout(func)`) is used to schedule the call "as soon as possible, but after the current script is complete".
- The browser limits the minimal delay for five or more nested call of `setTimeout` or for `setInterval` (after 5th call) to 4ms. That's for historical reasons.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
Please note that all scheduling methods do not *guarantee* the exact delay. We should not rely on that in the scheduled code.
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.svg b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.svg
index b2a0905ed..a559f6163 100644
--- a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.svg
+++ b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.svg
@@ -1,43 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
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 67275c5b6..43136dcb5 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
@@ -18,14 +18,8 @@ Let's check the real-life application to better understand that requirement and
**For instance, we want to track mouse movements.**
-<<<<<<< HEAD
-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).
-
-**The tracking function should update some information on the web-page.**
-=======
In a 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).
**We'd like to update some information on the web-page when the pointer moves.**
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
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.
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 74bb090ba..5438d4672 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
@@ -241,84 +241,7 @@ There are many solutions possible:
For many practical applications, the 3rd variant is good enough, so we'll stick to it.
-<<<<<<< HEAD
-The second task to solve is how to pass many arguments to `func`. Currently, the wrapper `function(x)` assumes a single argument, and `func.call(this, x)` passes it.
-
-Here we can use another built-in method [func.apply](mdn:js/Function/apply).
-
-The syntax is:
-
-```js
-func.apply(context, args)
-```
-
-It runs the `func` setting `this=context` and using an array-like object `args` as the list of arguments.
-
-
-For instance, these two calls are almost the same:
-
-```js
-func(1, 2, 3);
-func.apply(context, [1, 2, 3])
-```
-
-Both run `func` giving it arguments `1,2,3`. But `apply` also sets `this=context`.
-
-For instance, here `say` is called with `this=user` and `messageData` as a list of arguments:
-
-```js run
-function say(time, phrase) {
- alert(`[${time}] ${this.name}: ${phrase}`);
-}
-
-let user = { name: "John" };
-
-let messageData = ['10:00', 'Hello']; // become time and phrase
-
-*!*
-// user becomes this, messageData is passed as a list of arguments (time, phrase)
-say.apply(user, messageData); // [10:00] John: Hello (this=user)
-*/!*
-```
-
-The only syntax difference between `call` and `apply` is that `call` expects a list of arguments, while `apply` takes an array-like object with them.
-
-We already know the spread operator `...` from the chapter that can pass an array (or any iterable) as a list of arguments. So if we use it with `call`, we can achieve almost the same as `apply`.
-
-These two calls are almost equivalent:
-
-```js
-let args = [1, 2, 3];
-
-*!*
-func.call(context, ...args); // pass an array as list with spread operator
-func.apply(context, args); // is same as using apply
-*/!*
-```
-
-If we look more closely, there's a minor difference between such uses of `call` and `apply`.
-
-- The spread operator `...` allows to pass *iterable* `args` as the list to `call`.
-- The `apply` accepts only *array-like* `args`.
-
-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 it better than a pair `call + spread`.
-
-One of the most important uses of `apply` is passing the call to another function, like this:
-
-```js
-let wrapper = function() {
- return anotherFunction.apply(this, arguments);
-};
-```
-
-That's called *call forwarding*. The `wrapper` passes everything it gets: the context `this` and arguments to `anotherFunction` and returns back its result.
-
-When an external code calls such `wrapper`, it is indistinguishable from the call of the original function.
-=======
Also we need to pass not just `x`, but all arguments in `func.call`. Let's recall that in a `function()` we can get a pseudo-array of its arguments as `arguments`, so `func.call(this, x)` should be replaced with `func.call(this, ...arguments)`.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
Now let's bake it all into the more powerful `cachingDecorator`:
@@ -359,19 +282,13 @@ alert( worker.slow(3, 5) ); // works
alert( "Again " + worker.slow(3, 5) ); // same (cached)
```
-<<<<<<< HEAD
-Now the wrapper operates with any number of arguments.
-=======
Now it works with any number of arguments (though the hash function would also need to be adjusted to allow any number of arguments. An interesting way to handle this will be covered below).
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
There are two changes:
- In the line `(*)` it calls `hash` to create a single key from `arguments`. Here we use a simple "joining" function that turns arguments `(3, 5)` into the key `"3,5"`. More complex cases may require other hashing functions.
- Then `(**)` uses `func.apply` to pass both the context and all arguments the wrapper got (no matter how many) to the original function.
-<<<<<<< HEAD
-=======
## func.apply
Instead of `func.call(this, ...arguments)` we could use `func.apply(this, arguments)`.
@@ -413,7 +330,6 @@ let wrapper = function() {
```
When an external code calls such `wrapper`, it is indistinguishable from the call of the original function `func`.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
## Borrowing a method [#method-borrowing]
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg
index e5bc060ff..258fcfdfc 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg
@@ -1,68 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/10-bind/article.md b/1-js/06-advanced-functions/10-bind/article.md
index f0d2fc1c9..7bca80ae9 100644
--- a/1-js/06-advanced-functions/10-bind/article.md
+++ b/1-js/06-advanced-functions/10-bind/article.md
@@ -205,8 +205,6 @@ for (let key in user) {
JavaScript libraries also provide functions for convenient mass binding , e.g. [_.bindAll(object, methodNames)](http://lodash.com/docs#bindAll) in lodash.
````
-<<<<<<< HEAD
-=======
## Partial functions
Until now we have only been talking about binding `this`. Let's take it a step further.
@@ -319,7 +317,6 @@ So easy to do it with the spread syntax, right?
Also there's a ready [_.partial](https://lodash.com/docs#partial) implementation from lodash library.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
## Summary
Method `func.bind(context, ...args)` returns a "bound variant" of function `func` that fixes the context `this` and first arguments if given.
diff --git a/1-js/06-advanced-functions/12-arrow-functions/article.md b/1-js/06-advanced-functions/12-arrow-functions/article.md
index c55e5a6f9..c4e8d43fc 100644
--- a/1-js/06-advanced-functions/12-arrow-functions/article.md
+++ b/1-js/06-advanced-functions/12-arrow-functions/article.md
@@ -4,11 +4,7 @@ Vamos revisitar as *arrow functions*.
As *arrow functions* não são somente uma "abreviação" para escrevermos menos código.
-<<<<<<< HEAD
O *JavaScript* está cheio de situações onde precisamos escrever uma pequena função que será executada em um outro lugar.
-=======
-JavaScript is full of situations where we need to write a small function that's executed somewhere else.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
Por exemplo:
@@ -122,18 +118,8 @@ Aqui precisamos criar as variáveis adicionais `args` e `ctx` para que a funçã
*Arrow functions* (funções seta):
-<<<<<<< HEAD
-- Não possuem `this`.
- Não possuem `arguments`.
- Não podem ser chamadas com `new`.
- (Elas também não possuem `super`, mas ainda não a estudamos. Veremos no capítulo ).
Isso porque elas são feitas para pequenos trechos de código que não possuem seus próprios "contextos", mas sim utilizam o contexto em que estão inseridas. E elas realmente brilham nesses casos.
-=======
-- Do not have `this`
-- Do not have `arguments`
-- Can't be called with `new`
-- They also don't have `super`, but we didn't study it yet. We will on the chapter
-
-That's because they are meant for short pieces of code that do not have their own "context", but rather work in the current one. And they really shine in that use case.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
diff --git a/1-js/07-object-properties/01-property-descriptors/article.md b/1-js/07-object-properties/01-property-descriptors/article.md
index c9ab6e655..edf3e260f 100644
--- a/1-js/07-object-properties/01-property-descriptors/article.md
+++ b/1-js/07-object-properties/01-property-descriptors/article.md
@@ -122,28 +122,19 @@ user.name = "Pete"; // Error: Cannot assign to read only property 'name'...
Now no one can change the name of our user, unless they apply their own `defineProperty` to override ours.
-<<<<<<< HEAD
-Here's the same operation, but for the case when a property doesn't exist:
-=======
```smart header="Errors appear only in strict mode"
In the non-strict mode, no errors occur when writing to non-writable properties and such. But the operation still won't succeed. Flag-violating actions are just silently ignored in non-strict.
```
Here's the same example, but the property is created from scratch:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```js run
let user = { };
Object.defineProperty(user, "name", {
*!*
-<<<<<<< HEAD
- value: "Pete",
- // for new properties need to explicitly list what's true
-=======
value: "John",
// for new properties we need to explicitly list what's true
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
enumerable: true,
configurable: true
*/!*
@@ -273,12 +264,6 @@ delete user.name;
Object.defineProperty(user, "name", { value: "Pete" });
```
-<<<<<<< HEAD
-```smart header="Errors appear only in use strict"
-In the non-strict mode, no errors occur when writing to read-only properties and such. But the operation still won't succeed. Flag-violating actions are just silently ignored in non-strict.
-```
-=======
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
## Object.defineProperties
diff --git a/1-js/07-object-properties/02-property-accessors/article.md b/1-js/07-object-properties/02-property-accessors/article.md
index 66f0a2ddb..047023efe 100644
--- a/1-js/07-object-properties/02-property-accessors/article.md
+++ b/1-js/07-object-properties/02-property-accessors/article.md
@@ -3,11 +3,7 @@
There are two kinds of object properties.
-<<<<<<< HEAD
-The first kind is *data properties*. We already know how to work with them. Actually, all properties that we've been using till now were data properties.
-=======
The first kind is *data properties*. We already know how to work with them. All properties that we've been using until now were data properties.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
The second type of properties is something new. It's *accessor properties*. They are essentially functions that execute on getting and setting a value, but look like regular properties to an external code.
@@ -86,21 +82,7 @@ alert(user.name); // Alice
alert(user.surname); // Cooper
```
-<<<<<<< HEAD
-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"
-Once a property is defined with `get prop()` or `set prop()`, it's an accessor property, not a data properety any more.
-
-- If there's a getter -- we can read `object.prop`, othrewise we can't.
-- If there's a setter -- we can set `object.prop=...`, othrewise we can't.
-
-And in either case we can't `delete` an accessor property.
-```
-
-=======
As the result, we have a "virtual" property `fullName`. It is readable and writable.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
## Accessor descriptors
@@ -140,11 +122,7 @@ alert(user.fullName); // John Smith
for(let key in user) alert(key); // name, surname
```
-<<<<<<< HEAD
-Please note once again that a property can be either an accessor or a data property, not both.
-=======
Please note that a property can be either an accessor (has `get/set` methods) or a data property (has a `value`), not both.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
If we try to supply both `get` and `value` in the same descriptor, there will be an error:
@@ -193,15 +171,9 @@ Technically, the external code may still access the name directly by using `user
## Using for compatibility
-<<<<<<< HEAD
-One of the great ideas behind getters and setters -- they allow to take control over a "normal" data property and tweak it at any moment.
-
-For instance, we started implementing user objects using data properties `name` and `age`:
-=======
One of the great uses of accessors is that they allow to take control over a "regular" data property at any moment by replacing it with a getter and a setter and tweak its behavior.
Imagine we started implementing user objects using data properties `name` and `age`:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```js
function User(name, age) {
diff --git a/1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/task.md b/1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/task.md
index 790541d2f..bc2db47fe 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/task.md
+++ b/1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/task.md
@@ -6,11 +6,7 @@ importance: 5
The task has two parts.
-<<<<<<< HEAD
-We have an object:
-=======
Given the following objects:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```js
let head = {
diff --git a/1-js/08-prototypes/01-prototype-inheritance/article.md b/1-js/08-prototypes/01-prototype-inheritance/article.md
index 47db72eb2..9c8fbde99 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/article.md
+++ b/1-js/08-prototypes/01-prototype-inheritance/article.md
@@ -250,12 +250,6 @@ The resulting picture:
-<<<<<<< HEAD
-If we had other objects like `bird`, `snake` etc inheriting from `animal`, they would also gain access to methods of `animal`. But `this` in each method would be the corresponding object, evaluated at the call-time (before dot), not `animal`. So when we write data into `this`, it is stored into these objects.
-
-As a result, methods are shared, but the object state is not.
-
-=======
If we had other objects, like `bird`, `snake`, etc., inheriting from `animal`, they would also gain access to methods of `animal`. But `this` in each method call would be the corresponding object, evaluated at the call-time (before dot), not `animal`. So when we write data into `this`, it is stored into these objects.
As a result, methods are shared, but the object state is not.
@@ -328,18 +322,12 @@ Almost all other key/value-getting methods, such as `Object.keys`, `Object.value
They only operate on the object itself. Properties from the prototype are *not* taken into account.
```
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
## 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 (a historical getter/setter, there are other ways, to be covered soon).
- The object referenced by `[[Prototype]]` is called a "prototype".
-<<<<<<< HEAD
-- 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 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.
-=======
- 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 act directly on the object, they don't use the prototype (assuming it's a data property, not 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 its own and its inherited properties. All other key/value-getting methods only operate on the object itself.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
diff --git a/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.svg b/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.svg
index 3156903bb..da48a7ccd 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.svg
+++ b/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.svg
@@ -1,26 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.svg
index 9137cdf42..520bf87ed 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.svg
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.svg
@@ -1,44 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.svg
index 69908d360..8b6573574 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.svg
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.svg
@@ -1,33 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.svg
index 61e338ac3..6e3b6f555 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.svg
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.svg
@@ -1,34 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.svg
index 551a0061d..b83933a87 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.svg
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.svg
@@ -1,33 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.svg
index f0de57d74..538f5afb3 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.svg
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.svg
@@ -1,32 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.svg
index 4d1c2d789..ed9fea4a0 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.svg
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.svg
@@ -1,36 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/02-function-prototype/article.md b/1-js/08-prototypes/02-function-prototype/article.md
index 03b4fe165..b1ef51826 100644
--- a/1-js/08-prototypes/02-function-prototype/article.md
+++ b/1-js/08-prototypes/02-function-prototype/article.md
@@ -160,15 +160,9 @@ In this chapter we briefly described the way of setting a `[[Prototype]]` for ob
Everything is quite simple, just a few notes to make things clear:
-<<<<<<< HEAD
-- 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 `F.prototype` property (don't mistake it for `[[Prototype]]`) 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 set on a constructor function, and invoked with `new`.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
On regular objects the `prototype` is nothing special:
```js
diff --git a/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.svg b/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.svg
index e9dec01a9..187b899e4 100644
--- a/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.svg
+++ b/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.svg
@@ -1,30 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.svg b/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.svg
index 9b3bc68e1..a2c19d850 100644
--- a/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.svg
+++ b/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.svg
@@ -1,40 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.svg b/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.svg
index 61db35476..4d6b10e30 100644
--- a/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.svg
+++ b/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.svg
@@ -1,43 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.svg b/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.svg
index e9dec01a9..187b899e4 100644
--- a/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.svg
+++ b/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.svg
@@ -1,30 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.svg b/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.svg
index 5b820f0d9..8475560b3 100644
--- a/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.svg
+++ b/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.svg
@@ -1,43 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg b/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg
index 5511dcd25..36cc81cd9 100644
--- a/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg
+++ b/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg
@@ -1,91 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-1.svg b/1-js/08-prototypes/03-native-prototypes/object-prototype-1.svg
index ced45930a..c111e0725 100644
--- a/1-js/08-prototypes/03-native-prototypes/object-prototype-1.svg
+++ b/1-js/08-prototypes/03-native-prototypes/object-prototype-1.svg
@@ -1,42 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-null.svg b/1-js/08-prototypes/03-native-prototypes/object-prototype-null.svg
index c3047c2bd..8b802eb44 100644
--- a/1-js/08-prototypes/03-native-prototypes/object-prototype-null.svg
+++ b/1-js/08-prototypes/03-native-prototypes/object-prototype-null.svg
@@ -1,25 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype.svg b/1-js/08-prototypes/03-native-prototypes/object-prototype.svg
index c96a34451..b5014f9f0 100644
--- a/1-js/08-prototypes/03-native-prototypes/object-prototype.svg
+++ b/1-js/08-prototypes/03-native-prototypes/object-prototype.svg
@@ -1,34 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.svg b/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.svg
index 9b3bc68e1..a2c19d850 100644
--- a/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.svg
+++ b/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.svg
@@ -1,40 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.svg b/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.svg
index 61db35476..4d6b10e30 100644
--- a/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.svg
+++ b/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.svg
@@ -1,43 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/04-prototype-methods/article.md b/1-js/08-prototypes/04-prototype-methods/article.md
index 465df7b92..2a46367cc 100644
--- a/1-js/08-prototypes/04-prototype-methods/article.md
+++ b/1-js/08-prototypes/04-prototype-methods/article.md
@@ -69,27 +69,16 @@ Why?
That's for historical reasons.
-<<<<<<< HEAD
-- 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.
-=======
- The `"prototype"` property of a constructor function has worked since very ancient times.
- Later, in the year 2012, `Object.create` appeared in the standard. It gave the ability to create objects with a given prototype, but did not provide the ability to get/set it. So browsers implemented the non-standard `__proto__` accessor that allowed the user to get/set a prototype at any time.
- Later, in the year 2015, `Object.setPrototypeOf` and `Object.getPrototypeOf` were added to the standard, to perform the same functionality as `__proto__`. As `__proto__` was de-facto implemented everywhere, it was kind-of deprecated and made its way to the Annex B of the standard, that is: optional for non-browser environments.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
As of now we have all these ways at our disposal.
Why was `__proto__` replaced by the functions? That's an interesting question, requiring us to understand why `__proto__` is bad. Read on to get the answer.
-<<<<<<< HEAD
-```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.
-=======
```warn header="Don't change `[[Prototype]]` on existing objects if speed matters"
Technically, we can get/set `[[Prototype]]` at any time. But usually we only set it once at the object creation time and don't modify it anymore: `rabbit` inherits from `animal`, and that is not going to change.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
And JavaScript engines are highly optimized for this. Changing a prototype "on-the-fly" with `Object.setPrototypeOf` or `obj.__proto__=` is a very slow operation as it breaks internal optimizations for object property access operations. So avoid it unless you know what you're doing, or JavaScript speed totally doesn't matter for you.
```
@@ -117,19 +106,11 @@ That shouldn't surprise us. The `__proto__` property is special: it must be eith
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!
-<<<<<<< HEAD
-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.
-=======
Here the consequences are not terrible. But in other cases we may be assigning object values, and then the prototype may indeed be changed. As a result, the execution will go wrong in totally unexpected ways.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
What's worse -- 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.
-<<<<<<< HEAD
-Unexpected things also may happen when accessing `toString` property -- that's a function by default, and other built-in properties.
-=======
Unexpected things also may happen when assigning to `toString`, which is a function by default, and to other built-in methods.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
How can we avoid this problem?
@@ -197,11 +178,7 @@ Modern methods to set up and directly access the prototype are:
- [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).
-<<<<<<< HEAD
-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.
-=======
The built-in `__proto__` getter/setter is unsafe if we'd want to put user-generated keys into an object. Just because a user may enter `"__proto__"` as the key, and there'll be an error, with hopefully light, but generally unpredictable consequences.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
So we can either use `Object.create(null)` to create a "very plain" object without `__proto__`, or stick to `Map` objects for that.
@@ -211,10 +188,7 @@ Also, `Object.create` provides an easy way to shallow-copy an object with all de
let clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));
```
-<<<<<<< HEAD
-=======
We also made it clear that `__proto__` is a getter/setter for `[[Prototype]]` and resides in `Object.prototype`, just like other methods.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
- [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.
@@ -224,14 +198,10 @@ We also made it clear that `__proto__` is a getter/setter for `[[Prototype]]` an
We also made it clear that `__proto__` is a getter/setter for `[[Prototype]]` and resides in `Object.prototype`, just as other methods.
-<<<<<<< HEAD
-We can create an object without a prototype by `Object.create(null)`. Such objects are used as "pure dictionaries", they have no issues with `"__proto__"` as the key.
-=======
- [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 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): returns `true` if `obj` has its own (not inherited) key named `key`.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
All methods that return object properties (like `Object.keys` and others) -- return "own" properties. If we want inherited ones, we can use `for..in`.
diff --git a/1-js/08-prototypes/04-prototype-methods/object-prototype-2.svg b/1-js/08-prototypes/04-prototype-methods/object-prototype-2.svg
index e18af9042..c3717ad50 100644
--- a/1-js/08-prototypes/04-prototype-methods/object-prototype-2.svg
+++ b/1-js/08-prototypes/04-prototype-methods/object-prototype-2.svg
@@ -1,42 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/04-prototype-methods/object-prototype-null.svg b/1-js/08-prototypes/04-prototype-methods/object-prototype-null.svg
index c3047c2bd..8b802eb44 100644
--- a/1-js/08-prototypes/04-prototype-methods/object-prototype-null.svg
+++ b/1-js/08-prototypes/04-prototype-methods/object-prototype-null.svg
@@ -1,25 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/09-classes/01-class/article.md b/1-js/09-classes/01-class/article.md
index fa525cc7e..a934baf6c 100644
--- a/1-js/09-classes/01-class/article.md
+++ b/1-js/09-classes/01-class/article.md
@@ -91,13 +91,9 @@ What `class User {...}` construct really does is:
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.
-<<<<<<< HEAD
-We can illustrate the result of `class User` as:
-=======
After `new User` object is created, when we call its method, it's taken from the prototype, just as described in the chapter . So the object has access to class methods.
We can illustrate the result of `class User` declaration as:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
@@ -125,11 +121,7 @@ alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
## Not just a syntactic sugar
-<<<<<<< HEAD
-Sometimes people say that `class` is a "syntax sugar" in JavaScript, because we could actually declare the same without `class` keyword at all:
-=======
Sometimes people say that `class` is a "syntactic sugar" (syntax that is designed to make things easier to read, but doesn't introduce anything new), because we could actually declare the same without `class` keyword at all:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```js run
// rewriting class User in pure functions
@@ -157,11 +149,7 @@ Still, there are important differences.
1. First, a function created by `class` is labelled by a special internal property `[[FunctionKind]]:"classConstructor"`. So it's not entirely the same as creating it manually.
-<<<<<<< HEAD
- Unlike a regular function, a class constructor can't be called without `new`:
-=======
The language checks for that property in a variety of places. For example, unlike a regular function, it must be called with `new`:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```js run
class User {
@@ -246,11 +234,7 @@ new User().sayHi(); // Hello
## Getters/setters
-<<<<<<< HEAD
-Classes also include getters/setters, generators, computed properties etc.
-=======
Just like literal objects, classes may include getters/setters, computed properties etc.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
Here's an example for `user.name` implemented using `get/set`:
@@ -286,19 +270,11 @@ alert(user.name); // John
user = new User(""); // Name is too short.
```
-<<<<<<< HEAD
-Internally, getters and setters are created on `User.prototype`, like this:
-=======
Technically, such class declaration works by creating getters and setters in `User.prototype`.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
## Computed names [...]
-<<<<<<< HEAD
-Here's an example with computed properties:
-=======
Here's an example with a computed method name using brackets `[...]`:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```js run
function f() { return "sayHi"; }
@@ -329,13 +305,9 @@ For instance, let's add `name` property to `class User`:
```js run
class User {
-<<<<<<< HEAD
- name = "Anonymous";
-=======
*!*
name = "John";
*/!*
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
sayHi() {
alert(`Hello, ${this.name}!`);
@@ -401,10 +373,6 @@ setTimeout(button.click, 1000); // undefined
*/!*
```
-<<<<<<< HEAD
-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.
-
-=======
The problem is called "losing `this`".
There are two approaches to fixing it, as discussed in the chapter :
@@ -434,7 +402,6 @@ setTimeout(button.click, 1000); // hello
The class field `click = () => {...}` is created on a per-object basis, there's a separate function for each `Button` object, with `this` inside it referencing that object. We can pass `button.click` around anywhere, and the value of `this` will always be correct.
That's especially useful in browser environment, for event listeners.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
## Summary
@@ -476,10 +443,6 @@ class MyClass {
}
```
-<<<<<<< HEAD
-`MyClass` is technically a function, while methods are written to `MyClass.prototype`.
-=======
`MyClass` is technically a function (the one that we provide as `constructor`), while methods, getters and setters are written to `MyClass.prototype`.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
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.svg b/1-js/09-classes/01-class/class-user.svg
index 6ff15fc2f..95b58179b 100644
--- a/1-js/09-classes/01-class/class-user.svg
+++ b/1-js/09-classes/01-class/class-user.svg
@@ -1,33 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg b/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg
index ee3b1443a..3471904ab 100644
--- a/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg
+++ b/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg
@@ -1,68 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/09-classes/02-class-inheritance/article.md b/1-js/09-classes/02-class-inheritance/article.md
index 1c7264ccf..d9714717f 100644
--- a/1-js/09-classes/02-class-inheritance/article.md
+++ b/1-js/09-classes/02-class-inheritance/article.md
@@ -36,35 +36,11 @@ Here's how we can represent `animal` object and `Animal` class graphically:
As rabbits are animals, `Rabbit` class should be based on `Animal`, have access to animal methods, so that rabbits can do what "generic" animals can do.
-<<<<<<< HEAD
-To inherit from another class, we should specify `"extends"` and the parent class before the brackets `{..}`.
-=======
The syntax to extend another class is: `class Child extends Parent`.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
Let's create `class Rabbit` that inherits from `Animal`:
-<<<<<<< HEAD
-```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"
-=======
```js
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
*!*
class Rabbit extends Animal {
*/!*
@@ -90,11 +66,7 @@ For instance, to find `rabbit.run` method, the engine checks (bottom-up on the p
2. Its prototype, that is `Rabbit.prototype` (has `hide`, but not `run`).
3. Its prototype, that is (due to `extends`) `Animal.prototype`, that finally has the `run` method.
-<<<<<<< HEAD
-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.
-=======
As we can recall from the chapter , JavaScript itself uses prototypal inheritance for built-in objects. E.g. `Date.prototype.[[Prototype]]` is `Object.prototype`. That's why dates have access to generic object methods.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
````smart header="Any expression is allowed after `extends`"
Class syntax allows to specify not just a class, but any expression after `extends`.
@@ -134,12 +106,7 @@ class Rabbit extends Animal {
}
```
-<<<<<<< HEAD
-
-...But usually we don't want to totally replace a parent method, but rather to build on top of it, tweak or extend its functionality. We do something in our method, but call the parent method before/after it or in the process.
-=======
Usually we don't want to totally replace a parent method, but rather to build on top of it to tweak or extend its functionality. We do something in our method, but call the parent method before/after it or in the process.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
Classes provide `"super"` keyword for that.
@@ -275,21 +242,12 @@ In JavaScript, there's a distinction between a constructor function of an inheri
That label affects its behavior with `new`.
-<<<<<<< HEAD
-- When a normal constructor runs, it creates an empty object as `this` and continues with it.
-- But when a derived constructor runs, it doesn't do it. It expects the parent constructor to do this job.
-
-So if we're making a constructor of our own, then we must call `super`, because otherwise the object with `this` reference to it won't be created. And we'll get an error.
-
-For `Rabbit` to work, we need to call `super()` before using `this`, like here:
-=======
- When a regular function is executed with `new`, it creates an empty object and assigns it to `this`.
- But when a derived constructor runs, it doesn't do this. It expects the parent constructor to do this job.
So a derived constructor must call `super` in order to execute its parent (base) constructor, otherwise the object for `this` won't be created. And we'll get an error.
For the `Rabbit` constructor to work, it needs to call `super()` before using `this`, like here:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```js run
class Animal {
@@ -421,9 +379,6 @@ If it becomes a problem, one can fix it by using methods or getters/setters inst
## Super: internals, [[HomeObject]]
-<<<<<<< HEAD
-Let's get a little deeper under the hood of `super`. We'll see some interesting things by the way.
-=======
```warn header="Advanced information"
If you're reading the tutorial for the first time - this section may be skipped.
@@ -431,7 +386,6 @@ It's about the internal mechanisms behind inheritance and `super`.
```
Let's get a little deeper under the hood of `super`. We'll see some interesting things along the way.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
First to say, from all that we've learned till now, it's impossible for `super` to work.
@@ -577,9 +531,6 @@ longEar.eat(); // Long Ear eats.
Every method remembers its object in the internal `[[HomeObject]]` property. Then `super` uses it to resolve the parent prototype.
-<<<<<<< HEAD
-`[[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"
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`.
@@ -640,7 +591,6 @@ Here's the diagram of what happens:
`[[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()"`.
The difference may be non-essential for us, but it's important for JavaScript.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
In the example below a non-method syntax is used for comparison. `[[HomeObject]]` property is not set and the inheritance doesn't work:
@@ -662,8 +612,6 @@ let rabbit = {
rabbit.eat(); // Error calling super (because there's no [[HomeObject]])
*/!*
```
-<<<<<<< HEAD
-=======
## Summary
@@ -679,4 +627,3 @@ rabbit.eat(); // Error calling super (because there's no [[HomeObject]])
Also:
- Arrow functions don't have their own `this` or `super`, so they transparently fit into the surrounding context.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.svg b/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.svg
index 625b0dc3a..10af6c4c2 100644
--- a/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.svg
+++ b/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.svg
@@ -1,45 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.svg b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.svg
index b333c1bc5..a81676e25 100644
--- a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.svg
+++ b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.svg
@@ -1,66 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.svg b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.svg
index 468391daf..35529aa43 100644
--- a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.svg
+++ b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.svg
@@ -1,43 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.svg b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.svg
index efa4d7e9f..905efe37a 100644
--- a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.svg
+++ b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.svg
@@ -1,46 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.svg b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.svg
index 0f908892e..81bf1850b 100644
--- a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.svg
+++ b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.svg
@@ -1,45 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/09-classes/02-class-inheritance/this-super-loop.svg b/1-js/09-classes/02-class-inheritance/this-super-loop.svg
index 02b39c996..bc200fab3 100644
--- a/1-js/09-classes/02-class-inheritance/this-super-loop.svg
+++ b/1-js/09-classes/02-class-inheritance/this-super-loop.svg
@@ -1,76 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/09-classes/03-static-properties-methods/3-class-extend-object/rabbit-extends-object.svg b/1-js/09-classes/03-static-properties-methods/3-class-extend-object/rabbit-extends-object.svg
index 1356e158c..34d783b4d 100644
--- a/1-js/09-classes/03-static-properties-methods/3-class-extend-object/rabbit-extends-object.svg
+++ b/1-js/09-classes/03-static-properties-methods/3-class-extend-object/rabbit-extends-object.svg
@@ -1,71 +1 @@
-<<<<<<< HEAD:1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object.svg
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3:1-js/09-classes/03-static-properties-methods/3-class-extend-object/rabbit-extends-object.svg
+
\ No newline at end of file
diff --git a/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.svg b/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.svg
index 7d251d81e..18093d7cf 100644
--- a/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.svg
+++ b/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.svg
@@ -1,68 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/09-classes/03-static-properties-methods/article.md b/1-js/09-classes/03-static-properties-methods/article.md
index 494af4baf..0cf990720 100644
--- a/1-js/09-classes/03-static-properties-methods/article.md
+++ b/1-js/09-classes/03-static-properties-methods/article.md
@@ -19,13 +19,8 @@ User.staticMethod(); // true
That actually does the same as assigning it as a function property:
-<<<<<<< HEAD
-```js
-function User() { }
-=======
```js run
class User { }
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
User.staticMethod = function() {
alert(this === User);
@@ -130,15 +125,9 @@ That is the same as a direct assignment to `Article`:
Article.publisher = "Ilya Kantor";
```
-<<<<<<< HEAD
-## Statics and inheritance
-
-Statics are inherited, we can access `Parent.method` as `Child.method`.
-=======
## Inheritance of static properties and methods
Static properties and methods are inherited.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
For instance, `Animal.compare` and `Animal.planet` in the code below are inherited and accessible as `Rabbit.compare` and `Rabbit.planet`:
@@ -185,22 +174,14 @@ rabbits[0].run(); // Black Rabbit runs with speed 5.
alert(Rabbit.planet); // Earth
```
-<<<<<<< HEAD
-Now we can call `Rabbit.compare` assuming that the inherited `Animal.compare` will be called.
-=======
Now when we call `Rabbit.compare`, the inherited `Animal.compare` will be called.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
How does it work? Again, using prototypes. As you might have already guessed, extends also gives `Rabbit` the `[[Prototype]]` reference to `Animal`.
-<<<<<<< HEAD
-So, `Rabbit` function now inherits from `Animal` function. And `Animal` function normally has `[[Prototype]]` referencing `Function.prototype`, because it doesn't `extend` anything.
-=======
As a result, inheritance works both for regular and static methods.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
Here, let's check that:
@@ -211,16 +192,6 @@ class Rabbit extends Animal {}
// for static properties and methods
alert(Rabbit.__proto__ === Animal); // true
-<<<<<<< HEAD
-// and the next step is Function.prototype
-alert(Animal.__proto__ === Function.prototype); // true
-
-// that's in addition to the "normal" prototype chain for object methods
-alert(Rabbit.prototype.__proto__ === Animal.prototype);
-```
-
-This way `Rabbit` has access to all static methods of `Animal`.
-=======
// for regular methods
alert(Rabbit.prototype.__proto__ === Animal.prototype); // true
```
@@ -228,7 +199,6 @@ alert(Rabbit.prototype.__proto__ === Animal.prototype); // true
## Summary
Static methods are used for the functionality that belongs to the class "as a whole". It doesn't relate to a concrete class instance.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
## Summary
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
index 8a4fbf4d9..b2340f06c 100644
--- a/1-js/09-classes/04-private-protected-properties-methods/article.md
+++ b/1-js/09-classes/04-private-protected-properties-methods/article.md
@@ -262,11 +262,7 @@ Unlike protected ones, private fields are enforced by the language itself. That'
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
-<<<<<<< HEAD
-class CoffeeMachine extends CoffeeMachine() {
-=======
class MegaCoffeeMachine extends CoffeeMachine {
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
method() {
*!*
alert( this.#waterAmount ); // Error: can only access from CoffeeMachine
@@ -275,11 +271,7 @@ class MegaCoffeeMachine extends CoffeeMachine {
}
```
-<<<<<<< HEAD
-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.
-=======
In many scenarios such limitation is too severe. If we extend a `CoffeeMachine`, we may have legitimate reasons to access its internals. That's why protected fields are used more often, even though they are not supported by the language syntax.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
````warn
Private fields are special.
@@ -330,11 +322,7 @@ Hiding complexity
**It's always convenient when implementation details are hidden, and a simple, well-documented external interface is available.**
-<<<<<<< HEAD
-To hide internal interface we use either protected or public properties:
-=======
To hide an internal interface we use either protected or private properties:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
- 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 can only access those from inside the class.
diff --git a/1-js/09-classes/05-extend-natives/article.md b/1-js/09-classes/05-extend-natives/article.md
index fddc816bb..36c97b0cf 100644
--- a/1-js/09-classes/05-extend-natives/article.md
+++ b/1-js/09-classes/05-extend-natives/article.md
@@ -21,11 +21,7 @@ alert(filteredArr); // 10, 50
alert(filteredArr.isEmpty()); // false
```
-<<<<<<< HEAD
-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.
-=======
Please note a very interesting thing. Built-in methods like `filter`, `map` and others -- return new objects of exactly the inherited type `PowerArray`. Their internal implementation uses the object's `constructor` property for that.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
In the example above,
```js
@@ -37,11 +33,7 @@ That's actually very cool, because we can keep using `PowerArray` methods furthe
Even more, we can customize that behavior.
-<<<<<<< HEAD
-There's a special static getter `Symbol.species`, if exists, it returns the constructor to use in such cases.
-=======
We can add a special static getter `Symbol.species` to the class. If it exists, it should return the constructor that JavaScript will use internally to create new entities in `map`, `filter` and so on.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
If we'd like built-in methods like `map`, `filter` will return regular arrays, we can return `Array` in `Symbol.species`, like here:
@@ -79,17 +71,11 @@ Built-in objects have their own static methods, for instance `Object.keys`, `Arr
And we've already been talking about native classes extending each other: `Array.[[Prototype]] = Object`.
-<<<<<<< HEAD
-But statics are an exception. Built-in classes don't inherit static properties from each other.
-
-In other words, the prototype of built-in constructor `Array` does not point to `Object`. This way `Array` and `Date` do not have `Array.keys` or `Date.keys`. And that feels natural.
-=======
Normally, when one class extends another, both static and non-static methods are inherited. That was thoroughly explained in the article [](info:static-properties-methods#statics-and-inheritance).
But built-in classes are an exception. They don't inherit statics from each other.
For example, both `Array` and `Date` inherit from `Object`, so their instances have methods from `Object.prototype`. But `Array.[[Prototype]]` does not reference `Object`, so there's no, for instance, `Array.keys()` (or `Date.keys()`) static method.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
Here's the picture structure for `Date` and `Object`:
diff --git a/1-js/09-classes/05-extend-natives/object-date-inheritance.svg b/1-js/09-classes/05-extend-natives/object-date-inheritance.svg
index 99c8cf085..470aabf7f 100644
--- a/1-js/09-classes/05-extend-natives/object-date-inheritance.svg
+++ b/1-js/09-classes/05-extend-natives/object-date-inheritance.svg
@@ -1,75 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/09-classes/06-instanceof/article.md b/1-js/09-classes/06-instanceof/article.md
index 4621a6842..b9d652211 100644
--- a/1-js/09-classes/06-instanceof/article.md
+++ b/1-js/09-classes/06-instanceof/article.md
@@ -46,11 +46,7 @@ alert( arr instanceof Object ); // true
Please note that `arr` also belongs to the `Object` class. That's because `Array` prototypically inherits from `Object`.
-<<<<<<< HEAD
-The `instanceof` operator examines the prototype chain for the check, and is also fine-tunable using the static method `Symbol.hasInstance`.
-=======
Normally, `instanceof` examines the prototype chain for the check. We can also set a custom logic in the static method `Symbol.hasInstance`.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
The algorithm of `obj instanceof Class` works roughly as follows:
@@ -68,11 +64,7 @@ The algorithm of `obj instanceof Class` works roughly as follows:
alert(obj instanceof Animal); // true: Animal[Symbol.hasInstance](obj) is called
```
-<<<<<<< HEAD
-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 Class` checks whether `Class.prototype` is equal to one of the prototypes in the `obj` prototype chain.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
In other words, compare:
```js
@@ -106,11 +98,7 @@ By the way, there's also a method [objA.isPrototypeOf(objB)](mdn:js/object/isPro
It's funny, but the `Class` constructor itself does not participate in the check! Only the chain of prototypes and `Class.prototype` matters.
-<<<<<<< HEAD
-That can lead to interesting consequences when `prototype` is changed.
-=======
That can lead to interesting consequences when a `prototype` property is changed after the object is created.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
Like here:
@@ -194,13 +182,8 @@ alert( {}.toString.call(user) ); // [object User]
For most environment-specific objects, there is such a property. Here are some browser specific examples:
```js run
-<<<<<<< HEAD
-// toStringTag for the envinronment-specific object and class:
-alert( window[Symbol.toStringTag]); // window
-=======
// toStringTag for the environment-specific object and class:
alert( window[Symbol.toStringTag]); // Window
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
alert( XMLHttpRequest.prototype[Symbol.toStringTag] ); // XMLHttpRequest
alert( {}.toString.call(window) ); // [object Window]
diff --git a/1-js/09-classes/06-instanceof/instanceof.svg b/1-js/09-classes/06-instanceof/instanceof.svg
index 1b527ee2b..78bff9f12 100644
--- a/1-js/09-classes/06-instanceof/instanceof.svg
+++ b/1-js/09-classes/06-instanceof/instanceof.svg
@@ -1,55 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/09-classes/07-mixins/article.md b/1-js/09-classes/07-mixins/article.md
index 3d68ae2c9..bcb75c06a 100644
--- a/1-js/09-classes/07-mixins/article.md
+++ b/1-js/09-classes/07-mixins/article.md
@@ -2,11 +2,8 @@
In JavaScript we can only inherit from a single object. There can be only one `[[Prototype]]` for an object. And a class may extend only one other class.
-<<<<<<< HEAD
But sometimes that feels limiting. For instance, I have a class `StreetSweeper` and a class `Bicycle`, and want to make a `StreetSweepingBicycle`.
-=======
But sometimes that feels limiting. For instance, we have a class `StreetSweeper` and a class `Bicycle`, and want to make their mix: a `StreetSweepingBicycle`.
->>>>>>> 852ee189170d9022f67ab6d387aeae76810b5923
Or, talking about programming, we have a class `Renderer` that implements templating and a class `EventEmitter` that implements event handling, and want to merge these functionalities together with a class `Page`, to make a page that can use templates and emit events.
@@ -103,25 +100,14 @@ Please note that the call to the parent method `super.say()` from `sayHiMixin` l
-<<<<<<< HEAD
-That's because methods from `sayHiMixin` have `[[HomeObject]]` set to it. So `super` actually means `sayHiMixin.__proto__`, not `User.__proto__`.
-=======
That's because methods `sayHi` and `sayBye` were initially created in `sayHiMixin`. So even though they got copied, their `[[HomeObject]]` internal property references `sayHiMixin`, as shown in the picture above.
As `super` looks for parent methods in `[[HomeObject]].[[Prototype]]`, that means it searches `sayHiMixin.[[Prototype]]`, not `User.[[Prototype]]`.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
## EventMixin
Now let's make a mixin for real life.
-<<<<<<< HEAD
-The important feature of many objects is working with events.
-
-That is: an object should have a method to "generate an event" when something important happens to it, and other objects should be able to "listen" to such events.
-
-An event must have a name and, optionally, bundle some additional data.
-=======
An important feature of many browser objects (for instance) is that they can generate events. Events are a great way to "broadcast information" to anyone who wants it. So let's make a mixin that allows us to easily add event-related functions to any class/object.
- The mixin will provide a method `.trigger(name, [...data])` to "generate an event" when something important happens to it. The `name` argument is a name of the event, optionally followed by additional arguments with event data.
@@ -129,7 +115,6 @@ An important feature of many browser objects (for instance) is that they can gen
- ...And the method `.off(name, handler)` that removes the `handler` listener.
After adding the mixin, an object `user` will be able to generate an event `"login"` when the visitor logs in. And another object, say, `calendar` may want to listen for such events to load the calendar for the logged-in person.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
For instance, an object `user` can generate an event `"login"` when the visitor logs in. And another object `calendar` may want to receive such events to load the calendar for the logged-in person.
@@ -186,12 +171,9 @@ There are 3 methods here:
2. `.off(eventName, handler)` -- removes the function from the handlers list.
3. `.trigger(eventName, ...args)` -- generates the event: all assigned handlers are called and `args` are passed as arguments to them.
-<<<<<<< HEAD
-=======
- `.on(eventName, handler)` -- assigns function `handler` to run when the event with that name occurs. Technically, there's an `_eventHandlers` property that stores an array of handlers for each event name, and it just adds it to the list.
- `.off(eventName, handler)` -- removes the function from the handlers list.
- `.trigger(eventName, ...args)` -- generates the event: all handlers from `_eventHandlers[eventName]` are called, with a list of arguments `...args`.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
Usage:
@@ -216,11 +198,7 @@ menu.on("select", value => alert(`Value selected: ${value}`));
menu.choose("123"); // value selected
```
-<<<<<<< HEAD
-Now if we have the code interested to react on user selection, we can bind it with `menu.on(...)`.
-=======
Now, if we'd like any code to react to a menu selection, we can listen for it with `menu.on(...)`.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
And the `eventMixin` can add such behavior to as many classes as we'd like, without interfering with the inheritance chain.
@@ -228,16 +206,8 @@ And the `eventMixin` can add such behavior to as many classes as we'd like, with
*Mixin* -- is a generic object-oriented programming term: a class that contains methods for other classes.
-<<<<<<< HEAD
-Some other languages like e.g. python allow to create mixins using multiple inheritance. JavaScript does not support multiple inheritance, but mixins can be implemented by copying them into the prototype.
-=======
Some other languages allow multiple inheritance. JavaScript does not support multiple inheritance, but mixins can be implemented by copying methods into prototype.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
We can use mixins as a way to augment a class by adding multiple behaviors, like event-handling as we have seen above.
-<<<<<<< HEAD
-Mixins may become a point of conflict if they occasionally overwrite native class methods. So generally one should think well about the naming for a mixin, to minimize such possibility.
-=======
Mixins may become a point of conflict if they accidentally overwrite existing class methods. So generally one should think well about the naming methods of a mixin, to minimize the probability of that happening.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
diff --git a/1-js/09-classes/07-mixins/mixin-inheritance.svg b/1-js/09-classes/07-mixins/mixin-inheritance.svg
index 1cda5b8b9..aaa8cb7d0 100644
--- a/1-js/09-classes/07-mixins/mixin-inheritance.svg
+++ b/1-js/09-classes/07-mixins/mixin-inheritance.svg
@@ -1,58 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/10-error-handling/1-try-catch/article.md b/1-js/10-error-handling/1-try-catch/article.md
index 9bc47f9ef..9f200bab6 100644
--- a/1-js/10-error-handling/1-try-catch/article.md
+++ b/1-js/10-error-handling/1-try-catch/article.md
@@ -25,23 +25,14 @@ try {
It works like this:
1. First, the code in `try {...}` is executed.
-<<<<<<< HEAD
-2. If there were no errors, then `catch(err)` is ignored: the execution reaches the end of `try` and then jumps over `catch`.
-3. If an error occurs, then `try` execution is stopped, and the control flows to the beginning of `catch(err)`. The `err` variable (can use any name for it) contains an error object with details about what's happened.
-=======
2. If there were no errors, then `catch(err)` is ignored: the execution reaches the end of `try` and goes on, skipping `catch`.
3. If an error occurs, then the `try` execution is stopped, and control flows to the beginning of `catch(err)`. The `err` variable (we can use any name for it) will contain an error object with details about what happened.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
So, an error inside the `try {…}` block does not kill the script -- we have a chance to handle it in `catch`.
-<<<<<<< HEAD
-Let's see more examples.
-=======
Let's look at some examples.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
- An errorless example: shows `alert` `(1)` and `(2)`:
@@ -347,11 +338,7 @@ Now `catch` became a single place for all error handling: both for `JSON.parse`
## Rethrowing
-<<<<<<< HEAD
-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 this "incorrect data" thing.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
For example:
@@ -607,11 +594,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.
-<<<<<<< HEAD
-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 the special [window.onerror](mdn:api/GlobalEventHandlers/onerror) property, that will run in case of an uncaught error.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
The syntax:
diff --git a/1-js/10-error-handling/1-try-catch/try-catch-flow.svg b/1-js/10-error-handling/1-try-catch/try-catch-flow.svg
index c2aec14c6..ac816e356 100644
--- a/1-js/10-error-handling/1-try-catch/try-catch-flow.svg
+++ b/1-js/10-error-handling/1-try-catch/try-catch-flow.svg
@@ -1,62 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/10-error-handling/2-custom-errors/article.md b/1-js/10-error-handling/2-custom-errors/article.md
index 4762a7794..8c89e30ef 100644
--- a/1-js/10-error-handling/2-custom-errors/article.md
+++ b/1-js/10-error-handling/2-custom-errors/article.md
@@ -6,11 +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.
-<<<<<<< HEAD
-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.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
## Extending Error
@@ -29,13 +25,7 @@ Our function `readUser(json)` will not only read JSON, but check ("validate") th
Our `ValidationError` class should inherit from the built-in `Error` class.
-<<<<<<< HEAD
-That class is built-in, but we should have its approximate code before our eyes, to understand what we're extending.
-
-So here you are:
-=======
That class is built-in, but here's its approximate code so we can understand what we're extending:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```js
// The "pseudocode" for the built-in Error class defined by JavaScript itself
@@ -193,11 +183,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.
-<<<<<<< HEAD
-Please note that `this.name` in `PropertyRequiredError` constructor is again assigned manually. That may become a bit tedious -- 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. We can avoid it by making our own "basic error" class that assigns `this.name = this.constructor.name`. And then inherit all our custom errors from it.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
Let's call it `MyError`.
@@ -232,11 +218,7 @@ Now custom errors are much shorter, especially `ValidationError`, as we got rid
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.
-<<<<<<< HEAD
-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`?
-=======
The code which calls `readUser` should handle these errors. Right now it uses multiple `if`s in the `catch` block, that check the class and handle known errors and rethrow the unknown ones.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
The scheme is like this:
@@ -346,12 +328,6 @@ The approach is called "wrapping exceptions", because we take "low level" except
## Summary
-<<<<<<< HEAD
-- 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 inherit from `Error` and other built-in error classes normally. We just need to take care of the `name` property and don't forget to call `super`.
- We can use `instanceof` to check for particular errors. It also works with inheritance. But sometimes we have an error object coming from a 3rd-party library and there's no easy way to get its 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.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
diff --git a/1-js/11-async/01-callbacks/article.md b/1-js/11-async/01-callbacks/article.md
index 66fedf981..ce29c3152 100644
--- a/1-js/11-async/01-callbacks/article.md
+++ b/1-js/11-async/01-callbacks/article.md
@@ -39,11 +39,7 @@ loadScript('/my/script.js');
The script is executed "asynchronously", as it starts loading now, but runs later, when the function has already finished.
-<<<<<<< HEAD
-The call initiates the script loading, then the execution continues. While the script is loading, the code below may finish executing, and if the loading takes time, other scripts may run meanwhile too.
-=======
If there's any code below `loadScript(…)`, it doesn't wait until the script loading finishes.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```js
loadScript('/my/script.js');
@@ -51,11 +47,7 @@ loadScript('/my/script.js');
// ...
```
-<<<<<<< HEAD
-Now let's say we want to use the new script when it loads. It probably declares new functions, so we'd like to run them.
-=======
Let's say we need to use the new script as soon as it loads. It declares new functions, and we want to run them.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
But if we do that immediately after the `loadScript(…)` call, that wouldn't work:
diff --git a/1-js/11-async/01-callbacks/callback-hell.svg b/1-js/11-async/01-callbacks/callback-hell.svg
index b13d3cd7a..907f62c2a 100644
--- a/1-js/11-async/01-callbacks/callback-hell.svg
+++ b/1-js/11-async/01-callbacks/callback-hell.svg
@@ -1,354 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> 852ee189170d9022f67ab6d387aeae76810b5923
+
\ No newline at end of file
diff --git a/1-js/11-async/02-promise-basics/promise-reject-1.svg b/1-js/11-async/02-promise-basics/promise-reject-1.svg
index 5c5742334..809bc2430 100644
--- a/1-js/11-async/02-promise-basics/promise-reject-1.svg
+++ b/1-js/11-async/02-promise-basics/promise-reject-1.svg
@@ -1,31 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/11-async/02-promise-basics/promise-resolve-1.svg b/1-js/11-async/02-promise-basics/promise-resolve-1.svg
index 0f5825370..07a2a95f6 100644
--- a/1-js/11-async/02-promise-basics/promise-resolve-1.svg
+++ b/1-js/11-async/02-promise-basics/promise-resolve-1.svg
@@ -1,31 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/11-async/02-promise-basics/promise-resolve-reject.svg b/1-js/11-async/02-promise-basics/promise-resolve-reject.svg
index ef3d46761..428dfd845 100644
--- a/1-js/11-async/02-promise-basics/promise-resolve-reject.svg
+++ b/1-js/11-async/02-promise-basics/promise-resolve-reject.svg
@@ -1,40 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/11-async/03-promise-chaining/01-then-vs-catch/solution.md b/1-js/11-async/03-promise-chaining/01-then-vs-catch/solution.md
index bf1be9117..694165e69 100644
--- a/1-js/11-async/03-promise-chaining/01-then-vs-catch/solution.md
+++ b/1-js/11-async/03-promise-chaining/01-then-vs-catch/solution.md
@@ -1,8 +1,4 @@
-<<<<<<< HEAD
A resposta breve é: **não, eles não são iguais**:
-=======
-The short answer is: **no, they are not equal**:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
A diferença é que se um erro ocorrer em `f1` ele será tratado pelo `.catch` neste caso:
@@ -21,8 +17,4 @@ promise
Isso é devido ao erro ser propagado pela cadeia, e no segundo código não há cadeia após `f1`.
-<<<<<<< HEAD
-Em outras palavras, `.then` passa resultados/erros para o próximo `.then/catch`. Então, no primeiro exemplo, há um `catch` em seguida, e no segundo exemplo não há, então o erro não é tratado.
-=======
-In other words, `.then` passes results/errors to the next `.then/catch`. So in the first example, there's a `catch` below, and in the second one there isn't, so the error is unhandled.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+Por outras palavras, `.then` passa resultados/erros para o próximo `.then/catch`. Então, no primeiro exemplo, há um `catch` embaixo, e no segundo exemplo não há, então o erro não é tratado.
diff --git a/1-js/11-async/04-promise-error-handling/article.md b/1-js/11-async/04-promise-error-handling/article.md
index 376044761..9f7159af9 100644
--- a/1-js/11-async/04-promise-error-handling/article.md
+++ b/1-js/11-async/04-promise-error-handling/article.md
@@ -1,11 +1,9 @@
# 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 chains are great at error handling. When a promise rejects, the control jumps to the closest rejection handler. That's very convenient in practice.
-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 server) and `.catch` handles the error:
+For instance, in the code below the URL to `fetch` is wrong (no such site) and `.catch` handles the error:
```js run
*!*
@@ -15,17 +13,9 @@ fetch('https://no-such-server.blabla') // rejects
.catch(err => alert(err)) // TypeError: failed to fetch (the text may vary)
```
-Or, maybe, everything is all right with the server, but the response is not valid JSON:
+As you can see, the `.catch` doesn't have to be immediate. It may appear after one or maybe several `.then`.
-```js run
-fetch('/') // fetch works fine now, the server responds successfully
-*!*
- .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:
+Or, maybe, everything is all right with the site, but the response is not valid JSON. The easiest way to catch all errors is to append `.catch` to the end of chain:
```js run
fetch('/article/promise-chaining/user.json')
@@ -48,11 +38,11 @@ fetch('/article/promise-chaining/user.json')
*/!*
```
-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.
+Normally, such `.catch` doesn't trigger at all. 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 error happens, it gets caught and treated as a rejection.
+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:
@@ -74,9 +64,9 @@ new Promise((resolve, reject) => {
}).catch(alert); // Error: Whoops!
```
-The "invisible `try..catch`" around the executor automatically catches the error and treats it as a rejection.
+The "invisible `try..catch`" around the executor automatically catches the error and turns it into rejected promise.
-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.
+This happens not only in the executor function, 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:
@@ -106,7 +96,7 @@ The final `.catch` not only catches explicit rejections, but also accidental err
## 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.
+As we already noticed, `.catch` at the end of the chain is similar to `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 it can't be handled. The same thing is possible for promises.
@@ -120,7 +110,7 @@ new Promise((resolve, reject) => {
throw new Error("Whoops!");
-}).catch(function(error) {
+}).catch(function(error) {
alert("The error is handled, continue normally");
@@ -150,11 +140,7 @@ new Promise((resolve, reject) => {
}
}).then(function() {
-<<<<<<< HEAD
- /* never runs here */
-=======
/* doesn't run here */
->>>>>>> 852ee189170d9022f67ab6d387aeae76810b5923
}).catch(error => { // (**)
alert(`The unknown error has occurred: ${error}`);
@@ -163,128 +149,28 @@ new Promise((resolve, reject) => {
});
```
-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 it.
-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.
-
-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 `(*)`.
+The execution jumps from the first `.catch` `(*)` to the next one `(**)` down the chain.
## 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:
+What happens when an error is not handled? For instance, we forgot to append `.catch` to the end of the chain, like here:
```js untrusted run refresh
new Promise(function() {
noSuchFunction(); // Error here (no such function)
})
.then(() => {
- // zero or many promise handlers
+ // 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".
+In case of an error, the promise becomes rejected, and the execution should jump to the closest rejection handler. But there is none. So the error gets "stuck". There's no code to handle it.
-<<<<<<< HEAD
-<<<<<<< HEAD
-In practice, just like with a regular unhandled errors, it means that something has terribly gone wrong, the script probably died.
-=======
-In practice, just like with regular unhandled errors in code, it means that something has terribly gone wrong.
->>>>>>> 852ee189170d9022f67ab6d387aeae76810b5923
-
-Most JavaScript engines track such situations and generate a global error in that case. We can see it in the console.
-=======
In practice, just like with regular unhandled errors in code, it means that something has gone terribly wrong.
What happens when a regular error occurs and is not caught by `try..catch`? The script dies with a message in the console. A 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.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
In the browser we can catch such errors using the event `unhandledrejection`:
@@ -308,59 +194,11 @@ If an error occurs, and there's no `.catch`, the `unhandledrejection` handler tr
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.
-
+In non-browser environments like Node.js there are other ways to track unhandled errors.
## Summary
-<<<<<<< HEAD
-- `.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 normal not to use `.catch` if we don't know how to handle errors (all errors are unrecoverable).
-- 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, 0)); // (*)
- })
-*/!*
- .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.
-=======
- `.catch` handles errors in promises 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 (maybe they are programming mistakes).
- 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 them, so that our app never "just dies".
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
diff --git a/1-js/11-async/04-promise-error-handling/promise-then-chain.svg b/1-js/11-async/04-promise-error-handling/promise-then-chain.svg
index a0f1522ab..0a3ea6d37 100644
--- a/1-js/11-async/04-promise-error-handling/promise-then-chain.svg
+++ b/1-js/11-async/04-promise-error-handling/promise-then-chain.svg
@@ -1,42 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/11-async/04-promise-error-handling/promise-then-many.svg b/1-js/11-async/04-promise-error-handling/promise-then-many.svg
index 119a5a209..ce8dc1c0c 100644
--- a/1-js/11-async/04-promise-error-handling/promise-then-many.svg
+++ b/1-js/11-async/04-promise-error-handling/promise-then-many.svg
@@ -1,36 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/11-async/05-promise-api/article.md b/1-js/11-async/05-promise-api/article.md
index cd7423a79..7338c7af0 100644
--- a/1-js/11-async/05-promise-api/article.md
+++ b/1-js/11-async/05-promise-api/article.md
@@ -75,15 +75,9 @@ The syntax is:
let promise = Promise.all([...promises...]);
```
-<<<<<<< HEAD
-It takes an array of promises (technically can be any iterable, but usually an array) and returns a new promise.
-
-The new promise resolves when all listed promises are settled and has an array of their results.
-=======
`Promise.all` takes an array of promises (it technically can be any iterable, but is usually an array) and returns a new promise.
The new promise resolves when all listed promises are settled, and the array of their results becomes its result.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
For instance, the `Promise.all` below settles after 3 seconds, and then its result is an array `[1, 2, 3]`:
@@ -95,11 +89,7 @@ Promise.all([
]).then(alert); // 1,2,3 when promises are ready: each promise contributes an array member
```
-<<<<<<< HEAD
-Please note that the relative order is the same. Even though the first promise takes the longest time to resolve, it is still first in the array of results.
-=======
Please note that the order of the resulting array members is the same as in its source promises. Even though the first promise takes the longest time to resolve, it's still first in the array of results.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
A common trick is to map an array of job data into an array of promises, and then wrap that into `Promise.all`.
@@ -122,11 +112,7 @@ Promise.all(requests)
));
```
-<<<<<<< HEAD
-A more real-life example with fetching user information for an array of github users by their names (or we could fetch an array of goods by their ids, the logic is same):
-=======
A bigger example with fetching user information for an array of GitHub users by their names (we could fetch an array of goods by their ids, the logic is identical):
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```js run
let names = ['iliakan', 'remy', 'jeresig'];
@@ -166,11 +152,7 @@ Here the second promise rejects in two seconds. That leads to an immediate rejec
The important detail is that promises provide no way to "cancel" or "abort" their execution. So other promises continue to execute, and then eventually settle, but all their results are ignored.
-<<<<<<< HEAD
-There are ways to avoid this: we can either write additional code to `clearTimeout` (or otherwise cancel) the promises in case of an error, or we can make errors show up as members in the resulting array (see the task below this chapter about it).
-=======
For example, if there are multiple `fetch` calls, like in the example above, and one fails, the others will still continue to execute, but `Promise.all` won't watch them anymore. They will probably settle, but their results will be ignored.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
````smart header="`Promise.all(...)` allows non-promise items in `iterable`"
Normally, `Promise.all(...)` accepts an iterable (in most cases an array) of promises. But if any of those objects is not a promise, it's wrapped in `Promise.resolve`.
@@ -182,25 +164,13 @@ Promise.all([
new Promise((resolve, reject) => {
setTimeout(() => resolve(1), 1000)
}),
-<<<<<<< HEAD
- 2, // treated as Promise.resolve(2)
- 3 // treated as Promise.resolve(3)
-=======
2,
3
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
]).then(alert); // 1, 2, 3
```
So we are able to pass non-promise values to `Promise.all` where convenient.
-<<<<<<< HEAD
-````
-
-## Promise.race
-
-Similar to `Promise.all`, it takes an iterable of promises, but instead of waiting for all of them to finish, it waits for the first result (or error), and goes on with it.
-=======
`Promise.all` rejects as a whole if any promise rejects. That's good for "all or nothing" cases, when we need *all* results successful to proceed:
```js
@@ -278,7 +248,6 @@ Now we can use `Promise.allSettled` to get the results of *all* given promises,
## Promise.race
Similar to `Promise.all`, but waits only for the first settled promise and gets its result (or error).
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
The syntax is:
@@ -296,9 +265,6 @@ Promise.race([
]).then(alert); // 1
```
-<<<<<<< HEAD
-So, the first result/error becomes the result of the whole `Promise.race`. After the first settled promise "wins the race", all further results/errors are ignored.
-=======
The first promise here was fastest, so it became the result. After the first settled promise "wins the race", all further results/errors are ignored.
@@ -354,18 +320,11 @@ let promise = new Promise((resolve, reject) => reject(error));
```
In practice, this method is almost never used.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
## Summary
There are 4 static methods of `Promise` class:
-<<<<<<< HEAD
-1. `Promise.resolve(value)` -- makes a resolved promise with the given value.
-2. `Promise.reject(error)` -- makes a rejected promise with the given error.
-3. `Promise.all(promises)` -- waits for all promises to resolve and returns an array of their results. If any of the given promises rejects, then it becomes the error of `Promise.all`, and all other results are ignored.
-4. `Promise.race(promises)` -- waits for the first promise to settle, and its result/error becomes the outcome.
-=======
1. `Promise.all(promises)` -- waits for all promises to resolve and returns an array of their results. If any of the given promises rejects, it becomes the error of `Promise.all`, and all other results are ignored.
2. `Promise.allSettled(promises)` (recently added method) -- waits for all promises to settle and returns their results as an array of objects with:
- `status`: `"fulfilled"` or `"rejected"`
@@ -373,6 +332,5 @@ There are 4 static methods of `Promise` class:
3. `Promise.race(promises)` -- waits for the first promise to settle, and its result/error becomes the outcome.
4. `Promise.resolve(value)` -- makes a resolved promise with the given value.
5. `Promise.reject(error)` -- makes a rejected promise with the given error.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
Of these four, `Promise.all` is the most common in practice.
diff --git a/1-js/11-async/06-promisify/article.md b/1-js/11-async/06-promisify/article.md
index 8ffe1a055..75969463a 100644
--- a/1-js/11-async/06-promisify/article.md
+++ b/1-js/11-async/06-promisify/article.md
@@ -2,13 +2,7 @@
"Promisification" is a long word for a simple transformation. It's the conversion of a function that accepts a callback into a function that returns a promise.
-<<<<<<< HEAD
-In other words, we create a wrapper-function that does the same, internally calling the original one, but returns a promise.
-
-Such transforms are often needed in real-life, as many functions and libraries are callback-based. But promises are more convenient. So it makes sense to promisify those.
-=======
Such transformations are often required in real-life, as many functions and libraries are callback-based. But promises are more convenient, so it makes sense to promisify them.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
For instance, we have `loadScript(src, callback)` from the chapter .
@@ -27,11 +21,7 @@ function loadScript(src, callback) {
// loadScript('path/script.js', (err, script) => {...})
```
-<<<<<<< HEAD
-Let's promisify it. The new `loadScriptPromise(src)` function will do the same, but accept only `src` (no callback) and return a promise.
-=======
Let's promisify it. The new `loadScriptPromise(src)` function achieves the same result, but it accepts only `src` (no `callback`) and returns a promise.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```js
let loadScriptPromise = function(src) {
@@ -51,13 +41,7 @@ Now `loadScriptPromise` fits well in our promise-based code.
As we can see, it delegates all the work to the original `loadScript`, providing its own callback that translates to promise `resolve/reject`.
-<<<<<<< HEAD
-As we may need to promisify many functions, it makes sense to use a helper.
-
-That's actually very simple -- `promisify(f)` below takes a to-promisify function `f` and returns a wrapper function.
-=======
In practice we'll probably need to promisify many functions, so it makes sense to use a helper. We'll call it `promisify(f)`: it accepts a to-promisify function `f` and returns a wrapper function.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
That wrapper does the same as in the code above: returns a promise and passes the call to the original `f`, tracking the result in a custom callback:
@@ -117,11 +101,7 @@ f = promisify(f, true);
f(...).then(arrayOfResults => ..., err => ...)
```
-<<<<<<< HEAD
-In some cases, `err` may be absent at all: `callback(result)`, or there's something exotic in the callback format, then we can promisify such functions manually.
-=======
For more exotic callback formats, like those without `err` at all: `callback(result)`, we can promisify such functions manually without using the helper.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
There are also modules with a bit more flexible promisification functions, e.g. [es6-promisify](https://github.com/digitaldesignlabs/es6-promisify). In Node.js, there's a built-in `util.promisify` function for that.
diff --git a/1-js/11-async/07-microtask-queue/article.md b/1-js/11-async/07-microtask-queue/article.md
index 156f05453..7d14acf72 100644
--- a/1-js/11-async/07-microtask-queue/article.md
+++ b/1-js/11-async/07-microtask-queue/article.md
@@ -3,15 +3,9 @@
Promise handlers `.then`/`.catch`/`.finally` are always asynchronous.
-<<<<<<< HEAD
-Even when a Promise is immediately resolved, the code on the lines *below* your `.then`/`.catch`/`.finally` will still execute first.
-
-Here's the code that demonstrates it:
-=======
Even when a Promise is immediately resolved, the code on the lines *below* `.then`/`.catch`/`.finally` will still execute before these handlers.
Here's a demo:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```js run
let promise = Promise.resolve();
@@ -131,19 +125,11 @@ As a logical consequence, macrotasks are handled only when promises give the eng
## Unhandled rejection
-<<<<<<< HEAD
-Remember "unhandled rejection" event from the chapter ?
-
-Now, with the understanding of microtasks, we can formalize it.
-
-**"Unhandled rejection" is when a promise error is not handled at the end of the microtask queue.**
-=======
Remember the `unhandledrejection` event from the article ?
Now we can see exactly how JavaScript finds out that there was an unhandled rejection.
**An "unhandled rejection" occurs when a promise error is not handled at the end of the microtask queue.**
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
For instance, consider this code:
@@ -155,13 +141,7 @@ window.addEventListener('unhandledrejection', event => {
});
```
-<<<<<<< HEAD
-We create a rejected `promise` and do not handle the error. So we have the "unhandled rejection" event (printed in browser console too).
-
-We wouldn't have it if we added `.catch`, like this:
-=======
But if we forget to add `.catch`, then, after the microtask queue is empty, the engine triggers the event:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```js run
let promise = Promise.reject(new Error("Promise Failed!"));
@@ -185,15 +165,6 @@ setTimeout(() => promise.catch(err => alert('caught')));
window.addEventListener('unhandledrejection', event => alert(event.reason));
```
-<<<<<<< HEAD
-Now the unhandled rejction appears again. Why? Because `unhandledrejection` triggers when the microtask queue is complete. The engine examines promises and, if any of them is in "rejected" state, then the event is generated.
-
-In the example, the `.catch` added by `setTimeout` triggers too, of course it does, but later, after `unhandledrejection` has already occurred.
-
-## Summary
-
-- Promise handling is always asynchronous, as all promise actions pass through the internal "promise jobs" queue, also called "microtask queue" (v8 term).
-=======
Now, if we run it, we'll see `Promise Failed!` first and then `caught`.
If we didn't know about the microtasks queue, we could wonder: "Why did `unhandledrejection` handler run? We did catch and handle the error!"
@@ -201,7 +172,6 @@ If we didn't know about the microtasks queue, we could wonder: "Why did `unhandl
But now we understand that `unhandledrejection` is generated when the microtask queue is complete: the engine examines promises and, if any of them is in the "rejected" state, then the event triggers.
In the example above, `.catch` added by `setTimeout` also triggers. But it does so later, after `unhandledrejection` has already occurred, so it doesn't change anything.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
**So, `.then/catch/finally` are called after the current code is finished.**
@@ -209,20 +179,10 @@ In the example above, `.catch` added by `setTimeout` also triggers. But it does
- There's also a "macrotask queue" that keeps various events, network operation results, `setTimeout`-scheduled calls, and so on. These are also called "macrotasks" (v8 term).
-<<<<<<< HEAD
- The engine uses the macrotask queue to handle them in the appearance order.
-
- **Macrotasks run after the code is finished *and* after the microtask queue is empty.**
-=======
Promise handling is always asynchronous, as all promise actions pass through the internal "promise jobs" queue, also called "microtask queue" (ES8 term).
So `.then/catch/finally` handlers are always called after the current code is finished.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
In other words, they have lower priority.
-<<<<<<< HEAD
-So the order is: regular code, then promise handling, then everything else, like events etc.
-=======
In most Javascript engines, including browsers and Node.js, the concept of microtasks is closely tied with the "event loop" and "macrotasks". As these have no direct relation to promises, they are covered in another part of the tutorial, in the article .
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
diff --git a/1-js/11-async/07-microtask-queue/promiseQueue.svg b/1-js/11-async/07-microtask-queue/promiseQueue.svg
index dc353e0dd..7f2189849 100644
--- a/1-js/11-async/07-microtask-queue/promiseQueue.svg
+++ b/1-js/11-async/07-microtask-queue/promiseQueue.svg
@@ -1,47 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/11-async/08-async-await/article.md b/1-js/11-async/08-async-await/article.md
index af1608a66..23acc477e 100644
--- a/1-js/11-async/08-async-await/article.md
+++ b/1-js/11-async/08-async-await/article.md
@@ -14,11 +14,7 @@ async function f() {
The word "async" before a function means one simple thing: a function always returns a promise. Even If a function actually returns a non-promise value, prepending the function definition with the "async" keyword directs JavaScript to automatically wrap that value in a resolved promise.
-<<<<<<< HEAD
-For instance, the code above returns a resolved promise with the result of `1`, let's test it:
-=======
For instance, this function returns a resolved promise with the result of `1`; let's test it:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```js run
async function f() {
@@ -28,11 +24,7 @@ async function f() {
f().then(alert); // 1
```
-<<<<<<< HEAD
-...We could explicitly return a promise, that would be the same as:
-=======
...We could explicitly return a promise, which would be the same:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```js run
async function f() {
@@ -332,13 +324,8 @@ The `async` keyword before a function has two effects:
The `await` keyword before a promise makes JavaScript wait until that promise settles, and then:
-<<<<<<< HEAD
-1. If it's an error, the exception is generated, same as if `throw error` were called at that very place.
-2. Otherwise, it returns the result, so we can assign it to a value.
-=======
1. If it's an error, the exception is generated — same as if `throw error` were called at that very place.
2. Otherwise, it returns the result.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
Together they provide a great framework to write asynchronous code that is easy to both read and write.
diff --git a/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/solution.md b/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/solution.md
index 2110b53ad..af2ad0eed 100644
--- a/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/solution.md
+++ b/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/solution.md
@@ -35,8 +35,4 @@ alert(generator()); // 282475249
alert(generator()); // 1622650073
```
-<<<<<<< HEAD
-That's fine for this context. But then we loose ability to iterate with `for..of` and to use generator composition, that may be useful elsewhere.
-=======
That also works. But then we lose ability to iterate with `for..of` and to use generator composition, that may be useful elsewhere.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
diff --git a/1-js/12-generators-iterators/1-generators/article.md b/1-js/12-generators-iterators/1-generators/article.md
index 3b05d8725..e77ceb66d 100644
--- a/1-js/12-generators-iterators/1-generators/article.md
+++ b/1-js/12-generators-iterators/1-generators/article.md
@@ -1,9 +1,8 @@
-
# Generators
Regular functions return only one, single value (or nothing).
-Generators can return ("yield") multiple values, possibly an infinite number of values, one after another, on-demand. They work great with [iterables](info:iterable), allowing to create data streams with ease.
+Generators can return ("yield") multiple values, one after another, on-demand. They work great with [iterables](info:iterable), allowing to create data streams with ease.
## Generator functions
@@ -19,24 +18,33 @@ function* generateSequence() {
}
```
-When `generateSequence()` is called, it does not execute the code. Instead, it returns a special object, called "generator".
+Generator functions behave differently from regular ones. When such function is called, it doesn't run its code. Instead it returns a special object, called "generator object", to manage the execution.
+
+Here, take a look:
+
+```js run
+function* generateSequence() {
+ yield 1;
+ yield 2;
+ return 3;
+}
-```js
// "generator function" creates "generator object"
let generator = generateSequence();
+*!*
+alert(generator); // [object Generator]
+*/!*
```
-The `generator` object can be perceived as a "frozen function call":
+The function code execution hasn't started yet:
-<<<<<<< HEAD
-Upon creation, the code execution is paused at the very beginning.
-=======
The main method of a generator is `next()`. When called, it runs the execution until the nearest `yield ` statement (`value` can be omitted, then it's `undefined`). Then the function execution pauses, and the yielded `value` is returned to the outer code.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
-The main method of a generator is `next()`. When called, it resumes execution till the nearest `yield ` statement. Then the execution pauses, and the value is returned to the outer code.
+The result of `next()` is always an object with two properties:
+- `value`: the yielded value.
+- `done`: `true` if the function code has finished, otherwise `false`.
For instance, here we create the generator and get its first yielded value:
@@ -56,15 +64,11 @@ let one = generator.next();
alert(JSON.stringify(one)); // {value: 1, done: false}
```
-The result of `next()` is always an object:
-- `value`: the yielded value.
-- `done`: `false` if the code is not finished yet, otherwise `true`.
-
-As of now, we got the first value only:
+As of now, we got the first value only, and the function execution is on the second line:
-Let's call `generator.next()` again. It resumes the execution and returns the next `yield`:
+Let's call `generator.next()` again. It resumes the code execution and returns the next `yield`:
```js
let two = generator.next();
@@ -86,18 +90,10 @@ alert(JSON.stringify(three)); // {value: 3, *!*done: true*/!*}
Now the generator is done. We should see it from `done:true` and process `value:3` as the final result.
-<<<<<<< HEAD
-New calls `generator.next()` don't make sense any more. If we make them, they return the same object: `{done: true}`.
-
-There's no way to "roll back" a generator. But we can create another one by calling `generateSequence()`.
-
-So far, the most important thing to understand is that generator functions, unlike regular function, do not run the code. They serve as "generator factories". Running `function*` returns a generator, and then we ask it for values.
-=======
New calls to `generator.next()` don't make sense any more. If we do them, they return the same object: `{done: true}`.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```smart header="`function* f(…)` or `function *f(…)`?"
-That's a minor religious question, both syntaxes are correct.
+Both syntaxes are correct.
But usually the first syntax is preferred, as the star `*` denotes that it's a generator function, it describes the kind, not the name, so it should stick with the `function` keyword.
```
@@ -122,11 +118,11 @@ for(let value of generator) {
}
```
-That's a much better-looking way to work with generators than calling `.next().value`, right?
+Looks a lot nicer than calling `.next().value`, right?
...But please note: the example above shows `1`, then `2`, and that's all. It doesn't show `3`!
-It's because for-of iteration ignores the last `value`, when `done: true`. So, if we want all results to be shown by `for..of`, we must return them with `yield`:
+It's because `for..of` iteration ignores the last `value`, when `done: true`. So, if we want all results to be shown by `for..of`, we must return them with `yield`:
```js run
function* generateSequence() {
@@ -144,11 +140,7 @@ for(let value of generator) {
}
```
-<<<<<<< HEAD
-Naturally, as generators are iterable, we can call all related functionality, e.g. the spread operator `...`:
-=======
As generators are iterable, we can call all related functionality, e.g. the spread syntax `...`:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```js run
function* generateSequence() {
@@ -162,13 +154,9 @@ let sequence = [0, ...generateSequence()];
alert(sequence); // 0, 1, 2, 3
```
-<<<<<<< HEAD
-In the code above, `...generateSequence()` turns the iterable into array of items (read more about the spread operator in the chapter [](info:rest-parameters-spread-operator#spread-operator))
-=======
In the code above, `...generateSequence()` turns the iterable generator object into an array of items (read more about the spread syntax in the chapter [](info:rest-parameters-spread#spread-syntax))
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
-## Using generators instead of iterables
+## Using generators for iterables
Some time ago, in the chapter [](info:iterable) we created an iterable `range` object that returns values `from..to`.
@@ -179,7 +167,7 @@ let range = {
from: 1,
to: 5,
- // for..of calls this method once in the very beginning
+ // for..of range calls this method once in the very beginning
[Symbol.iterator]() {
// ...it returns the iterator object:
// onward, for..of works only with that object, asking it for next values
@@ -200,28 +188,13 @@ let range = {
}
};
+// iteration over range returns numbers from range.from to range.to
alert([...range]); // 1,2,3,4,5
```
-Using a generator to make iterable sequences is so much more elegant:
-
-```js run
-function* generateSequence(start, end) {
- for (let i = start; i <= end; i++) {
- yield i;
- }
-}
-
-let sequence = [...generateSequence(1,5)];
-
-alert(sequence); // 1, 2, 3, 4, 5
-```
-
-...But what if we'd like to keep a custom `range` object?
-
-## Converting Symbol.iterator to generator
+We can use a generator function for iteration by providing it as `Symbol.iterator`.
-We can get the best from both worlds by providing a generator as `Symbol.iterator`:
+Here's the same `range`, but much more compact:
```js run
let range = {
@@ -238,45 +211,24 @@ let range = {
alert( [...range] ); // 1,2,3,4,5
```
-<<<<<<< HEAD
-The `range` object is now iterable.
-
-That works pretty well, because when `range[Symbol.iterator]` is called:
-- it returns an object (now a generator)
-- that has `.next()` method (yep, a generator has it)
-- that returns values in the form `{value: ..., done: true/false}` (check, exactly what generator does).
-=======
That works, because `range[Symbol.iterator]()` now returns a generator, and generator methods are exactly what `for..of` expects:
- it has a `.next()` method
- that returns values in the form `{value: ..., done: true/false}`
That's not a coincidence, of course. Generators were added to JavaScript language with iterators in mind, to implement them easily.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
-
-That's not a coincidence, of course. Generators aim to make iterables easier, so we can see that.
-The last variant with a generator is much more concise than the original iterable code, and keeps the same functionality.
+The variant with a generator is much more concise than the original iterable code of `range`, and keeps the same functionality.
-```smart header="Generators may continue forever"
+```smart header="Generators may generate values forever"
In the examples above we generated finite sequences, but we can also make a generator that yields values forever. For instance, an unending sequence of pseudo-random numbers.
-<<<<<<< HEAD
-That surely would require a `break` in `for..of`, otherwise the loop would repeat forever and hang.
-=======
That surely would require a `break` (or `return`) in `for..of` over such generator. Otherwise, the loop would repeat forever and hang.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```
## Generator composition
Generator composition is a special feature of generators that allows to transparently "embed" generators in each other.
-<<<<<<< HEAD
-For instance, we'd like to generate a sequence of:
-- digits `0..9` (character codes 48..57),
-- followed by alphabet letters `a..z` (character codes 65..90)
-- followed by uppercased letters `A..Z` (character codes 97..122)
-=======
For instance, we have a function that generates a sequence of numbers:
```js
@@ -287,22 +239,16 @@ function* generateSequence(start, end) {
Now we'd like to reuse it to generate a more complex sequence:
- first, digits `0..9` (with character codes 48..57),
-<<<<<<< HEAD
-- followed by alphabet letters `A..Z` (character codes 65..90)
-- followed by uppercased letters `a..z` (character codes 97..122)
->>>>>>> 852ee189170d9022f67ab6d387aeae76810b5923
-=======
- followed by uppercase alphabet letters `A..Z` (character codes 65..90)
- followed by lowercase alphabet letters `a..z` (character codes 97..122)
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
-
-Then we plan to create passwords by selecting characters from it (could add syntax characters as well), but need to generate the sequence first.
-We already have `function* generateSequence(start, end)`. Let's reuse it to deliver 3 sequences one after another, together they are exactly what we need.
+We can use this sequence e.g. to create passwords by selecting characters from it (could add syntax characters as well), but let's generate it first.
In a regular function, to combine results from multiple other functions, we call them, store the results, and then join at the end.
-For generators, we can do better, like this:
+For generators, there's a special `yield*` syntax to "embed" (compose) one generator into another.
+
+The composed generator:
```js run
function* generateSequence(start, end) {
@@ -333,7 +279,7 @@ for(let code of generatePasswordCodes()) {
alert(str); // 0..9A..Za..z
```
-The special `yield*` directive in the example is responsible for the composition. It *delegates* the execution to another generator. Or, to say it simple, it runs generators and transparently forwards their yields outside, as if they were done by the calling generator itself.
+The `yield*` directive *delegates* the execution to another generator. This term means that `yield* gen` iterates over the generator `gen` and transparently forwards its yields outside. As if the values were yielded by the outer generator.
The result is the same as if we inlined the code from nested generators:
@@ -366,19 +312,11 @@ for(let code of generateAlphaNum()) {
alert(str); // 0..9A..Za..z
```
-A generator composition is a natural way to insert a flow of one generator into another.
-
-It works even if the flow of values from the nested generator is infinite. It's simple and doesn't use extra memory to store intermediate results.
+A generator composition is a natural way to insert a flow of one generator into another. It doesn't use extra memory to store intermediate results.
## "yield" is a two-way street
-<<<<<<< HEAD
-Till this moment, generators were like "iterators on steroids". And that's how they are often used.
-
-But in fact they are much more powerful and flexible.
-=======
Until this moment, generators were similar to iterable objects, with a special syntax to generate values. But in fact they are much more powerful and flexible.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
That's because `yield` is a two-way street: it not only returns the result to the outside, but also can pass the value inside the generator.
@@ -390,7 +328,7 @@ Let's see an example:
function* gen() {
*!*
// Pass a question to the outer code and wait for an answer
- let result = yield "2 + 2?"; // (*)
+ let result = yield "2 + 2 = ?"; // (*)
*/!*
alert(result);
@@ -405,13 +343,6 @@ generator.next(4); // --> pass the result into the generator
-<<<<<<< HEAD
-1. The first call `generator.next()` is always without an argument. It starts the execution and returns the result of the first `yield` ("2+2?"). At this point the generator pauses the execution (still on that line).
-2. Then, as shown at the picture above, the result of `yield` gets into the `question` variable in the calling code.
-3. On `generator.next(4)`, the generator resumes, and `4` gets in as the result: `let result = 4`.
-
-Please note, the outer code does not have to immediately call`next(4)`. It may take time to calculate the value. This is also a valid code:
-=======
1. The first call `generator.next()` should be always made without an argument (the argument is ignored if passed). It starts the execution and returns the result of the first `yield "2+2=?"`. At this point the generator pauses the execution, while staying on the line `(*)`.
2. Then, as shown at the picture above, the result of `yield` gets into the `question` variable in the calling code.
3. On `generator.next(4)`, the generator resumes, and `4` gets in as the result: `let result = 4`.
@@ -419,33 +350,32 @@ Please note, the outer code does not have to immediately call`next(4)`. It may t
Please note, the outer code does not have to immediately call `next(4)`. It may take time. That's not a problem: the generator will wait.
For instance:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
```js
// resume the generator after some time
setTimeout(() => generator.next(4), 1000);
```
-The syntax may seem a bit odd. It's quite uncommon for a function and the calling code to pass values around to each other. But that's exactly what's going on.
+As we can see, unlike regular functions, a generator and the calling code can exchange results by passing values in `next/yield`.
To make things more obvious, here's another example, with more calls:
```js run
function* gen() {
- let ask1 = yield "2 + 2?";
+ let ask1 = yield "2 + 2 = ?";
alert(ask1); // 4
- let ask2 = yield "3 * 3?"
+ let ask2 = yield "3 * 3 = ?"
alert(ask2); // 9
}
let generator = gen();
-alert( generator.next().value ); // "2 + 2?"
+alert( generator.next().value ); // "2 + 2 = ?"
-alert( generator.next(4).value ); // "3 * 3?"
+alert( generator.next(4).value ); // "3 * 3 = ?"
alert( generator.next(9).done ); // true
```
@@ -470,12 +400,12 @@ As we observed in the examples above, the outer code may pass a value into the g
To pass an error into a `yield`, we should call `generator.throw(err)`. In that case, the `err` is thrown in the line with that `yield`.
-For instance, here the yield of `"2 + 2?"` leads to an error:
+For instance, here the yield of `"2 + 2 = ?"` leads to an error:
```js run
function* gen() {
try {
- let result = yield "2 + 2?"; // (1)
+ let result = yield "2 + 2 = ?"; // (1)
alert("The execution does not reach here, because the exception is thrown above");
} catch(e) {
@@ -500,7 +430,7 @@ The current line of the calling code is the line with `generator.throw`, labelle
```js run
function* generate() {
- let result = yield "2 + 2?"; // Error in this line
+ let result = yield "2 + 2 = ?"; // Error in this line
}
let generator = generate();
@@ -520,16 +450,12 @@ If we don't catch the error there, then, as usual, it falls through to the outer
## Summary
-- Generators are created by generator functions `function*(…) {…}`.
+- Generators are created by generator functions `function* f(…) {…}`.
- Inside generators (only) there exists a `yield` operator.
- The outer code and the generator may exchange results via `next/yield` calls.
-In modern JavaScript, generators are rarely used. But sometimes they come in handy, because the ability of a function to exchange data with the calling code during the execution is quite unique.
+In modern JavaScript, generators are rarely used. But sometimes they come in handy, because the ability of a function to exchange data with the calling code during the execution is quite unique. And, surely, they are great for making iterable objects.
-<<<<<<< HEAD
-Also, in the next chapter we'll learn async generators, which are used to read streams of asynchronously generated data in `for` loop.
-=======
Also, in the next chapter we'll learn async generators, which are used to read streams of asynchronously generated data (e.g paginated fetches over a network) in `for await ... of` loops.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
-In web-programming we often work with streamed data, e.g. need to fetch paginated results, so that's a very important use case.
+In web-programming we often work with streamed data, so that's another very important use case.
diff --git a/1-js/12-generators-iterators/1-generators/genYield2-2.svg b/1-js/12-generators-iterators/1-generators/genYield2-2.svg
index 2ffc06674..41f163364 100644
--- a/1-js/12-generators-iterators/1-generators/genYield2-2.svg
+++ b/1-js/12-generators-iterators/1-generators/genYield2-2.svg
@@ -1,73 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/12-generators-iterators/1-generators/genYield2.svg b/1-js/12-generators-iterators/1-generators/genYield2.svg
index 0cf42d0b5..611328755 100644
--- a/1-js/12-generators-iterators/1-generators/genYield2.svg
+++ b/1-js/12-generators-iterators/1-generators/genYield2.svg
@@ -1,45 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-1.svg b/1-js/12-generators-iterators/1-generators/generateSequence-1.svg
index 6f7b433c4..0a00c4712 100644
--- a/1-js/12-generators-iterators/1-generators/generateSequence-1.svg
+++ b/1-js/12-generators-iterators/1-generators/generateSequence-1.svg
@@ -1,31 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-2.svg b/1-js/12-generators-iterators/1-generators/generateSequence-2.svg
index dc8cd4c36..dc2225d8a 100644
--- a/1-js/12-generators-iterators/1-generators/generateSequence-2.svg
+++ b/1-js/12-generators-iterators/1-generators/generateSequence-2.svg
@@ -1,34 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-3.svg b/1-js/12-generators-iterators/1-generators/generateSequence-3.svg
index 39d1ddab2..68bf8d268 100644
--- a/1-js/12-generators-iterators/1-generators/generateSequence-3.svg
+++ b/1-js/12-generators-iterators/1-generators/generateSequence-3.svg
@@ -1,34 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-4.svg b/1-js/12-generators-iterators/1-generators/generateSequence-4.svg
index 5df2437f1..e590c59a5 100644
--- a/1-js/12-generators-iterators/1-generators/generateSequence-4.svg
+++ b/1-js/12-generators-iterators/1-generators/generateSequence-4.svg
@@ -1,34 +1 @@
-<<<<<<< HEAD
-
-
-=======
-
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+
\ No newline at end of file
diff --git a/1-js/13-modules/01-modules-intro/article.md b/1-js/13-modules/01-modules-intro/article.md
index b07ceffb8..072e33c22 100644
--- a/1-js/13-modules/01-modules-intro/article.md
+++ b/1-js/13-modules/01-modules-intro/article.md
@@ -1,12 +1,7 @@
# Modules, introduction
-<<<<<<< HEAD
-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.
-=======
As our application grows bigger, we want to split it into multiple files, so called "modules". A module may contain a class or a library of functions for a specific purpose.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
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.
@@ -18,13 +13,6 @@ To name some (for historical reasons):
- [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.
-<<<<<<< HEAD
-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.
-=======
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. So we'll study the modern JavaScript modules from now on.
@@ -32,17 +20,11 @@ The language-level module system appeared in the standard in 2015, gradually evo
## What is a module?
A module is just a file. One script is one module. As simple as that.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
Directives `export` and `import` allow to interchange functionality between modules:
-<<<<<<< HEAD
-- `export` keyword labels variables and functions that should be accessible from outside the file.
-- `import` allows to import functionality from other modules.
-=======
- `export` keyword labels variables and functions that should be accessible from outside the current module.
- `import` allows the import of functionality from other modules.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
For instance, if we have a file `sayHi.js` exporting a function:
@@ -63,15 +45,11 @@ alert(sayHi); // function...
sayHi('John'); // Hello, John!
```
-<<<<<<< HEAD
-In this tutorial we concentrate on the language itself, but we use browser as the demo environment, so let's see how modules work in the browser.
-=======
The `import` directive loads the module by path `./sayHi.js` relative to the current file, and assigns exported function `sayHi` to the corresponding variable.
Let's run the example in-browser.
As modules support special keywords and features, we must tell the browser that a script should be treated as a module, by using the attribute `
```
-<<<<<<< HEAD
-Here's a brief list of methods to insert a node into a parent element (`parentElem` for short):
-
-`parentElem.appendChild(node)`
-: Appends `node` as the last child of `parentElem`.
-
- The following example adds a new `` to the end of `
- `:
-
- ```html run height=100
-
- 0 -
- 1 -
- 2 -
- `:
-
- ```html run height=100
-
-
-
- 0 -
- 1 -
- 2 -
` by calling `div.append(anotherElement)`. ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 Here are more insertion methods, they specify different places where to insert: @@ -195,15 +110,11 @@ Here are more insertion methods, they specify different places where to insert: - `node.after(...nodes or strings)` –- insert nodes or strings *after* `node`, - `node.replaceWith(...nodes or strings)` –- replaces `node` with the given nodes or strings. -<<<<<<< HEAD -Here's an example of using these methods to add more items to a list and the text before/after it: -======= Arguments of these methods are an arbitrary list of DOM nodes to insert, or text strings (that become text nodes automatically). Let's see them in action. Here's an example of using these methods to add items to a list and the text before/after it: ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 ```html autorun-
@@ -226,11 +137,7 @@ Here's an example of using these methods to add items to a list and the text bef
```
-<<<<<<< HEAD
-Here's a small picture what methods do:
-=======
Here's a visual picture of what the methods do:
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
@@ -308,11 +215,7 @@ For instance:
Bye
``` -<<<<<<< HEAD -That's how we can append an arbitrary HTML to our page. -======= That's how we can append arbitrary HTML to the page. ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 Here's the picture of insertion variants: @@ -585,15 +488,6 @@ Insertion and removal of nodes: Text strings are inserted "as text". -<<<<<<< HEAD -- Given a piece of HTML: `elem.insertAdjacentHTML(where, html)`, inserts depending on where: - - `"beforebegin"` -- insert `html` right before `elem`, - - `"afterbegin"` -- insert `html` into `elem`, at the beginning, - - `"beforeend"` -- insert `html` into `elem`, at the end, - - `"afterend"` -- insert `html` right after `elem`. - - Also there are similar methods `elem.insertAdjacentText` and `elem.insertAdjacentElement`, they insert text strings and elements, but they are rarely used. -======= - Given some HTML in `html`, `elem.insertAdjacentHTML(where, html)` inserts it depending on the value of `where`: - `"beforebegin"` -- insert `html` right before `elem`, - `"afterbegin"` -- insert `html` into `elem`, at the beginning, @@ -601,7 +495,6 @@ Insertion and removal of nodes: - `"afterend"` -- insert `html` right after `elem`. Also there are similar methods, `elem.insertAdjacentText` and `elem.insertAdjacentElement`, that insert text strings and elements, but they are rarely used. ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 - To append HTML to the page before it has finished loading: - `document.write(html)` diff --git a/2-ui/1-document/07-modifying-document/before-prepend-append-after.svg b/2-ui/1-document/07-modifying-document/before-prepend-append-after.svg index 25b958412..6e1fb4874 100644 --- a/2-ui/1-document/07-modifying-document/before-prepend-append-after.svg +++ b/2-ui/1-document/07-modifying-document/before-prepend-append-after.svg @@ -1,74 +1 @@ -<<<<<<< HEAD - - -======= - ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 + \ No newline at end of file diff --git a/2-ui/1-document/07-modifying-document/insert-adjacent.svg b/2-ui/1-document/07-modifying-document/insert-adjacent.svg index 7fe480726..64beee037 100644 --- a/2-ui/1-document/07-modifying-document/insert-adjacent.svg +++ b/2-ui/1-document/07-modifying-document/insert-adjacent.svg @@ -1,74 +1 @@ -<<<<<<< HEAD - - -======= - ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md index 2a6830b76..796039c2a 100644 --- a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md +++ b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md @@ -4,11 +4,7 @@ importance: 5 # What's the scroll from the bottom? -<<<<<<< HEAD -The `elem.scrollTop` property is the size of the scrolled out part from the top. How to get "`scrollBottom`" -- the size from the bottom? -======= The `elem.scrollTop` property is the size of the scrolled out part from the top. How to get the size of the bottom scroll (let's call it `scrollBottom`)? ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 Write the code that works for an arbitrary `elem`. diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.svg b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.svg index 302008f91..ca8bbc3bd 100644 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.svg +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.svg @@ -1,24 +1 @@ -<<<<<<< HEAD - - -======= - ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md index 3383d6c33..afa1d8f50 100644 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md @@ -37,15 +37,9 @@ The code won't work reliably while `` has no width/height: When the browser does not know the width/height of an image (from tag attributes or CSS), then it assumes them to equal `0` until the image finishes loading. -<<<<<<< HEAD -In real life after the first load browser usually caches the image, and on next loads it will have the size immediately. - -But on the first load the value of `ball.offsetWidth` is `0`. That leads to wrong coordinates. -======= So the value of `ball.offsetWidth` will be `0` until the image loads. That leads to wrong coordinates in the code above. After the first load, the browser usually caches the image, and on reloads it will have the size immediately. But on the first load the value of `ball.offsetWidth` is `0`. ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 We should fix that by adding `width/height` to `
`: diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md index 3461260e8..5a4c8ba52 100644 --- a/2-ui/1-document/09-size-and-scroll/article.md +++ b/2-ui/1-document/09-size-and-scroll/article.md @@ -58,13 +58,9 @@ Let's start exploring them from the outside of the element. These properties are rarely needed, but still they are the "most outer" geometry properties, so we'll start with them. -<<<<<<< HEAD -The `offsetParent` is the nearest ancestor that is: -======= The `offsetParent` is the nearest ancestor that the browser uses for calculating coordinates during rendering. That's the nearest ancestor that is one of the following: ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 1. CSS-positioned (`position` is `absolute`, `relative`, `fixed` or `sticky`), or 2. `
`, ` `, or ` `, or @@ -112,11 +108,7 @@ For our sample element: ````smart header="Geometry properties for not shown elements are zero/null" Geometry properties are calculated only for shown elements. -<<<<<<< HEAD -If an element (or any of its ancestors) has `display:none` or is not in the document, then all geometry properties are zero or `null` depending on what it is. -======= If an element (or any of its ancestors) has `display:none` or is not in the document, then all geometry properties are zero (or `null` for `offsetParent`). ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 For example, `offsetParent` is `null`, and `offsetWidth`, `offsetHeight` are `0`. @@ -277,11 +269,7 @@ Elements have the following geometry properties: - `offsetParent` -- is the nearest positioned ancestor or `td`, `th`, `table`, `body`. - `offsetLeft/offsetTop` -- coordinates relative to the upper-left edge of `offsetParent`. - `offsetWidth/offsetHeight` -- "outer" width/height of an element including borders. -<<<<<<< HEAD -- `clientLeft/clientTop` -- the distance from the upper-left outer corner to its upper-left inner corner. For left-to-right OS they are always the widths of left/top borders. For right-to-left OS the vertical scrollbar is on the left so `clientLeft` includes its width too. -======= - `clientLeft/clientTop` -- the distances from the upper-left outer corner to the upper-left inner (content + padding) corner. For left-to-right OS they are always the widths of left/top borders. For right-to-left OS the vertical scrollbar is on the left so `clientLeft` includes its width too. ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 - `clientWidth/clientHeight` -- the width/height of the content including paddings, but without the scrollbar. - `scrollWidth/scrollHeight` -- the width/height of the content including the scrolled out parts. Also includes paddings, but not the scrollbar. - `scrollLeft/scrollTop` -- width/height of the scrolled out part of the element, starting from its upper-left corner. diff --git a/2-ui/1-document/09-size-and-scroll/metric-all.svg b/2-ui/1-document/09-size-and-scroll/metric-all.svg index 69bc9ae09..3c77f09ac 100644 --- a/2-ui/1-document/09-size-and-scroll/metric-all.svg +++ b/2-ui/1-document/09-size-and-scroll/metric-all.svg @@ -1,140 +1 @@ -<<<<<<< HEAD - - -======= - ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.svg b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.svg index f6329c3fd..12bc456a6 100644 --- a/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.svg +++ b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.svg @@ -1,74 +1 @@ -<<<<<<< HEAD - - -======= - ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top.svg b/2-ui/1-document/09-size-and-scroll/metric-client-left-top.svg index e9926bccf..5708047d4 100644 --- a/2-ui/1-document/09-size-and-scroll/metric-client-left-top.svg +++ b/2-ui/1-document/09-size-and-scroll/metric-client-left-top.svg @@ -1,63 +1 @@ -<<<<<<< HEAD - - -======= - ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-width-height.svg b/2-ui/1-document/09-size-and-scroll/metric-client-width-height.svg index 0753509da..fe4b3c69d 100644 --- a/2-ui/1-document/09-size-and-scroll/metric-client-width-height.svg +++ b/2-ui/1-document/09-size-and-scroll/metric-client-width-height.svg @@ -1,116 +1 @@ -<<<<<<< HEAD - - -======= - ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.svg b/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.svg index 659317615..62de5f572 100644 --- a/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.svg +++ b/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.svg @@ -1,81 +1 @@ -<<<<<<< HEAD - - -======= - ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-css.svg b/2-ui/1-document/09-size-and-scroll/metric-css.svg index 7e19e3e92..e910a9c87 100644 --- a/2-ui/1-document/09-size-and-scroll/metric-css.svg +++ b/2-ui/1-document/09-size-and-scroll/metric-css.svg @@ -1,113 +1 @@ -<<<<<<< HEAD - - -======= - ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-parent.svg b/2-ui/1-document/09-size-and-scroll/metric-offset-parent.svg index f5419e56c..d72a20138 100644 --- a/2-ui/1-document/09-size-and-scroll/metric-offset-parent.svg +++ b/2-ui/1-document/09-size-and-scroll/metric-offset-parent.svg @@ -1,92 +1 @@ -<<<<<<< HEAD - - -======= - ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.svg b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.svg index 24494cea0..76e20b1bc 100644 --- a/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.svg +++ b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.svg @@ -1,116 +1 @@ -<<<<<<< HEAD - - -======= - ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-top.svg b/2-ui/1-document/09-size-and-scroll/metric-scroll-top.svg index fec6eb1db..3c00bed00 100644 --- a/2-ui/1-document/09-size-and-scroll/metric-scroll-top.svg +++ b/2-ui/1-document/09-size-and-scroll/metric-scroll-top.svg @@ -1,91 +1 @@ -<<<<<<< HEAD - - -======= - ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.svg b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.svg index cdd15fe7c..29e25eb6f 100644 --- a/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.svg +++ b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.svg @@ -1,95 +1 @@ -<<<<<<< HEAD - - -======= - ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 + \ No newline at end of file diff --git a/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.svg b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.svg index a57cd6a7b..b0dff4d4e 100644 --- a/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.svg +++ b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.svg @@ -1,32 +1 @@ -<<<<<<< HEAD - - -======= - ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 + \ No newline at end of file diff --git a/2-ui/1-document/11-coordinates/article.md b/2-ui/1-document/11-coordinates/article.md index 9f189b13d..b45a152a1 100644 --- a/2-ui/1-document/11-coordinates/article.md +++ b/2-ui/1-document/11-coordinates/article.md @@ -55,9 +55,6 @@ If we compare window coordinates versus CSS positioning, then there are obvious But in CSS, the `right` property means the distance from the right edge, and the `bottom` property means the distance from the bottom edge. -<<<<<<< HEAD -If we just look at the picture above, we can see that in JavaScript it is not so. All window coordinates are counted from the upper-left corner, including these ones. -======= Please note: - Coordinates may be decimal fractions, such as `10.5`. That's normal, internally browser uses fractions in calculations. We don't have to round them when setting to `style.left/top`. @@ -91,7 +88,6 @@ There are obvious similarities between window-relative coordinates and CSS `posi But in CSS positioning, `right` property means the distance from the right edge, and `bottom` property means the distance from the bottom edge. If we just look at the picture above, we can see that in JavaScript it is not so. All window coordinates are counted from the top-left corner, including these ones. ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 ``` ## elementFromPoint(x, y) [#elementFromPoint] diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.svg b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.svg index 2f62e77aa..73dcee5f2 100644 --- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.svg +++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.svg @@ -1,55 +1 @@ -<<<<<<< HEAD - - -======= - ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 + \ No newline at end of file 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 b38cf60aa..b04cb8231 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 @@ -36,11 +36,7 @@ To get field-relative `left` coordinate of the click, we can substract the field let left = event.clientX - fieldCoords.left - field.clientLeft; ``` -<<<<<<< HEAD -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.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. ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 We need to move the ball half-width left and half-height up to make it center. diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.svg b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.svg index c926cf1fa..2c92df87d 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.svg +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.svg @@ -1,35 +1 @@ -<<<<<<< HEAD - - -======= - ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 + \ No newline at end of file diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.svg b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.svg index bcf73a09c..3f53a7691 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.svg +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.svg @@ -1,37 +1 @@ -<<<<<<< HEAD - - -======= - ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 + \ No newline at end of file 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 17131c6f0..70c6edb54 100644 --- a/2-ui/2-events/01-introduction-browser-events/article.md +++ b/2-ui/2-events/01-introduction-browser-events/article.md @@ -160,11 +160,7 @@ button.onclick = sayThanks; button.onclick = sayThanks(); ``` -<<<<<<< HEAD -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, then `sayThanks()` becomes 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. ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 ...But in the markup we do need the brackets: @@ -172,11 +168,7 @@ If we add parentheses, then `sayThanks()` becomes is a function call. So the las ``` -<<<<<<< HEAD -The difference is easy to explain. When the browser reads the attribute, it creates a handler function with the body from its content. -======= The difference is easy to explain. When the browser reads the attribute, it creates a handler function with body from the attribute content. ->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3 So the last example is the same as: ```js @@ -232,14 +224,8 @@ element.addEventListener(event, handler, [options]); `options` : An additional optional object with properties: - `once`: if `true`, then the listener is automatically removed after it triggers. -<<<<<<< HEAD - - `capture`: the phrase where to handle the event, to be covered later in the chapter
-
-