Skip to main content

Capítulo 4 - Comparadores

Operadores de Comparación​

Muchos de los comparadores, mayor que, menor que, igual que, etc... ya los conocemos. Pero en JavaScript tenemos un comparador adiccional, que nos permite comparar entre dos elementos, no solo por su valor, también por su tipología.

var mayorQue = 100 > 10;
var menorQue = 10 < 100;
var mayorIgual = 100 >= 10;
var menorIgual = 10 <= 100;
var igual = 10 == 10;
var igualTotalmente = 10 === 10; // Ojo! Usamos también ===
var noIgual = 100 != 10;

Como regla general, será imperativo utilizarlo siempre que comparemos entre valores el ===, ya que debemos asegurarnos que no nos den "gato por liebre", confirmando que son iguales ambos datos en valor y tipo de dato.

Veamos el siguiente ejemplo:

var igual = 10 == 10; // true
var igualCadena = 10 == "10"; //true
var igualTotalmente = 10 === 10; // true
var igualTotalmenteCadena = 10 === "10"; //false

var noIgual = 100 != 10; // true
var noIgualCadena = 100 != "100"; // false
var noIgualTotalmente = 100 !== 10; // true
var noIgualTotalmenteCadena = 100 !== "100"; // true

Operadores Lógicos​

Podemos concatenar validaciones y así evaluar expresiones más complejas.

En JavaScript disponemos de && (todo debe resolverse como verdadero) y || (Al menos uno de los elementos debe ser verdadero)

AND(&&)

console.log(true && true);      // true
console.log(true && false);     // false
console.log(false && false);    // false
console.log(false && true);     // false

OR(||)

console.log(true || true);      // true
console.log(true || false);     // true
console.log(false || false);    // false
console.log(false || true);     // true

Podemos también utilizar lo aprendido hasta ahora con operaciones matemáticas:

var ex1 = true && true;         // true
var ex2 = (2 == 2) && (3 >= 6); // false
var ex3 = (2>3) || (17 <= 40);  // true
var ex4 = false || false;       // false

Todo puede ser booleano​

En JavaScript todo puede ser comparado en términos booleanos, especialmente si hacemos uso de la función Boolean().

En general podemos saber cómo responderá JavaScript, si tenemos en cuenta el "valor real" de la expresión que deseamos validar.

Por ejemplo, una cadena de texto vacía ("") no aportará valor real, por lo que será false.

Importante remarcar que el 0 y -0 son false

Valor "real" es true:

