31º agosto 2020

Ejecución condicional: if, '?'

Algunas veces, necesitamos ejecutar diferentes acciones basadas en diferentes condiciones.

Para hacer esto, nosotros utilizaremos la sentencia if y el operador condicional (ternario) al cual nos referiremos de aqui en adelante como operador de “signo de interrogación” ? por simplicidad.

La sentencia “if”

La sentencia if(...) evalúa la condición en los paréntesis, y si el resultado es true ejecuta un bloque de código.

Por ejemplo:

let year = prompt('¿En que año la fué publicada la especificación ECMAScript-2015?', '');

if (year == 2015) alert( '¡Estás en lo cierto!' );

En el ejemplo de arriba, la condición es un simple signo de igualdad (year == 2015), pero podría ser mucho mas complejo.

Si quisiéramos ejecutar más de una sentencia, debemos encerrar nuestro bloque de código entre llaves:

if (year == 2015) {
  alert( "¡Es Correcto!" );
  alert( "¡Eres muy inteligente!" );
}

Recomendamos siempre encerrar nuestro bloque de código entre llaves {} siempre que se utilice la sentencia if, inclusive si solo se va a ejecutar una sola sentencia en este caso. Hacer eso mejora la legibilidad.

Conversión Booleana

La sentencia if (…) evalúa la expresión dentro de sus paréntesis y convierte el resultado en booleano.

Recordemos las reglas de conversión del capítulo. Conversiones de Tipos:

  • El número 0, un string vacio "", null, undefined, y NaN se convierte en false. Por esto son llamados valores “falso”.
  • El resto de los valores se convierten en true, entonces los llamaremos valores “verdadero”.

Entonces, el código que vemos a continuación nunca se ejecutaria:

if (0) { // 0 es falso
  ...
}

…y dentro de esta condición – siempre se ejecutará:

if (1) { // 1 es verdadero
  ...
}

También podemos pasar un valor booleano pre-evaluado al if, así:

let cond = (year == 2015); // la igualdad evalúa y devuelve un true o false

if (cond) {
  ...
}

La clausula “else”

La sentencia if quizás contenga un bloque “else” opcional. Este se ejecutará cuando la condición sea falsa.

Por ejemplo:

let year = prompt('¿En qué año fue publicada la especificación ECMAScript-2015?', '');

if (year == 2015) {
  alert( '¡Lo adivinaste correcto!' );
} else {
  alert( '¿Como te puedes estar tan equivocado?' ); // cualquier valor excepto 2015
}

Muchas condiciones: “else if”

Algunas veces, queremos probar variantes de una condición. La clausula else if nos permite hacer esto.

Por ejemplo:

let year = prompt('¿En qué año fue publicada la especificación ECMAScript-2015?', '');

if (year < 2015) {
  alert( 'Muy poco...' );
} else if (year > 2015) {
  alert( 'Muy Tarde' );
} else {
  alert( '¡Exactamente!' );
}

En el código de arriba, JavaScript primero revisa si year < 2015. Si esto es falso, continúa a la siguiente condición year > 2015. Si esta también es falsa, mostrará la última alert.

Podría haber más bloques else if. Y el último else es opcional.

Operador ternario ‘?’

A veces necesitamos asignar una variable dependiendo de alguna condición.

Por ejemplo:

let accessAllowed;
let age = prompt('¿Qué edad tienes?', '');

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

alert(accessAllowed);

Entonces el operador “ternario” también llamado “signo de interrogación” nos permite ejecutar esto en una forma más corta y simple.

El operador está representado por un signo de interrogación de cierre ?. A veces es llamado “ternario” porque el operador tiene tres operandos. Es el único operador de JavaScript que tiene esta cantidad de ellos.

La Sintaxis es:

let result = condition ? value1 : value2;

La condition es evaluada: si es verdadera entonces devuelve value1 , de lo contrario – value2.

Por ejemplo:

let accessAllowed = (age > 18) ? true : false;

Técnicamente, podemos omitir el paréntesis alrededor de age > 18. El operador de signo de interrogación tiene una precedencia baja, por lo que se ejecuta después de la comparación >.

En este ejemplo realizaremos lo mismo que en el anterior:

// el operador de comparación  "age > 18" se ejecuta primero de cualquier forma
// (no necesitamos agregar los paréntesis)
let accessAllowed = age > 18 ? true : false;

Pero los paréntesis hacen el código mas legible, asi que recomendamos utilizarlos.

Por favor tome nota:

En el ejemplo de arriba, podrias evitar utilizar el operador de signo de interrogación porque esta comparación devuelve directamente true/false:

// es lo mismo que
let accessAllowed = age > 18;

Múltiples ‘?’

Una secuencia de operadores de signos de interrogación ? puede devolver un valor que depende de más de una condición.

Por ejemplo:

let age = prompt('¿edad?', 18);

let message = (age < 3) ? '¡Hola, bebé!' :
  (age < 18) ? '¡Hola!' :
  (age < 100) ? '¡Felicidades!' :
  '¡Qué edad tan inusual!';

alert( message );

