From 2520987a7d5d7adb2c238e0e44b618913642c422 Mon Sep 17 00:00:00 2001 From: Daniel Cruz Date: Mon, 18 May 2020 01:20:40 -0500 Subject: [PATCH 1/3] Added nullish coalescing operator article --- .../12-nullish-coalescing-operator/article.md | 117 ++++++++++++++++++ .../1-loop-last-value/solution.md | 0 .../1-loop-last-value/task.md | 0 .../2-which-value-while/solution.md | 0 .../2-which-value-while/task.md | 0 .../3-which-value-for/solution.md | 0 .../3-which-value-for/task.md | 0 .../4-for-even/solution.md | 0 .../4-for-even/task.md | 0 .../5-replace-for-while/solution.md | 0 .../5-replace-for-while/task.md | 0 .../6-repeat-until-correct/solution.md | 0 .../6-repeat-until-correct/task.md | 0 .../7-list-primes/solution.md | 0 .../7-list-primes/task.md | 0 .../{12-while-for => 13-while-for}/article.md | 0 .../1-rewrite-switch-if-else/solution.md | 0 .../1-rewrite-switch-if-else/task.md | 0 .../2-rewrite-if-switch/solution.md | 0 .../2-rewrite-if-switch/task.md | 0 .../{13-switch => 14-switch}/article.md | 0 .../1-if-else-required/solution.md | 0 .../1-if-else-required/task.md | 0 .../solution.md | 0 .../2-rewrite-function-question-or/task.md | 0 .../3-min/solution.md | 0 .../3-min/task.md | 0 .../4-pow/solution.md | 0 .../4-pow/task.md | 0 .../article.md | 0 .../function_basics.png | Bin .../function_basics@2x.png | Bin .../1-rewrite-arrow/solution.md | 0 .../1-rewrite-arrow/task.md | 0 .../article.md | 0 .../article.md | 0 36 files changed, 117 insertions(+) create mode 100644 1-js/02-first-steps/12-nullish-coalescing-operator/article.md rename 1-js/02-first-steps/{12-while-for => 13-while-for}/1-loop-last-value/solution.md (100%) rename 1-js/02-first-steps/{12-while-for => 13-while-for}/1-loop-last-value/task.md (100%) rename 1-js/02-first-steps/{12-while-for => 13-while-for}/2-which-value-while/solution.md (100%) rename 1-js/02-first-steps/{12-while-for => 13-while-for}/2-which-value-while/task.md (100%) rename 1-js/02-first-steps/{12-while-for => 13-while-for}/3-which-value-for/solution.md (100%) rename 1-js/02-first-steps/{12-while-for => 13-while-for}/3-which-value-for/task.md (100%) rename 1-js/02-first-steps/{12-while-for => 13-while-for}/4-for-even/solution.md (100%) rename 1-js/02-first-steps/{12-while-for => 13-while-for}/4-for-even/task.md (100%) rename 1-js/02-first-steps/{12-while-for => 13-while-for}/5-replace-for-while/solution.md (100%) rename 1-js/02-first-steps/{12-while-for => 13-while-for}/5-replace-for-while/task.md (100%) rename 1-js/02-first-steps/{12-while-for => 13-while-for}/6-repeat-until-correct/solution.md (100%) rename 1-js/02-first-steps/{12-while-for => 13-while-for}/6-repeat-until-correct/task.md (100%) rename 1-js/02-first-steps/{12-while-for => 13-while-for}/7-list-primes/solution.md (100%) rename 1-js/02-first-steps/{12-while-for => 13-while-for}/7-list-primes/task.md (100%) rename 1-js/02-first-steps/{12-while-for => 13-while-for}/article.md (100%) rename 1-js/02-first-steps/{13-switch => 14-switch}/1-rewrite-switch-if-else/solution.md (100%) rename 1-js/02-first-steps/{13-switch => 14-switch}/1-rewrite-switch-if-else/task.md (100%) rename 1-js/02-first-steps/{13-switch => 14-switch}/2-rewrite-if-switch/solution.md (100%) rename 1-js/02-first-steps/{13-switch => 14-switch}/2-rewrite-if-switch/task.md (100%) rename 1-js/02-first-steps/{13-switch => 14-switch}/article.md (100%) rename 1-js/02-first-steps/{14-function-basics => 15-function-basics}/1-if-else-required/solution.md (100%) rename 1-js/02-first-steps/{14-function-basics => 15-function-basics}/1-if-else-required/task.md (100%) rename 1-js/02-first-steps/{14-function-basics => 15-function-basics}/2-rewrite-function-question-or/solution.md (100%) rename 1-js/02-first-steps/{14-function-basics => 15-function-basics}/2-rewrite-function-question-or/task.md (100%) rename 1-js/02-first-steps/{14-function-basics => 15-function-basics}/3-min/solution.md (100%) rename 1-js/02-first-steps/{14-function-basics => 15-function-basics}/3-min/task.md (100%) rename 1-js/02-first-steps/{14-function-basics => 15-function-basics}/4-pow/solution.md (100%) rename 1-js/02-first-steps/{14-function-basics => 15-function-basics}/4-pow/task.md (100%) rename 1-js/02-first-steps/{14-function-basics => 15-function-basics}/article.md (100%) rename 1-js/02-first-steps/{14-function-basics => 15-function-basics}/function_basics.png (100%) rename 1-js/02-first-steps/{14-function-basics => 15-function-basics}/function_basics@2x.png (100%) rename 1-js/02-first-steps/{15-function-expressions-arrows => 16-function-expressions-arrows}/1-rewrite-arrow/solution.md (100%) rename 1-js/02-first-steps/{15-function-expressions-arrows => 16-function-expressions-arrows}/1-rewrite-arrow/task.md (100%) rename 1-js/02-first-steps/{15-function-expressions-arrows => 16-function-expressions-arrows}/article.md (100%) rename 1-js/02-first-steps/{16-javascript-specials => 18-javascript-specials}/article.md (100%) diff --git a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md new file mode 100644 index 000000000..9b1e0a869 --- /dev/null +++ b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md @@ -0,0 +1,117 @@ +# Nullish coalescing operator '??' + +[recent browser="new"] + +El _nullish coalescing operator_ `??` brinda una sintáxis corta para seleccionar la primera variable "definida" de una lista. + +El resultado de `a ?? b` es: +- `a` si esta no es `null` o `undefined`, +- `b`, en el caso contrario. + +Entonces, `x = a ?? b` es la versión corta de: + +```js +x = (a !== null && a !== undefined) ? a : b; +``` + +Aquí un ejemplo más detallado. + +Pensemos que tenemos un `firstName`, `lastName` o `nickName`, todos ellos opcionales. + +Escojamos el que esté definido y mostrémoslo (o mostremos "Anonymous" si ninguno está definido): + +```js run +let firstName = null; +let lastName = null; +let nickName = "Supercoder"; + +// Muestra la primera variable que no sea null/undefined +alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder +``` + +## Comparación con || + +Esto es muy similiar al operador OR `||`. De hecho, podemos reemplazar `??` con `||` en el código anterior y obtener el mismo resultado. + +La gran diferencia es que: +- `||` retorna el primer valor _*truthy*_. +- `??` retorna el primer valor _*defined*_. + +Esto es de suma importancia cuando queremos tratar `null/undefined` diferente de `0`. + +Por ejemplo: + +```js +height = height ?? 100; +``` + +Esto le asigna `100` a `height` si esta no está definida. En cambio si `height` es `0`, esta se mantiene "tal cual". + +Comparémoslo con `||`: + +```js run +let height = 0; + +alert(height || 100); // 100 +alert(height ?? 100); // 0 +``` + +En este caso, `height || 100` maneja `height` con un valor de `0` como no asignada, al igual que con `null`, `undefined` o cualquier otro valor _falsy_, dependiendo de la situación, esto puede ser incorrecto. + +En el caso de `height ?? 100` este retorna `100` solo si `height` es exactamente `null` o `undefined`. + +## Precedencia + +La precedencia del operador `??` es bastante baja: `7` en la[Tabla MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Operator_Precedence#Table). + +Es más baja que en la mayoría de los operadores y un poco más alta que `=` y `?`. + +Así que si necesitas usar `??` en una expresión compleja, considera añadir paréntesis: + +```js run +let height = null; +let width = null; + +// Importante: usar paréntesis +let area = (height ?? 100) * (width ?? 50); + +alert(area); // 5000 +``` + +Caso contrario, si omitimos los paréntesis, entonces `*` tiene una mayor precedencia y se ejecutará primero. Eso sería lo mismo que: + +```js +// Incorrecto +let area = height ?? (100 * width) ?? 50; +``` + +Existe también una limitación a nivel del lenguaje. Por razones de seguridad, está prohibido usar `??` junto con los operadores `&&` y `||`. + +El código siguiente desencadena un error de sintáxis: + +```js run +let x = 1 && 2 ?? 3; // Syntax error +``` + +La limitación es sin duda alguna debatible, pero por ciertas razones fue agregada a la especificación del lenguaje. + +Usa paréntesis explícitos para solucionarlo: + +```js run +let x = (1 && 2) ?? 3; // Funciona +alert(x); // 2 +``` + +## Resumen + +- El _nullish coalescing operator_ `??` proveé una manera concisa de seleccionar un valor "definido" de una lista. + + Es usado para asignar valores por defecto a las variables: + + ```js + // Asignar height=100, si height es null o undefined + height = height ?? 100; + ``` + +- El operador `??` tiene una precedencia muy baja, un poco más alta que `?` y `=`. +- Está prohibido su uso con `||` y `&&` sin paréntesis explícitos. \ No newline at end of file diff --git a/1-js/02-first-steps/12-while-for/1-loop-last-value/solution.md b/1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/1-loop-last-value/solution.md rename to 1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md diff --git a/1-js/02-first-steps/12-while-for/1-loop-last-value/task.md b/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/1-loop-last-value/task.md rename to 1-js/02-first-steps/13-while-for/1-loop-last-value/task.md diff --git a/1-js/02-first-steps/12-while-for/2-which-value-while/solution.md b/1-js/02-first-steps/13-while-for/2-which-value-while/solution.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/2-which-value-while/solution.md rename to 1-js/02-first-steps/13-while-for/2-which-value-while/solution.md diff --git a/1-js/02-first-steps/12-while-for/2-which-value-while/task.md b/1-js/02-first-steps/13-while-for/2-which-value-while/task.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/2-which-value-while/task.md rename to 1-js/02-first-steps/13-while-for/2-which-value-while/task.md diff --git a/1-js/02-first-steps/12-while-for/3-which-value-for/solution.md b/1-js/02-first-steps/13-while-for/3-which-value-for/solution.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/3-which-value-for/solution.md rename to 1-js/02-first-steps/13-while-for/3-which-value-for/solution.md diff --git a/1-js/02-first-steps/12-while-for/3-which-value-for/task.md b/1-js/02-first-steps/13-while-for/3-which-value-for/task.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/3-which-value-for/task.md rename to 1-js/02-first-steps/13-while-for/3-which-value-for/task.md diff --git a/1-js/02-first-steps/12-while-for/4-for-even/solution.md b/1-js/02-first-steps/13-while-for/4-for-even/solution.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/4-for-even/solution.md rename to 1-js/02-first-steps/13-while-for/4-for-even/solution.md diff --git a/1-js/02-first-steps/12-while-for/4-for-even/task.md b/1-js/02-first-steps/13-while-for/4-for-even/task.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/4-for-even/task.md rename to 1-js/02-first-steps/13-while-for/4-for-even/task.md diff --git a/1-js/02-first-steps/12-while-for/5-replace-for-while/solution.md b/1-js/02-first-steps/13-while-for/5-replace-for-while/solution.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/5-replace-for-while/solution.md rename to 1-js/02-first-steps/13-while-for/5-replace-for-while/solution.md diff --git a/1-js/02-first-steps/12-while-for/5-replace-for-while/task.md b/1-js/02-first-steps/13-while-for/5-replace-for-while/task.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/5-replace-for-while/task.md rename to 1-js/02-first-steps/13-while-for/5-replace-for-while/task.md diff --git a/1-js/02-first-steps/12-while-for/6-repeat-until-correct/solution.md b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/6-repeat-until-correct/solution.md rename to 1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md diff --git a/1-js/02-first-steps/12-while-for/6-repeat-until-correct/task.md b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/6-repeat-until-correct/task.md rename to 1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md diff --git a/1-js/02-first-steps/12-while-for/7-list-primes/solution.md b/1-js/02-first-steps/13-while-for/7-list-primes/solution.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/7-list-primes/solution.md rename to 1-js/02-first-steps/13-while-for/7-list-primes/solution.md diff --git a/1-js/02-first-steps/12-while-for/7-list-primes/task.md b/1-js/02-first-steps/13-while-for/7-list-primes/task.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/7-list-primes/task.md rename to 1-js/02-first-steps/13-while-for/7-list-primes/task.md diff --git a/1-js/02-first-steps/12-while-for/article.md b/1-js/02-first-steps/13-while-for/article.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/article.md rename to 1-js/02-first-steps/13-while-for/article.md diff --git a/1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/solution.md b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md similarity index 100% rename from 1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/solution.md rename to 1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md diff --git a/1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/task.md b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/task.md similarity index 100% rename from 1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/task.md rename to 1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/task.md diff --git a/1-js/02-first-steps/13-switch/2-rewrite-if-switch/solution.md b/1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md similarity index 100% rename from 1-js/02-first-steps/13-switch/2-rewrite-if-switch/solution.md rename to 1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md diff --git a/1-js/02-first-steps/13-switch/2-rewrite-if-switch/task.md b/1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md similarity index 100% rename from 1-js/02-first-steps/13-switch/2-rewrite-if-switch/task.md rename to 1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md diff --git a/1-js/02-first-steps/13-switch/article.md b/1-js/02-first-steps/14-switch/article.md similarity index 100% rename from 1-js/02-first-steps/13-switch/article.md rename to 1-js/02-first-steps/14-switch/article.md diff --git a/1-js/02-first-steps/14-function-basics/1-if-else-required/solution.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/1-if-else-required/solution.md rename to 1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md diff --git a/1-js/02-first-steps/14-function-basics/1-if-else-required/task.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/1-if-else-required/task.md rename to 1-js/02-first-steps/15-function-basics/1-if-else-required/task.md diff --git a/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md rename to 1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md diff --git a/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/task.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/task.md rename to 1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md diff --git a/1-js/02-first-steps/14-function-basics/3-min/solution.md b/1-js/02-first-steps/15-function-basics/3-min/solution.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/3-min/solution.md rename to 1-js/02-first-steps/15-function-basics/3-min/solution.md diff --git a/1-js/02-first-steps/14-function-basics/3-min/task.md b/1-js/02-first-steps/15-function-basics/3-min/task.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/3-min/task.md rename to 1-js/02-first-steps/15-function-basics/3-min/task.md diff --git a/1-js/02-first-steps/14-function-basics/4-pow/solution.md b/1-js/02-first-steps/15-function-basics/4-pow/solution.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/4-pow/solution.md rename to 1-js/02-first-steps/15-function-basics/4-pow/solution.md diff --git a/1-js/02-first-steps/14-function-basics/4-pow/task.md b/1-js/02-first-steps/15-function-basics/4-pow/task.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/4-pow/task.md rename to 1-js/02-first-steps/15-function-basics/4-pow/task.md diff --git a/1-js/02-first-steps/14-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/article.md rename to 1-js/02-first-steps/15-function-basics/article.md diff --git a/1-js/02-first-steps/14-function-basics/function_basics.png b/1-js/02-first-steps/15-function-basics/function_basics.png similarity index 100% rename from 1-js/02-first-steps/14-function-basics/function_basics.png rename to 1-js/02-first-steps/15-function-basics/function_basics.png diff --git a/1-js/02-first-steps/14-function-basics/function_basics@2x.png b/1-js/02-first-steps/15-function-basics/function_basics@2x.png similarity index 100% rename from 1-js/02-first-steps/14-function-basics/function_basics@2x.png rename to 1-js/02-first-steps/15-function-basics/function_basics@2x.png diff --git a/1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/solution.md b/1-js/02-first-steps/16-function-expressions-arrows/1-rewrite-arrow/solution.md similarity index 100% rename from 1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/solution.md rename to 1-js/02-first-steps/16-function-expressions-arrows/1-rewrite-arrow/solution.md diff --git a/1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/task.md b/1-js/02-first-steps/16-function-expressions-arrows/1-rewrite-arrow/task.md similarity index 100% rename from 1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/task.md rename to 1-js/02-first-steps/16-function-expressions-arrows/1-rewrite-arrow/task.md diff --git a/1-js/02-first-steps/15-function-expressions-arrows/article.md b/1-js/02-first-steps/16-function-expressions-arrows/article.md similarity index 100% rename from 1-js/02-first-steps/15-function-expressions-arrows/article.md rename to 1-js/02-first-steps/16-function-expressions-arrows/article.md diff --git a/1-js/02-first-steps/16-javascript-specials/article.md b/1-js/02-first-steps/18-javascript-specials/article.md similarity index 100% rename from 1-js/02-first-steps/16-javascript-specials/article.md rename to 1-js/02-first-steps/18-javascript-specials/article.md From 0b1388224e00e5c0803aaf3b078bdbbabe7031c0 Mon Sep 17 00:00:00 2001 From: Daniel Cruz Date: Mon, 18 May 2020 01:23:20 -0500 Subject: [PATCH 2/3] Fixed missing space --- 1-js/02-first-steps/12-nullish-coalescing-operator/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md index 9b1e0a869..236350044 100644 --- a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md +++ b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md @@ -62,7 +62,7 @@ En el caso de `height ?? 100` este retorna `100` solo si `height` es exactamente ## Precedencia -La precedencia del operador `??` es bastante baja: `7` en la[Tabla MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Operator_Precedence#Table). +La precedencia del operador `??` es bastante baja: `7` en la [Tabla MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Operator_Precedence#Table). Es más baja que en la mayoría de los operadores y un poco más alta que `=` y `?`. From 1b97655bf858b7da093660ee93536519b85a73b0 Mon Sep 17 00:00:00 2001 From: Daniel Cruz Date: Mon, 18 May 2020 01:24:52 -0500 Subject: [PATCH 3/3] Fixed missplaced word --- 1-js/02-first-steps/12-nullish-coalescing-operator/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md index 236350044..2621cf970 100644 --- a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md +++ b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md @@ -87,7 +87,7 @@ let area = height ?? (100 * width) ?? 50; Existe también una limitación a nivel del lenguaje. Por razones de seguridad, está prohibido usar `??` junto con los operadores `&&` y `||`. -El código siguiente desencadena un error de sintáxis: +El siguiente código desencadena un error de sintáxis: ```js run let x = 1 && 2 ?? 3; // Syntax error