diff --git a/1-js/02-first-steps/13-switch/article.md b/1-js/02-first-steps/13-switch/article.md deleted file mode 100644 index 258f24068..000000000 --- a/1-js/02-first-steps/13-switch/article.md +++ /dev/null @@ -1,172 +0,0 @@ -# The "switch" statement - -A `switch` statement can replace multiple `if` checks. - -It gives a more descriptive way to compare a value with multiple variants. - -## The syntax - -The `switch` has one or more `case` blocks and an optional default. - -It looks like this: - -```js no-beautify -switch(x) { - case 'value1': // if (x === 'value1') - ... - [break] - - case 'value2': // if (x === 'value2') - ... - [break] - - default: - ... - [break] -} -``` - -- The value of `x` is checked for a strict equality to the value from the first `case` (that is, `value1`) then to the second (`value2`) and so on. -- If the equality is found, `switch` starts to execute the code starting from the corresponding `case`, until the nearest `break` (or until the end of `switch`). -- If no case is matched then the `default` code is executed (if it exists). - -## An example - -An example of `switch` (the executed code is highlighted): - -```js run -let a = 2 + 2; - -switch (a) { - case 3: - alert( 'Too small' ); - break; -*!* - case 4: - alert( 'Exactly!' ); - break; -*/!* - case 5: - alert( 'Too large' ); - break; - default: - alert( "I don't know such values" ); -} -``` - -Here the `switch` starts to compare `a` from the first `case` variant that is `3`. The match fails. - -Then `4`. That's a match, so the execution starts from `case 4` until the nearest `break`. - -**If there is no `break` then the execution continues with the next `case` without any checks.** - -An example without `break`: - -```js run -let a = 2 + 2; - -switch (a) { - case 3: - alert( 'Too small' ); -*!* - case 4: - alert( 'Exactly!' ); - case 5: - alert( 'Too big' ); - default: - alert( "I don't know such values" ); -*/!* -} -``` - -In the example above we'll see sequential execution of three `alert`s: - -```js -alert( 'Exactly!' ); -alert( 'Too big' ); -alert( "I don't know such values" ); -``` - -````smart header="Any expression can be a `switch/case` argument" -Both `switch` and `case` allow arbitrary expressions. - -For example: - -```js run -let a = "1"; -let b = 0; - -switch (+a) { -*!* - case b + 1: - alert("this runs, because +a is 1, exactly equals b+1"); - break; -*/!* - - default: - alert("this doesn't run"); -} -``` -Here `+a` gives `1`, that's compared with `b + 1` in `case`, and the corresponding code is executed. -```` - -## Grouping of "case" - -Several variants of `case` which share the same code can be grouped. - -For example, if we want the same code to run for `case 3` and `case 5`: - -```js run no-beautify -let a = 2 + 2; - -switch (a) { - case 4: - alert('Right!'); - break; - -*!* - case 3: // (*) grouped two cases - case 5: - alert('Wrong!'); - alert("Why don't you take a math class?"); - break; -*/!* - - default: - alert('The result is strange. Really.'); -} -``` - -Now both `3` and `5` show the same message. - -The ability to "group" cases is a side-effect of how `switch/case` works without `break`. Here the execution of `case 3` starts from the line `(*)` and goes through `case 5`, because there's no `break`. - -## Type matters - -Let's emphasize that the equality check is always strict. The values must be of the same type to match. - -For example, let's consider the code: - -```js run -let arg = prompt("Enter a value?"); -switch (arg) { - case '0': - case '1': - alert( 'One or zero' ); - break; - - case '2': - alert( 'Two' ); - break; - - case 3: - alert( 'Never executes!' ); - break; - default: - alert( 'An unknown value' ); -} -``` - -1. For `0`, `1`, the first `alert` runs. -2. For `2` the second `alert` runs. -3. But for `3`, the result of the `prompt` is a string `"3"`, which is not strictly equal `===` to the number `3`. So we've got a dead code in `case 3`! The `default` variant will execute. diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md new file mode 100644 index 000000000..68aaa6b1a --- /dev/null +++ b/1-js/02-first-steps/14-switch/article.md @@ -0,0 +1,174 @@ +# La sentencia "switch" + +Una sentencia `switch` puede reemplazar múltiples condiciones `if`. + +Provee una mejor manera de comparar un valor con sus múltiples variantes. + + +## La sintaxis + +`switch` tiene uno o mas bloques `case`y un opcional `default`. + +Se ve de esta forma: + +```js no-beautify +switch(x) { + case 'valor1': // if (x === 'valor1') + ... + [break] + + case 'valor2': // if (x === 'valor2') + ... + [break] + + default: + ... + [break] +} +``` + +- El valor de `x` es comparado contra el valor del primer `case` (en este caso, `valor1`), luego contra el segundo (`valor2`) y así sucesivamente, todo esto bajo una igualdad estricta. +- Si la igualdad es encontrada, `switch` empieza a ejecutar el código iniciando por el primer `case` correspondiente, hasta el `break` más cercano (o hasta el final del `switch`). +- Si no se cumple ningún caso entonces el código `default` es ejecutado (si existe). + +## Ejemplo + +Un ejemplo de `switch` (se resalta el código ejecutado): + +```js run +let a = 2 + 2; + +switch (a) { + case 3: + alert( 'Muy pequeño' ); + break; +*!* + case 4: + alert( '¡Exacto!' ); + break; +*/!* + case 5: + alert( 'Muy grande' ); + break; + default: + alert( "Desconozco estos valores" ); +} +``` + +Aquí el `switch` inicia comparando `a` con la primera variante `case` que es `3`. La comparación falla. + +Luego `4`. La comparación es exitosa, por tanto la ejecución empieza desde `case 4` hasta el `break` más cercano. + +**Si no existe `break` entonces la ejecución continúa con el próximo `case` sin ninguna revisión.** + +Un ejemplo sin `break`: + +```js run +let a = 2 + 2; + +switch (a) { + case 3: + alert( 'Muy pequeño' ); +*!* + case 4: + alert( '¡Exacto!' ); + case 5: + alert( 'Muy grande' ); + default: + alert( "Desconozco estos valores" ); +*/!* +} +``` + +En el ejemplo anterior veremos ejecuciones de tres `alert` secuenciales: + +```js +alert( '¡Exacto!' ); +alert( 'Muy grande' ); +alert( "Desconozco estos valores" ); +``` + +````encabezado inteligente="Cualquier expresión puede ser un argumento `switch/case`" +Ambos `switch` y `case` permiten expresiones arbitrarias. + +Por ejemplo: + +```js run +let a = "1"; +let b = 0; + +switch (+a) { +*!* + case b + 1: + alert("esto se ejecuta, porque +a es 1, exactamente igual b+1"); + break; +*/!* + + default: + alert("esto no se ejecuta"); +} +``` +Aquí `+a` da `1`, esto es comparado con `b + 1` en `case`, y el código correspondiente es ejecutado. +```` + +## Agrupamiento de "case" + +Varias variantes de `case` los cuales comparten el mismo código pueden ser agrupadas. + +Por ejemplo, si queremos que se ejecute el mismo código para `case 3` y `case 5`: + +```js run no-beautify +let a = 2 + 2; + +switch (a) { + case 4: + alert('¡Correcto!'); + break; + +*!* + case 3: // (*) agrupando dos cases + case 5: + alert('¡Incorrecto!'); + alert("¿Por qué no tomas una clase de matemáticas?"); + break; +*/!* + + default: + alert('El resultado es extraño. Realmente.'); +} +``` + +Ahora ambos `3` y `5` muestran el mismo mensaje. + +La habilidad para "agrupar" cases es un efecto secundario de como trabaja `switch/case` sin `break`. Aquí la ejecución de `case 3` inicia desde la línea `(*)` y continúa a través de `case 5`, porque no existe `break`. + +## El tipo importa + +Vamos a enfatizar que la comparación de igualdad es siempre estricta. Los valores deben ser del mismo tipo para coincidir. + +Por ejemplo, consideremos el código: + +```js run +let arg = prompt("Ingrese un valor"); +switch (arg) { + case '0': + case '1': + alert( 'Uno o cero' ); + break; + + case '2': + alert( 'Dos' ); + break; + + case 3: + alert( '¡Nunca ejecuta!' ); + break; + default: + alert( 'Un valor desconocido' ); +} +``` + +1. Para `0`, `1`, se ejecuta el primer `alert`. +2. Para `2` se ejecuta el segundo `alert`. +3. Pero para `3`, el resultado del `prompt` es un string `"3"`, el cual no es estrictamente igual `===` al número `3`. Por tanto ¡Tenemos un código muerto en `case 3`! La variante `default` se ejecutará. + \ No newline at end of file