console.log("valor boleano de \"JS!\":", Boolean("JS!\"));
console.log("valor boleano de 1235:", Boolean(1235));
console.log("valor boleano de -1235:", Boolean(-1235));
console.log("valor boleano de un objeto:", Boolean({saludo: "hola"}));
console.log("valor boleano de un array:", Boolean(["platano", -1, false]));
console.log("valor boleano de un array:", Boolean(function(){}));

Sin valor "real" es false:

console.log("valor boleano de \"\":", Boolean(""));
console.log("valor boleano de 0:", Boolean(0));
console.log("valor boleano de -0:", Boolean(-0));
console.log("valor boleano de null:", Boolean(null));
console.log("valor boleano de undefined:", Boolean(undefined));
console.log("valor boleano de NaN:", Boolean(NaN));

Asignación por igualdad​

Una manera ágil y dinámica de asignar valor a las variables, es haciendo uso de la asignación por igual. Básicamente almacenamos el resultado booleano de una comparación en una variable que podremos utilizar más adelante.

var administrador = 'Yo mismo';
var esAdministrador = (administrador === 'Yo mismo');
console.log(esAdministrador); // true

If​

Como ya vimos en pseudocódigo, una de las estructuras más útiles a la hora de gestionar el flujo de nuestra aplicación es el uso de condicionales.

If nos permite evaluar una condición y actuar en consecuencia.

Las instrucciones que se encuentran entre corchetes, se ejecutan solo cuando la condición se cumple.

Gestiona la complejidad

Dentro de una estructura condicional podemos meter más estructuras condicionales, además de otras estructuras típicas del lenguaje... esto se conoce como anidación.

Cuando la anidación es desmesurada y poco óptima suele elevarse mucho la complejidad ciclomática de nuestro código. De esto hablaremos en próximos capítulos.

if(1 === 1){
    console.log("1 es igual a 1 y por eso me ejecuto")
}

if(1 === "1"){
    console.log("No son del mismo tipo y por eso... este texto jamás será mostrado en la consola.")
}

If... else​

En ciertas ocasiones, necesitaremos que nuestro script elija entre dos caminos en función de si una premisa es verdadera o falsa, por eso JavaScript nos permite utilizar else.

El programa solo puede ejecutar una de las dos opciones, por tanto una parte del código quedará sin ejecutarse.

console.log("pase lo que pase... esto se ejecutará")
if (true) {
    console.log("true, por eso me ejecuto");
} else {
    console.log("false, por eso me ejecuto");
}
console.log("pase lo que pase... esto se ejecutará también")

Else if...​

Cuando necesitemos verificar diversas opciones lo más fácil es utilizar else if, así evitamos tener que anidar en exceso.

Es importante recordar que la primera condición válida será la que use el interprete (navegador), y que ignorará todas las demás.

var condicion = 2;
if (condicion == 1) {
    console.log("1, por eso me ejecuto");
} else if (condicion == 2){
    console.log("2, por eso me ejecuto");
} else {
    console.log("no es 1 o 2, por eso me ejecuto");
}

Switch​

JavaScript dispone de una opción más para crear estructuras condicionales. Switch permite crear estructuras más optimizadas para cubrir un amplio abanico de casos posibles.

Por otra parte Switch tiene varias desventajas notables:

  • No tiene una sintaxis sencilla
  • Es importante utilizar y comprender conceptos propios como case, break o default.
  • En ocasiones puede ser difícil de depurar.
  • Erróneamente se piensa que Switch es exageradamente más rápido que if-else, aunque una simple prueba demuestra lo contrario.

Entendiendo la estructura:

switch(expresión) {
    case n1:
        //Código
        break;
    case n2:
        //Código
        break;
    default:
        //Código
}

Trabajando con "casos únicos":

var nombre = "";
switch (nombre) {
    case "Pepe":
    console.log("Hola Pepe");
    break;
    case "Luis":
    console.log("Hola Luis");
    break;
    case "Antonio":
    console.log("Hola Antonio");
    break;
    default:
    console.log('Ninguno de los nombres que pensamos... es '+nombre);
}

Trabajando con "múltiples coincidencias":

var nombre = "";
switch (nombre)
{
    case "Pepe":
    case "Luis":
    case "Antonio":
        alert('Hola '+nombre);
        break;

    default:
        console.log('Ninguno de los nombres que pensamos... es '+nombre);
}

Operador Ternario​

El operador ternario (?:) nos ofrece una manera propia de hacer estructuras condicionales.

Este operador simplifica mucho la sintaxis propia de los condicionales, pero se desaconseja su uso para operaciones o evaluaciones múltiples.

Información

Si estás empezando con JavaScript, debes tener en cuenta, que es un operador que resulta difícil de recordar al principio. Siendo bastante común su uso especialmente en proyectos desarrollados con Node.js.

Estructura​

Entendiendo la estructura:

condicion ? expresion1 : expresion2

Múltiples expresiones (desaconsejado):

condicion ? (
    expresion1,
    expresion2,
    otraexpresion
) : (
    expresion1,
    expresion2,
    otraexpresion
);

Evaluaciones múltiples (muy desaconsejado):

condicion ? expresion1 : condicion2 ? expresion1 : expresion2;

Ejemplos​

Sencillo:

var esMiembro = true;
console.info("El pago son  " + (esMiembro ? "20.00€" : "50.00€"));

Evaluación múltiple (muy desaconsejado):

var esMiembro = true;
var esAdulto = true;
console.info(esMiembro ? "El pago son 20.00€" : esAdulto ? "Puedes enviar la solicitud cuando quieras" : "Tienes que esperar aún. Lo siento.");

Múltiples expresiones (desaconsejado):

var mensaje,
esMiembro = true;

esMiembro ? (
    mensaje = "El pago son 20.00€",
    console.info(mensaje)
) : (
    mensaje = "El pago son 50.00€",
    console.info(mensaje)
);