Muchas veces, tanto en JavaScript como en otros lenguajes de programación necesitamos realizar diferentes acciones basadas en una condición.
Hay una declaración if para eso y también el operador condicional (ternario) para la evaluación del condicional, a la que nos referiremos como operador de «signo de interrogación» ? por simplicidad.
La declaración «if»
La declaración if obtiene una condición, la evalúa y, si el resultado es true (verdadero), ejecuta el código, y sino, no.
Por ejemplo:
//¿En qué año se publicó la especificación ECMAScript-2015?' //Respuesta: en el 2015 let año = 2015; if (año == 2015) alert( 'Fue publicada en el año 2015' );
En el ejemplo anterior, la condición es un simple control de igualdad: años == 2015, pero puede ser mucho más complejo.
Si hay más de una declaración que ejecutar, tenemos que ajustar nuestro bloque de código entre llaves:
if (años == 2015) {
alert( "¡Tú estás en lo correcto!" );
alert( "¡Eres sumamente inteligente!" );
}
Se recomienda envolver el bloque de código if con llaves {} cada vez, incluso si solo hay una declaración. Eso mejora la legibilidad.
Conversión booleana
La declaración if (…) evalúa la expresión entre paréntesis y la convierte al tipo booleano.
- Un número 0, una cadena vacía » «, null, undefinedy NaN es convertido a false. Por eso son llamados valores «falsos».
- Otros valores se convierten en true, por lo que se llaman «verdad».
Entonces, el código bajo esta condición nunca se ejecutaría:
if (0) { // 0 es falso
...
}
… Y dentro de esta condición - siempre funciona:
if (1) { // 1 es verdad
...
}
También podemos pasar un valor booleano preevaluado a if, como aquí:
let cond = (años == 2015); // la igualdad se evalúa como verdadera o falsa
if (cond) {
...
}
La cláusula «else»
La declaración if puede contener un bloque «else» opcional. Se ejecuta cuando la condición es incorrecta.
Por ejemplo:
let edad = 16;
if (edad >= 18) {
alert( 'Ya eres mayor de edad' );
} else {
alert( 'eres menor de edad' ); // Como edad es igual a 16, se omitirá por completo el bloque del if y saltará de inmediato al else
}
Varias condiciones: “si no”
A veces nos gustaría probar varias variantes de una condición. Hay una cláusula else if para eso.
Por ejemplo:
let año = prompt('¿En qué año se publicó la especificación ECMAScript-2015?', '');
if (año < 2015) {
alert( 'Demasiado pronto...' );
} else if (año > 2015) {
alert( 'Demasiado después' );
} else {
alert( 'Exacto!' );
}
En el código anterior JavaScript primero comprueba año < 2015. Si es falsa, pasa a la siguiente condición año > 2015 y, de lo contrario, muestra la última alert.
Puede haber más bloques else if. El final else es opcional.
Operador ternario ‘?’
A veces necesitamos asignar una variable dependiendo de una condición.
Por ejemplo:
let AccesoPermitido;
let edad = prompt('¿Cuántos años tienes?', '');
if (edad > 18) {
AccesoPermitido = true;
} else {
AccesoPermitido = false;
}
alert(AccesoPermitido);
El operador denominado «ternario» o «signo de interrogación» nos permite hacerlo de forma más breve y sencilla.
El operador está representado por un signo de interrogación ?. El término formal «ternario» significa que el operador tiene tres operandos. En realidad, es el único operador en JavaScript que tiene tantos.
La sintaxis es:
let resultado = condition ? valor1 : valor2
Se evalúa condition, si es veraz luego value1 se devuelve, de lo contrario – value2.
Por ejemplo:
let AccesoPermitido = (edad > 18) ? true : false;
Técnicamente, podemos omitir paréntesis alrededor edad > 18. El operador de signo de interrogación tiene una prioridad baja. Se ejecuta después de la comparación >, por lo que haremos lo mismo:
// el operador relacional "edad > 18" ejecuta primero de todas formas // (no hay necesidad de envolverlo entre paréntesis ) let AccesoPermitido = edad > 18 ? true : false;
Pero los paréntesis hacen que el código sea más legible, por lo que se recomienda usarlos.
Ten en cuenta:
En el ejemplo anterior, es posible evadir el operador de signo de interrogación, porque la comparación por sí misma devuelve true/false:
// lo mismo let AccesoPermitido = edad > 18;
Múltiples ‘?’
Una secuencia de operadores de signo de interrogación ? permite devolver un valor que depende de más de una condición.
Por ejemplo:
let edad = prompt('edad?', 18);
let mensaje = (edad< 3) ? 'Hola, chic@!' :
(edad< 18) ? 'Hola!' :
(age < 100) ? 'Saludos
!' :
'Qué edad tan inusual!
';
alert( mensaje);
Puede ser difícil al principio comprender lo que está pasando. Pero después de un análisis más detallado, podemos ver que es solo una secuencia ordinaria de pruebas.
El primer signo de interrogación comprueba si edad < 3.
Si es verdadero – devuelve ‘Hola, chic@!’, de lo contrario – va después de los dos puntos «:»y busca edad< 18.
Si eso es verdad, devuelve ‘Hola!’, de lo contrario, va después de los dos puntos siguientes «:»y comprueba edad < 100.
Si eso es verdad, regresa ‘Saludos!’, de lo contrario, va después de los últimos dos puntos «:» y regresa ‘Qué edad tan inusual!’.
Aquí te muestro la misma lógica usando if..else:
if (edad < 3) {
mensaje= 'Hola, chic@!';
} else if (edad< 18) {
mensaje= 'Hola!';
} else if (edad< 100) {
mensaje= 'Saludos!';
} else {
mensaje= 'Qué edad tan inusual!';
}
Uso no tradicional de ‘?’
A veces, el signo de interrogación ? se utiliza como un reemplazo para if:
let compañia = prompt('¿Qué empresa creó JavaScript?
', '');
(compañia== 'Netscape') ?
alert('Correcto!') : alert('Incorrecto.');
Dependiendo de la condición compañia == ‘Netscape’, la primera o la segunda parte posterior ? se ejecutan y muestran la alerta.
No asignamos un resultado a una variable aquí. La idea es ejecutar código diferente dependiendo de la condición.
No se recomienda utilizar el operador de signo de interrogación de esta manera.
La notación parece ser más corta que if, lo que atrae a algunos programadores. Pero es menos legible.
Aquí está el mismo código ifpara la comparación:
let compañia = prompt('¿Qué empresa creó JavaScript?
', '');
if (compañia == 'Netscape') {
alert('Correcto!');
} else {
alert('Incorrecto.');
}
Nuestros ojos escanean el código verticalmente. Las construcciones que abarcan varias líneas son más fáciles de entender que un conjunto de instrucciones horizontal largo.
La idea de un signo de interrogación ? es devolver uno u otro valor dependiendo de la condición. Por favor utilízalo para exactamente eso.