Puede ser difícil al principio comprender lo que está sucediendo. Pero después de una mirada más cercana, podemos ver que es solo una secuencia ordinaria de condiciones:

  1. El primer signo de pregunta revisa si age < 3.
  2. Si es cierto – devuelve '¡Hola, bebé!'. De lo contrario, continua a la expresión que está después de los dos puntos ‘":"’, revisando age < 18.
  3. Si es cierto – devuelve '¡Hola!'. De lo contrario, continúa con la expresión que está después de los dos puntos siguientes ‘":"’, revisando age < 100.
  4. Si es cierto – devuelve '¡Felicidades!'. De lo contrario, continúa a la expresión que está después de los dos puntos ‘":"’, devolviendo '¡Qué edad tan inusual!'.

Aquí lo podemos ver utilizando if..else:

if (age < 3) {
  message = '¡Hola, bebé!';
} else if (age < 18) {
  message = '¡Hola!';
} else if (age < 100) {
  message = '¡Felicidades!';
} else {
  message = '¡Qué edad tan inusual!';
}

Uso no tradicional de ‘?’

A veces el signo de interrogación cerrado ? se utiliza para reemplazar if:

let company = prompt('¿Qué compañía creó JavaScript?', '');

(company == 'Netscape') ?
   alert('¡Correcto!') : alert('Equivocado.');

Dependiendo de la condición company == 'Netscape', se ejecutará la primera o la segunda expresión del operador ? y se mostrará una alerta.

Aquí no asignamos el resultado de una variable. En vez de esto, ejecutamos diferentes códigos dependiendo de la condición.

No se recomienda el uso del operador de signo de interrogación de esta forma.

La notacion es mas corta que la sentencia equivalente con if, lo cual seduce a algunos programadores. Pero es menos legible.

Aquí está el mismo código utilizando la sentencia if para comparar:

let company = prompt('¿Cuál compañía creó JavaScript?', '');

if (company == 'Netscape') {
  alert('¡Correcto!');
} else {
  alert('Equivocado.');
}

Nuestros ojos leen el código verticalmente. Los bloques de código que se expanden múltiples lineas son mas fáciles de entender que los las instrucciones largas horizontales.

El propósito del operador de signo de interrogación ? es para devolver un valor u otro dependiendo de su condición. Por favor utilízala para exactamente esto. Utiliza la sentencia if cuando necesites ejecutar código en ramas distintas.

Tareas

importancia: 5

Se mostrará el alert?

if ("0") {
  alert( 'Hello' );
}

Sí lo hará.

Cualquier string excepto uno vacío (y "0" que no es vacío) se convierte en true en un contexto lógico.

Podemos ejecutar y verificar:

if ("0") {
  alert( 'Hola' );
}
importancia: 2

Usando el constructor if..else, escribe el código que pregunta: ‘¿Cuál es el nombre “oficial” de JavaScript?’

Si el visitador escribe “ECMAScript”, Entonces muestras “¡Correcto!”, de lo contrario – muestra: “¿No lo sabes? ¡ECMAScript!”

Demo en nueva ventana

<!DOCTYPE html>
<html>

<body>
  <script>
    'use strict';

    let value = prompt('¿Cuál es el nombre "oficial" de JavaScript?', '');

    if (value == 'ECMAScript') {
      alert('¡Correcto!');
    } else {
      alert("¿No lo sabes? ¡ECMAScript!");
    }
  </script>


</body>

</html>
importancia: 2

Usando el constructor if..else, escribe un código que obtenga a través de un prompt un número y entonces muestre en un alert:

  • 1, si el valor es mayor que cero,
  • -1, si es menor que cero,
  • 0, si es igual a cero.

En la tarea asumimos que siempre el usuario introduce un número.

Demo en nueva ventana

let value = prompt('Escribe un número', 0);

if (value > 0) {
  alert( 1 );
} else if (value < 0) {
  alert( -1 );
} else {
  alert( 0 );
}
importancia: 5

Reescriba esta condición if usando el operador ternario '?':

let result;

if (a + b < 4) {
  result = 'Debajo';
} else {
  result = 'Encima';
}
let result = (a + b < 4) ? 'Debajo' : 'Encima';
importancia: 5

Reescriba el if..else utilizando operadores ternarios múltiples'?'.

Para legibilidad, es recomendad dividirlo en múltiples lineas de código.

let message;

if (login == 'Empleado') {
  message = 'Hola';
} else if (login == 'Director') {
  message = 'Felicidades';
} else if (login == '') {
  message = 'Sin sesión';
} else {
  message = '';
}
let message = (login == 'Empleado') ? 'Hola' :
  (login == 'Director') ? 'Felicidades' :
  (login == '') ? 'Sin sesión' :
  '';
Mapa del Tutorial

Comentarios

lea esto antes de comentar…
  • Si tiene sugerencias sobre qué mejorar, por favor enviar una propuesta de GitHub o una solicitud de extracción en lugar de comentar.
  • Si no puede entender algo en el artículo, por favor explique.
  • Para insertar algunas palabras de código, use la etiqueta <code>, para varias líneas – envolverlas en la etiqueta <pre>, para más de 10 líneas – utilice una entorno controlado (sandbox) (plnkr, jsbin, codepen…)