Merge pull request #465 from joaquinelio/susy201217

Susy201217

Author: joaquinelio

1-js/01-getting-started/1-intro/article.md

@@ -106,13 +106,13 @@ Las herramientas modernas hacen la conversión (Transpilation) muy rápida y tra
 
 Ejemplos de tales lenguajes:
 
-- [CoffeeScript](http://coffeescript.org/) Es una "sintaxis azucarada" [syntactic sugar](https://es.wikipedia.org/wiki/Az%C3%BAcar_sint%C3%A1ctico) para JavaScript. Introduce una sintaxis corta, permitiéndonos escribir un código mas claro y preciso. Usualmente desarrolladores de Ruby prefieren este lenguaje.
+- [CoffeeScript](http://coffeescript.org/) Es una "sintaxis azucarada" para JavaScript. Introduce una sintaxis corta, permitiéndonos escribir un código mas claro y preciso. Usualmente desarrolladores de Ruby prefieren este lenguaje.
 - [TypeScript](http://www.typescriptlang.org/) se concentra en agregar "tipado estricto" ("strict data typing") para simplificar el desarrollo y soporte de sistemas complejos. Es desarrollado por Microsoft.
 -[FLow](https://flow.org/) también agrega la escritura de datos, pero de una manera diferente. Desarrollado por Facebook.
 - [Dart](https://www.dartlang.org/) es un lenguaje independiente que tiene su propio motor que se ejecuta en entornos que no son de navegador (como aplicaciones móviles), pero que también se puede convertir/transpilar a JavaScript. Desarrollado por Google.
 - [Brython](https://brython.info/) es un transpilador de Python a JavaScript que permite escribir aplicaciones en Python puro sin JavaScript.
 
-Hay mas. Por supuesto, incluso si nosotros usamos alguno de estos lenguajes, deberíamos conocer también JavaScript para realmente entender qué estamos haciendo.
+Hay más. Por supuesto, incluso si nosotros usamos alguno de estos lenguajes, deberíamos conocer también JavaScript para realmente entender qué estamos haciendo.
 
 ## Resumen
 

1-js/02-first-steps/08-operators/article.md

@@ -106,6 +106,11 @@ alert(2 + 2 + '1' ); // "41" y no "221"
 
 Aquí, los operandores trabajan uno después de otro. El primer `+` suma dos números entonces devuelve `4`, luego el siguiente `+` le agrega la cadena `1`, así que se evalúa como `4 + '1' = 41`.
 
+```js run
+alert('1' + 2 + 2); // "122", no es "14"
+```
+Aquí el primer operando es una cadena, el compilador trata los otros dos operandos como cadenas también. El `2` es concatenado a `'1'`, entonces es como `'1' + 2 = "12"` y `"12" + 2 = "122"`.
+
 El binario `+` es el único operador que soporta cadenas en esa forma. Otros operadores matemáticos trabajan solamente con números y siempre convierten sus operandos a números.
 
 Por ejemplo, resta y división:

1-js/04-object-basics/02-object-copy/article.md

@@ -1,6 +1,6 @@
 # Referencias de objetos y copia
 
-Una de las diferencias fundamentales entre objetos y primitivos es que los objetos son almacenados y copiados "por referencia", en cambio los primitivos: strings, number, boolean; son asignados y copiados "como un valor completo".
+Una de las diferencias fundamentales entre objetos y primitivos es que los objetos son almacenados y copiados "por referencia", en cambio los primitivos: strings, number, boolean, etc.; son asignados y copiados "como un valor completo".
 
 Esto es fácil de entender si miramos un poco "bajo cubierta" de lo que pasa cuando copiamos por valor.
 
@@ -37,13 +37,13 @@ Y así es como se almacena en la memoria:
 
 El objeto es almacenado en algún lugar de la memoria (a la derecha de la imagen), mientras que la variable `user` (a la izquierda) tiene una "referencia" a él.
 
-Podemos pensar de una variable objeto, como `user`, como una hoja de papel con su dirección.
+Podemos pensar de una variable objeto, como `user`, como una hoja de papel con la  dirección del objeto en él.
 
 Cuando ejecutamos acciones con el objeto, por ejemplo tomar una propiedad `user.name`, el motor JavaScript busca aquella dirección y ejecuta la operación en el objeto mismo.
 
 Ahora, por qué esto es importante.
 
-**Cuando una variable de objeto es copiada -- la referencia es copiada, el objeto no es duplicado.**
+**Cuando una variable de objeto es copiada, se copia solo la referencia. El objeto no es duplicado.**
 
 Por ejemplo:
 
@@ -73,7 +73,7 @@ admin.name = 'Pete'; // cambiado por la referencia "admin"
 alert(*!*user.name*/!*); // 'Pete', los cambios se ven desde la referencia "user"
 ```
 
-Es como si tuviéramos un gabinete con dos llaves y usáramos una de ellas (`admin`) para acceder a él. Si más tarde usamos la llave (`user`), podemos ver los cambios.
+Es como si tuviéramos un gabinete con dos llaves y usáramos una de ellas (`admin`) para acceder a él y hacer cambios. Si más tarde usamos la llave (`user`), estaríamos abriendo el mismo gabinete y accediendo al contenido cambiado.
 
 ## Comparación por referencia
 

1-js/04-object-basics/07-optional-chaining/article.md

@@ -9,17 +9,21 @@ El encadenamiento opcional `?.` es una forma a prueba de errores para acceder a
 
 Si acaba de comenzar a leer el tutorial y aprender JavaScript, quizás el problema aún no lo haya tocado, pero es bastante común.
 
-Por ejemplo, algunos de nuestros usuarios tienen direcciones, pero pocos no las proporcionaron. Entonces no podemos leer con seguridad `user.address.street`:
+Como ejemplo, digamos que tenemos objetos `user` que contienen información de nuestros usuarios. 
 
-En tal cao, cuando intentamos obtener `user.address.street`, obtendremos un error:
+La mayoría de nuestros usuarios tienen la dirección en la propiedad `user.address`, con la calle en `user.address.street`, pero algunos no la proporcionaron.
+
+En tal caso, cuando intentamos obtener `user.address.street`en un usuario sin dirección obtendremos un error:
 
 ```js run
 let user = {}; // usuario sin propiedad "address"
 
 alert(user.address.street); // Error!
 ```
 
-Este es el resultado esperado, JavaScript funciona así, pero en muchos casos prácticos preferiríamos obtener `undefined` en lugar del error (sin "street").
+Este es el resultado esperado. JavaScript funciona así, como `user.address` es `undefined`, el intento de obtener `user.address.street` falla dando un error.
+
+En muchos casos prácticos preferiríamos obtener `undefined` en lugar del error (dando a entender "sin calle")
 
 ...Y otro ejemplo.  En el desarrollo web, necesitamos obtener información sobre un elemento en la página, pero a veces este no existe:
 
@@ -28,33 +32,67 @@ Este es el resultado esperado, JavaScript funciona así, pero en muchos casos pr
 let html = document.querySelector('.my-element').innerHTML;
 ```
 
-Antes de que apareciera `?.` en el lenguaje, se usaba el operador `&&` para solucionarlo.
+Una vez más, si el elemento no existe, obtendremos un error al acceder al `.innerHTML` de `null`. Y en algunos casos, cuando la ausencia del elemento es normal, quisiéramos evitar el error y simplemente aceptar `html = null` como resultado.
 
-Por ejemplo:
+¿Cómo podemos hacer esto?
 
-```js run
+La solución obvia sería chequear el valor usando `if` o el operador condicional `?` antes de usar la propiedad:
+
+```js 
+let user = {};
+
+alert(user.address ? user.address.street : undefined);
+```
+
+Esto funciona, no hay error... Pero es bastante poco elegante. Como puedes ver, `"user.address"` aparece dos veces en el código. En propiedades anidadas más profundamente, esto se vuelve un problema porque se requerirán más repeticiones.
+
+Ejemplo: Tratemos de obtener `user.address.street.name`.
+
+Necesitamos chequear `user.address` y `user.address.street`:
+
+```js
 let user = {}; // El usuario no tiene dirección
 
-alert( user.address && user.address.street && user.address.street.name ); // undefined (no error)
+alert(user.address ? user.address.street ? user.address.street.name : null : null);
 ```
 
-Poniendo AND en el camino completo a la propiedad asegura que todos los componentes existen (si no, la evaluación se detiene), pero es engorroso de escribir.
+Esto es horrible, podemos tener problemas para siquiera entender tal código.
+
+Ni lo intentes, hay una mejor manera de escribirlo usando el operador  `&&`:
+
+```js run
+let user = {}; // usuario sin dirección
+
+alert( user.address && user.address.street && user.address.street.name ); // undefined (sin error)
+```
+
+Poniendo AND en el camino completo a la propiedad asegura que todos los componentes existen (si no, la evaluación se detiene), pero no es lo ideal.
+
+Como puedes ver, los nombres de propiedad aún están duplicados en el código. Por ejemplo en el código de arriba `user.address` aparece tres veces.
+
+Es por ello que el encadenamiento opcional `?.` fue agregado al lenguaje. ¡Para resolver este problema de una vez por todas!
 
 ## Encadenamiento opcional
 
-El encadenamiento opcional `?.` detiene la evaluación y devuelve` undefined` si la parte anterior a `?.` es` undefined` o `null`.
+El encadenamiento opcional `?.` detiene la evaluación si la parte anterior a `?.` es ` undefined` o `null` y devuelve esa parte. 
 
 **De aquí en adelante en este artículo, por brevedad, diremos que algo "existe" si no es `null` o `undefined`.**
 
-Aquí está la forma segura de acceder a `user.address.street`:
+En otras palabras, `value?.prop`:
+- es lo mismo que `value.prop` si `value` existe,
+- de otro modo (cuando `value` es `undefined/null`) devuelve `undefined`.
+
+Aquí está la forma segura de acceder a `user.address.street` usando `?.`:
 
 ```js run
 let user = {}; // El usuario no tiene dirección
 
 alert( user?.address?.street ); // undefined (no hay error)
 ```
 
-Leer la dirección con `user? .Address` funciona incluso si el objeto `user` no existe:
+El código es corto y claro, no hay duplicación en absoluto
+
+Leer la dirección con `user?.Address` funciona incluso si el objeto `user` no existe:
 
 ```js run
 let user = null;
@@ -65,14 +103,12 @@ alert( user?.address.street ); // undefined
 
 Tenga en cuenta: la sintaxis `?.` hace opcional el valor delante de él, pero no más allá.
 
-En el ejemplo anterior, `user?.` permite que solo `user` sea `null/undefined`.
-
-Por otro lado, si `user` existe, entonces debe tener la propiedad `user.address`, de lo contrario `user?.Address.street` da un error en el segundo punto.
+Por ejemplo en `user?.address.street.name` el `?.` permite a `user` ser `null/undefined`, pero es todo lo que hace. El resto de las propiedades son accedidas de la manera normal.  Si queremos que algunas de ellas sean opcionales, necesitamos reemplazar más `.` con `?.`.
 
 ```warn header="No abuses del encadenamiento opcional"
 Deberíamos usar `?.` solo donde está bien que algo no exista.
 
-Por ejemplo, si de acuerdo con nuestra lógica de codificación, el objeto `user` debe estar allí, pero `address` es opcional, entonces `user.address?.Street` sería mejor.
+Por ejemplo, si de acuerdo con nuestra lógica de codificación, el objeto `user` debe estar allí, pero `address` es opcional, entonces deberíamos escribir `user.address?.street` y no `user?.address?.street`.
 
 Entonces, si `user` no está definido debido a un error, lo sabremos y lo arreglaremos. De lo contrario, los errores de codificación pueden silenciarse donde no sea apropiado y volverse más difíciles de depurar.
 ```
@@ -84,7 +120,7 @@ Si no hay una variable `user` declarada, entonces `user?.anything` provocará un
 // ReferenceError: user no está definido
 user?.address;
 ```
-Debe haber `let/const/var user`. El encadenamiento opcional solo funciona para variables declaradas.
+La variable debe ser declarada (con `let/const/var user` o como parámetro de función). El encadenamiento opcional solo funciona para variables declaradas.
 ````
 
 ## Short-circuiting (Cortocircuitos)
@@ -108,7 +144,7 @@ alert(x); // 0, el valor no se incrementa
 
 El encadenamiento opcional `?.` no es un operador, sino una construcción de sintaxis especial, que también funciona con funciones y corchetes.
 
-Por ejemplo, `?.()` Se usa para llamar a una función que puede no existir.
+Por ejemplo, `?.()` se usa para llamar a una función que puede no existir.
 
 En el siguiente código, algunos de nuestros usuarios tienen el método `admin`, y otros no:
 
@@ -126,7 +162,7 @@ userAdmin.admin?.(); // I am admin
 */!*
 
 *!*
-userGuest.admin?.(); // nothing (no such method)
+userGuest.admin?.(); // nada (no existe tal método)
 */!*
 ```
 

1-js/05-data-types/03-string/article.md

@@ -50,7 +50,7 @@ let guestList = "Invitados:  // Error: Unexpected token ILLEGAL
 
 Las comillas simples y dobles provienen de la creación de lenguaje en tiempos ancestrales, cuando la necesidad de múltiples líneas no era tomada en cuenta. Los backticks aparecieron mucho después y por ende son más versátiles.
 
-Los backticks además nos permiten especificar una "función de plantilla" antes del primer backtick. La sintaxis es: <code>func&#96;string&#96;</code>. La función `func` es llamada automáticamente, recibe el string y la expresión insertada y los puede procesar. Puedes leer más sobre esto en [docs](mdn:/JavaScript/Reference/Template_literals#Tagged_template_literals). Eso se llama "plantillas etiquetadas". Esta característica hace que sea más fácil rodear strings en plantillas personalizadas u otra funcionalidad, pero es raramente usada.
+Los backticks además nos permiten especificar una "función de plantilla" antes del primer backtick. La sintaxis es: <code>func&#96;string&#96;</code>. La función `func` es llamada automáticamente, recibe el string y la expresión insertada y los puede procesar. Eso se llama "plantillas etiquetadas". Esta característica hace que sea más fácil implementar plantillas personalizadas, pero es raramente usada en la práctica. Puedes leer más sobre esto en [docs](mdn:/JavaScript/Reference/Template_literals#Tagged_templates). 
 
 ## Caracteres especiales
 
@@ -81,7 +81,7 @@ Esta es la lista completa:
 | Carácter | Descripción |
 |-----------|-------------|
 |`\n`|Nueva línea|
-|`\r`|Carriage return (retorno de carro): No se usa solo. Los archivos de texto de Windows usan una combinaión de dos caracteres `\r\n` para representar un corte de línea. |
+|`\r`|Retorno de carro: No se usa aislado. Los archivos de texto de Windows usan una combinación de dos caracteres `\r\n` para representar un corte de línea. |
 |`\'`, `\"`|Comillas|
 |`\\`|Barra invertida|
 |`\t`|Tabulación|
@@ -608,7 +608,7 @@ En muchos idiomas hay símbolos que se componen del carácter base con una marca
 
 Por ejemplo, la letra `a` puede ser el carácter base para:` àáâäãåā`. Los caracteres "compuestos" más comunes tienen su propio código en la tabla UTF-16. Pero no todos ellos, porque hay demasiadas combinaciones posibles.
 
-Para mantener composiciones arbitrarias, UTF-16 nos permite usar varios caracteres unicode. El carácter base y uno o varios caracteres de "marca" que lo "decoran".
+Para mantener composiciones arbitrarias, UTF-16 nos permite usar varios caracteres Unicode. El carácter base y uno o varios caracteres de "marca" que lo "decoran".
 
 Por ejemplo, si tenemos `S` seguido del carácter especial" punto arriba "(código` \ u0307`), se muestra como Ṡ.
 
@@ -626,7 +626,7 @@ Por ejemplo:
 alert('S\u0307\u0323'); // Ṩ
 ```
 
-Esto proporciona una gran flexibilidad, pero también un problema interesante: dos caracteres pueden verse visualmente iguales, pero estar representados con diferentes composiciones unicode.
+Esto proporciona una gran flexibilidad, pero también un problema interesante: dos caracteres pueden ser visualmente iguales, pero estar representados con diferentes composiciones Unicode.
 
 Por ejemplo:
 
@@ -639,7 +639,7 @@ alert( `s1: ${s1}, s2: ${s2}` );
 alert( s1 == s2 ); // false aunque los caracteres se ven idénticos (?!)
 ```
 
-Para resolver esto, existe un algoritmo de "normalización unicode" que lleva cada cadena a la forma "normal".
+Para resolver esto, existe un algoritmo de "normalización Unicode" que lleva cada cadena a la forma "normal".
 
 Este es implementado por [str.normalize()](mdn:js/String/normalize).
 
@@ -661,14 +661,14 @@ Si desea obtener más información sobre las reglas y variantes de normalizació
 
 ## Resumen
 
-- Existen 3 tipos de comillas. Los backticks permiten que una cadena abarque varias líneas e incorpore expresiones.
+- Existen 3 tipos de entrecomillado. Los backticks permiten que una cadena abarque varias líneas e incorporar expresiones `${…}`.
 - Strings en JavaScript son codificados usando UTF-16.
 - Podemos usar caracteres especiales como `\n` e insertar letras por su código unico usando `\u ... `.
-- Para obtener un caracter, usa: `[]`.
+- Para obtener un carácter, usa: `[]`.
 - Para obtener un substring, usa: `slice` o `substring`.
 - Para convertir un string en minúsculas/mayúsculas, usa: `toLowerCase/toUpperCase`.
 - Para buscar por un substring, usa: `indexOf`, o `includes/startsWith/endsWith` para checkeos simples.
-- Para comparar strings de acuerdo al languagje, usa: `localeCompare`, de otra manera seran comparados como códigos de caracter.
+- Para comparar strings de acuerdo al languagje, usa: `localeCompare`, de otra manera seran comparados como códigos de carácter.
 
 Existen varios otros métodos útiles en cadenas:
 

1-js/05-data-types/06-iterable/article.md

@@ -26,7 +26,7 @@ let range = {
 // for(let num of range) ... num=1,2,3,4,5
 ```
 
-Para hacer que el `range` sea iterable (y así permitir que `for..of` funcione) necesitamos agregar un método al objeto llamado `Symbol.iterator` (un símbolo incorporado especial usado solo para realizar esa función, proporcionar iterabilidad).
+Para hacer que el objeto `range` sea iterable (y así permitir que `for..of` funcione) necesitamos agregarle un método llamado `Symbol.iterator` (un símbolo incorporado especial usado solo para realizar esa función).
 
 1. Cuando se inicia el `for..of`, éste llama al método `Symbol.iterator` una vez (o genera un error si no lo encuentra). El método debe devolver un *iterador* --un objeto con el método `next()`.
 2.  En adelante, `for..of` trabaja *solo con ese objeto devuelto*.
@@ -295,7 +295,7 @@ alert( str.slice(1, 3) ); // garbage (dos piezas de diferentes pares sustitutos)
 Los objetos que se pueden usar en `for..of` se denominan *iterables*.
 
 - Técnicamente, los iterables deben implementar el método llamado `Symbol.iterator`.
-    - El resultado de `obj[Symbol.iterator]` se llama *iterador*. Maneja el proceso de iteración adicional.
+    - El resultado de `obj[Symbol.iterator]()` se llama *iterador*. Maneja el proceso de iteración adicional.
     - Un iterador debe tener el método llamado `next()` que devuelve un objeto `{done: Boolean, value: any}`, donde `done: true` denota el final de la iteración, de lo contrario, `value` es el siguiente valor.
 - El método `Symbol.iterator` se llama automáticamente por `for..of`, pero también podemos hacerlo directamente.
 - Los iterables integrados, como cadenas o matrices, también implementan `Symbol.iterator`.

1-js/05-data-types/07-map-set/article.md

@@ -69,6 +69,7 @@ Intentémoslo:
 
 ```js run
 let john = { name: "John" };
+let ben = { name: "Ben" };
 
 let visitsCountObj = {}; // intenta usar un objeto
 

1-js/05-data-types/12-json/article.md

@@ -276,6 +276,7 @@ name:         John
 name:         Alice
 place:        [object Object]
 number:       23
+occupiedBy: [object Object]
 */
 ```
 
@@ -328,6 +329,8 @@ alert(JSON.stringify(user, null, 2));
 */
 ```
 
+El tercer argumento puede ser también string. En ese caso el string será usado como indentación en lugar de un número de espacios.
+
 El argumento `space` es utilizado únicamente para propósitos de registro y agradable impresión.
 
 ## "toJSON" Personalizado

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

@@ -5,7 +5,7 @@
 
 Ahora el código:
 
-```js run
+```js demo run
 function sum(a) {
 
   let currentSum = a;

1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md

@@ -21,7 +21,7 @@ Aquí está el código para ello (usa el decorador debounce del [Lodash library]
 ```js
 let f = _.debounce(alert, 1000);
 
-f("a"); 
+f("a");
 setTimeout( () => f("b"), 200);
 setTimeout( () => f("c"), 500); 
 // la función debounce espera 1000 ms después de la última llamada y luego ejecuta: alert ("c")