Sincronización 5 Julio

1-js/02-first-steps/09-comparison/article.md

@@ -2,11 +2,17 @@
 
 Conocemos muchos operadores de comparación de las matemáticas:
 
+En Javascript se escriben así:
+
 - Mayor/menor que: <code>a &gt; b</code>, <code>a &lt; b</code>.
 - Mayor/menor o igual que: <code>a &gt;= b</code>, <code>a &lt;= b</code>.
 - Igual: `a == b` (ten en cuenta el doble signo `=`. Un solo símbolo `a = b` significaría una asignación).
 - Distinto. En matemáticas la notación es <code>&ne;</code>, pero en JavaScript se escribe como una asignación con un signo de exclamación delante: <code>a != b</code>.
 
+En este artículo, aprenderemos más sobre los diferentes tipos de comparaciones, cómo las realiza JavaScript, incluidas las peculiaridades importantes.
+
+Al final, encontrará una buena receta para evitar problemas relacionados con "peculiaridades de JavaScript"("javascript quirks").
+
 ## Booleano es el resultado
 
 Como todos los demás operadores, una comparación retorna un valor. En este caso, el valor es un booleano.
@@ -195,7 +201,7 @@ Obtenemos estos resultados porque:
 - Las comparaciones `(1)` y `(2)` retornan `falso` porque `no definido` se convierte en `NaN` y `NaN` es un valor numérico especial que retorna `falso` para todas las comparaciones.
 - La comparación de igualdad `(3)` retorna `falso` porque `undefined` sólo equivale a `null` y a ningún otro valor.
 
-### Evita los problemas
+### Evitar los problemas
 
 ¿Por qué repasamos estos ejemplos? ¿Deberíamos recordar estas peculiaridades todo el tiempo? Bueno, en realidad no. En realidad, estas cosas difíciles se volverán familiares con el tiempo, pero hay una manera sólida de evadir los problemas con ellas:
 

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

@@ -148,7 +148,7 @@ Hay dos formas de hacerlo:
 
 1. Multiplicar y dividir.
 
-    Para redondear el número a dos dígitos tras el decimal, podemos multiplicarlo por `100`, llamar la función de redondeo y volverlo a dividir.
+    Para redondear el número a dos dígitos tras el decimal, podemos multiplicarlo por `100` (o una potencia mayor de 10), llamar la función de redondeo y volverlo a dividir.
     ```js run
     let num = 1.23456;
 

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

@@ -74,7 +74,7 @@ Usually that's convenient. But if we want symbolic keys too, then there's a sepa
 
 Objects lack many methods that exist for arrays, e.g. `map`, `filter` and others.
 
-If we'd like to apply them, then we can use `Object.entries` followed `Object.fromEntries`:
+If we'd like to apply them, then we can use `Object.entries` followed by `Object.fromEntries`:
 
 1. Use `Object.entries(obj)` to get an array of key/value pairs from `obj`.
 2. Use array methods on that array, e.g. `map`.

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

@@ -184,7 +184,7 @@ Los rectángulos en el lado derecho demuestran cómo cambia el entorno léxico g
 
 1. Cuando se inicia el script, el entorno léxico se rellena previamente con todas las variables declaradas.
      - Inicialmente, están en el estado "No inicializado". Ese es un estado interno especial, significa que el motor conoce la variable, pero no se puede hacer referencia a ella hasta que se haya declarado con `let`. Es casi lo mismo que si la variable no existiera.
-2. Luego aparece la definición `let phrase`.Todavía no hay una asignación, por lo que su valor es `undefined`. Podemos usar la variable desde este momento.
+2. Luego aparece la definición `let phrase`.Todavía no hay una asignación, por lo que su valor es `undefined`. Podemos usar la variable desde este punto en adelante.
 3. `phrase` se le asigna un valor.
 4. `phrase` cambia el valor.
 

1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/solution.js

@@ -0,0 +1,15 @@
+function sum(a) {
+
+  let currentSum = a;
+
+  function f(b) {
+    currentSum += b;
+    return f;
+  }
+
+  f.toString = function() {
+    return currentSum;
+  };
+
+  return f;
+}

1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/source.js

@@ -0,0 +1,12 @@
+function sum(a){
+  // Your code goes here.
+
+}
+
+/*
+sum(1)(2) == 3; // 1 + 2
+sum(1)(2)(3) == 6; // 1 + 2 + 3
+sum(5)(-1)(2) == 6
+sum(6)(-1)(-2)(-3) == 0
+sum(0)(1)(2)(3)(4)(5) == 15
+*/

1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/test.js

@@ -0,0 +1,19 @@
+describe("sum", function(){
+
+  it("sum(1)(2) == 3", function(){
+    assert.equal(3, sum(1)(2));
+  });
+
+  it("sum(5)(-1)(2) == 6", function(){
+    assert.equal(6, sum(5)(-1)(2));
+  });
+
+  it("sum(6)(-1)(-2)(-3) == 0", function(){
+    assert.equal(0, sum(6)(-1)(-2)(-3));
+  });
+
+  it("sum(0)(1)(2)(3)(4)(5) == 15", function(){
+    assert.equal(15, sum(0)(1)(2)(3)(4)(5));
+  });
+});
+

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

@@ -331,7 +331,7 @@ alert(user.name); // John
 alert(User.prototype.name); // undefined
 ```
 
