Merge pull request #293 from vplentinax/syncJuly-5

Sincronización 5 Julio

Author: EzequielCaste

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("Conejo Blanco", 10); // Error: esto no está definido.
 
 Vaya! Tenemos un error. Ahora no podemos crear conejos. ¿Qué salió mal?
 
-La respuesta corta es: los constructores en las clases heredadas deben llamar a `super(...)`, y (!) Hacerlo antes de usar `this`.
+La respuesta corta es: 
+- **Los constructores en las clases heredadas deben llamar a `super(...)`, y (!) hacerlo antes de usar `this`**.
 
 ...¿Pero por qué? ¿Que está pasando aqui? De hecho, el requisito parece extraño.
 
@@ -243,7 +244,7 @@ Esa etiqueta afecta su comportamiento con `new`.
 - Cuando una función regular se ejecuta con `new`, crea un objeto vacío y lo asigna a `this`.
 - Pero cuando se ejecuta un constructor derivado, no hace esto. Espera que el constructor padre haga este trabajo.
 
-Por lo tanto, un constructor derivado debe llamar a `super` para ejecutar su constructor padre (no derivado), de lo contrario no se creará el objeto para `this`. Y obtendremos un error.
+**Por lo tanto, un constructor derivado debe llamar a `super` para ejecutar su constructor padre (no derivado), de lo contrario no se creará el objeto para `this`. Y obtendremos un error.**
 
 Para que el constructor `Rabbit` funcione, necesita llamar a `super()` antes de usar `this`, como aquí:
 
@@ -277,7 +278,91 @@ alert(rabbit.name); // Conejo Blanco
 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.
 
 ## [[HomeObject]]: el `super` interno 
 

1-js/11-async/05-promise-api/article.md

@@ -179,10 +179,10 @@ If the browser doesn't support `Promise.allSettled`, it's easy to polyfill:
 if(!Promise.allSettled) {
   Promise.allSettled = function(promises) {
     return Promise.all(promises.map(p => Promise.resolve(p).then(value => ({
-      state: 'fulfilled',
+      status: 'fulfilled',
       value
     }), reason => ({
-      state: 'rejected',
+      status: 'rejected',
       reason
     }))));
   };
@@ -191,7 +191,7 @@ if(!Promise.allSettled) {
 
 In this code, `promises.map` takes input values, turns them into promises (just in case a non-promise was passed) with `p => Promise.resolve(p)`, and then adds `.then` handler to every one.
 
-That handler turns a successful result `value` into `{state:'fulfilled', value}`, and an error `reason` into `{state:'rejected', reason}`. That's exactly the format of `Promise.allSettled`.
+That handler turns a successful result `value` into `{status:'fulfilled', value}`, and an error `reason` into `{status:'rejected', reason}`. That's exactly the format of `Promise.allSettled`.
 
 Now we can use `Promise.allSettled` to get the results of *all* given promises, even if some of them reject.
 
@@ -277,7 +277,7 @@ There are 5 static methods of `Promise` class:
 
 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:
-    - `state`: `"fulfilled"` or `"rejected"`
+    - `status`: `"fulfilled"` or `"rejected"`
     - `value` (if fulfilled) or `reason` (if rejected).
 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.