-Technically, they are processed after the constructor has done it's job, and we can use for them complex expressions and function calls:
+We can also assign values using more complex expressions and function calls:
 
 ```js run
 class User {
@@ -375,30 +375,9 @@ The problem is called "losing `this`".
 There are two approaches to fixing it, as discussed in the chapter <info:bind>:
 
 1. Pass a wrapper-function, such as `setTimeout(() => button.click(), 1000)`.
-2. Bind the method to object, e.g. in the constructor:
+2. Bind the method to object, e.g. in the constructor.
 
-```js run
-class Button {
-  constructor(value) {
-    this.value = value;
-*!*
-    this.click = this.click.bind(this);
-*/!*
-  }
-
-  click() {
-    alert(this.value);
-  }
-}
-
-let button = new Button("hello");
-
-*!*
-setTimeout(button.click, 1000); // hello
-*/!*
-```
-
-Class fields provide a more elegant syntax for the latter solution:
+Class fields provide another, quite elegant syntax:
 
 ```js run
 class Button {
@@ -417,9 +396,9 @@ let button = new Button("hello");
 setTimeout(button.click, 1000); // hello
 ```
 
-The class field `click = () => {...}` creates an independent function on each `Button` object, with `this` bound to the object. Then we can pass `button.click` around anywhere, and it will be called with the right `this`.
+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, when we need to setup a method as an event listener.
+That's especially useful in browser environment, for event listeners.
 
 ## Summary
 

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

@@ -230,7 +230,8 @@ let rabbit = new Rabbit("White Rabbit", 10); // Error: this is not defined.
 
 Whoops! We've got an error. Now we can't create rabbits. What went wrong?
 
-The short answer is: constructors in inheriting classes must call `super(...)`, and (!) do it before using `this`.
+The short answer is:
+- **Constructors in inheriting classes must call `super(...)`, and (!) do it before using `this`.**
 
 ...But why? What's going on here? Indeed, the requirement seems strange.
 
@@ -243,7 +244,7 @@ That label affects its behavior with `new`.
 - 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 (non-derived) constructor, otherwise the object for `this` won't be created. And we'll get an error.
+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:
 
@@ -277,7 +278,91 @@ alert(rabbit.name); // White Rabbit
 alert(rabbit.earLength); // 10
 */!*
 ```
+### Overriding class fields: a tricky note
 
+```warn header="Advanced note"
+This note assumes you have a certain experience with classes, maybe in other programming languages.
+It provides better insight into the language and also explains the behavior that might be a source of bugs (but not very often).
+If you find it difficult to understand, just go on, continue reading, then return to it some time later.
+```
+
+We can override not only methods, but also class fields.
+
+Although, there's a tricky behavior when we access an overridden field in parent constructor, quite different from most other programming languages.
+
+Consider this example:
+
+```js run
+class Animal {
+  name = 'animal'
+  constructor() {
+    alert(this.name); // (*)
+  }
+}
+class Rabbit extends Animal {
+  name = 'rabbit';
+}
+new Animal(); // animal
+*!*
+new Rabbit(); // animal
+*/!*
+```
+
+Here, class `Rabbit` extends `Animal` and overrides `name` field with its own value.
+
+There's no own constructor in `Rabbit`, so `Animal` constructor is called.
+
+What's interesting is that in both cases: `new Animal()` and `new Rabbit()`, the `alert` in the line `(*)` shows `animal`.
+
+**In other words, parent constructor always uses its own field value, not the overridden one.**
+
+What's odd about it?
+
+If it's not clear yet, please compare with methods.
+
+Here's the same code, but instead of `this.name` field we call `this.showName()` method:
+
+```js run
+class Animal {
+  showName() {  // instead of this.name = 'animal'
+    alert('animal');
+  }
+  constructor() {
+    this.showName(); // instead of alert(this.name);
+  }
+}
+class Rabbit extends Animal {
+  showName() {
+    alert('rabbit');
+  }
+}
+new Animal(); // animal
+*!*
+new Rabbit(); // rabbit
+*/!*
+```
+
+Please note: now the output is different.
+
+And that's what we naturally expect. When the parent constructor is called in the derived class, it uses the overridden method.
+
+...But for class fields it's not so. As said, the parent constructor always uses the parent field.
+
+Why is there the difference?
+
+Well, the reason is in the field initialization order. The class field is initialized:
+- Before constructor for the base class (that doesn't extend anything),
+- Imediately after `super()` for the derived class.
+
+In our case, `Rabbit` is the derived class. There's no `constructor()` in it. As said previously, that's the same as if there was an empty constructor with only `super(...args)`.
+
+So, `new Rabbit()` calls `super()`, thus executing the parent constructor, and (per the rule for derived classes) only after that its class fields are initialized. At the time of the parent constructor execution, there are no `Rabbit` class fields yet, that's why `Animal` fields are used.
+
+This subtle difference between fields and methods is specific to JavaScript
+
+Luckily, this behavior only reveals itself if an overridden field is used in the parent constructor. Then it may be difficult to understand what's going on, so we're explaining it here.
+
+If it becomes a problem, one can fix it by using methods or getters/setters instead of fields.
 
 ## Super: internals, [[HomeObject]]
 

1-js/09-classes/03-static-properties-methods/3-class-extend-object/solution.md

@@ -0,0 +1,81 @@
+First, let's see why the latter code doesn't work.
+
+The reason becomes obvious if we try to run it. An inheriting class constructor must call `super()`. Otherwise `"this"` won't be "defined".
+
+So here's the fix:
+
+```js run
+class Rabbit extends Object {
+  constructor(name) {
+*!*
+    super(); // need to call the parent constructor when inheriting
+*/!*
+    this.name = name;
+  }
+}
+
+let rabbit = new Rabbit("Rab");
+
+alert( rabbit.hasOwnProperty('name') ); // true
+```
+
+But that's not all yet.
+
+Even after the fix, there's still important difference in `"class Rabbit extends Object"` versus `class Rabbit`.
+
+As we know, the "extends" syntax sets up two prototypes:
+
+1. Between `"prototype"` of the constructor functions (for methods).
+2. Between the constructor functions themselves (for static methods).
+
+In our case, for `class Rabbit extends Object` it means:
+
+```js run
+class Rabbit extends Object {}
+
+alert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) true
+alert( Rabbit.__proto__ === Object ); // (2) true
+```
+
+So `Rabbit` now provides access to static methods of `Object` via `Rabbit`, like this:
+
+```js run
+class Rabbit extends Object {}
+
+*!*
+// normally we call Object.getOwnPropertyNames
+alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // a,b
+*/!*
+```
+
+But if we don't have `extends Object`, then `Rabbit.__proto__` is not set to `Object`.
+
+Here's the demo:
+
+```js run
+class Rabbit {}
+
+alert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) true
+alert( Rabbit.__proto__ === Object ); // (2) false (!)
+alert( Rabbit.__proto__ === Function.prototype ); // as any function by default
+
+*!*
+// error, no such function in Rabbit
+alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // Error
+*/!*
+```
+
+So `Rabbit` doesn't provide access to static methods of `Object` in that case.
+
+By the way, `Function.prototype` has "generic" function methods, like `call`, `bind` etc. They are ultimately available in both cases, because for the built-in `Object` constructor, `Object.__proto__ === Function.prototype`.
+
+Here's the picture:
+
+![](rabbit-extends-object.svg)
+
+So, to put it short, there are two differences:
+
+| class Rabbit | class Rabbit extends Object  |
+|--------------|------------------------------|
+| --             | needs to call `super()` in constructor |
+| `Rabbit.__proto__ === Function.prototype` | `Rabbit.__proto__ === Object` |

1-js/09-classes/03-static-properties-methods/3-class-extend-object/task.md

@@ -0,0 +1,42 @@
+importance: 3
+
+---
+
+# Class extends Object?
+
+As we know, all objects normally inherit from `Object.prototype` and get access to "generic" object methods like `hasOwnProperty` etc.
+
+For instance:
+
+```js run
+class Rabbit {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+let rabbit = new Rabbit("Rab");
+
+*!*
+// hasOwnProperty method is from Object.prototype
+alert( rabbit.hasOwnProperty('name') ); // true
+*/!*
+```
+
+But if we spell it out explicitly like `"class Rabbit extends Object"`, then the result would be different from a simple `"class Rabbit"`?
+
+What's the difference?
+
+Here's an example of such code (it doesn't work -- why? fix it?):
+
+```js
+class Rabbit extends Object {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+let rabbit = new Rabbit("Rab");
+
+alert( rabbit.hasOwnProperty('name') ); // Error
+```