Operadores
Suma y concatenación '+'Operadores artiméticos Operadores unarios Operadores relacionales Operadores lógicos

Suma y concatenación '+'

Este operador puede usarse para sumar números o concatenar cadenas. Pero, ¿Qué ocurre si intentamos sumar un número con un string, o algo que no sea un número o string?. Vamos a ver qué pasa:

console.log(4 + 6); // 10
console.log("Hello " + "world!"); // "Hello world!"
console.log("23" + 12); // "2312"
console.log("42" + true); // "42true"
console.log("42" + undefined); // "42undefined"
console.log("42" + null); // "42null"
console.log(42 + "hello"); // "42hello"
console.log(42 + true); // 43 (true => 1)
console.log(42 + false); // 42 (false => 0)
console.log(42 + undefined); // NaN (undefined no se puede convertir a número)
console.log(42 + null); // 42 (null => 0)
console.log(13 + 10 + "12"); // "2312" (13 + 10 = 23, 23 + "12" = "2312")

Cuando un operando es string, siempre se realizará una concatenación, por tanto se intentará transformar el otro valor en un string (si no lo es). En caso contrario, intentará hacer una suma (convirtiendo valores no númericos a número). Si la conversión del valor a número falla, devolverá NaN (Not a Number).

Para comprobar si un número es NaN, se puede utilizar el método Number.isNaN(valor), que devuelve un booleano (true si es NaN, es decir, alguno de los operandos no ha podido ser convertido a número).

Operadores artiméticos

Otros operadores aritméticos son: resta (-), multiplicación (*), división (/), resto (%), y potencia (**). Estos operadores operan siempre con números, por tanto, cada operando que no sea de tipo number debe ser convertido a número.

console.log(4 * 6); // 24
console.log(4 ** 2); // 16
console.log("Hello " * "world!"); // NaN
console.log("24" / 12); // 2 (24 / 12)
console.log("42" * true); // 42 (42 * 1)
console.log("42" * false); // 0 (42 * 0)
console.log("42" * undefined); // NaN
console.log("42" - null); // 42 (42 - 0)
console.log(12 * "hello"); // NaN ("hello" no se puede convertir a number)
console.log(13 * 10 - "12"); // 118 ((13 * 10) - 12)

Operadores unarios

En JavaScript tenemos los operadores de preincremento (++variable), postincremento (variable++), predecremento (--variable) y postdecremento (variable--).

let a = 1;
let b = 5;
console.log(a++); // Imprime 1 e incrementa a = 2
console.log(++a); // Incrementa a = 3, e imprime 3
console.log(++a + ++b); // Incrementa a = 4 y b = 6. Suma (4+6), e imprime 10
console.log(a-- + --b); // Decrementa b = 5. Suma (4+5). Imprime 9. Decrementa a = 3

Operadores relacionales

El operador de comparación, compara dos valores y devuelve un booleano (true o false) Estos operadores son prácticamente los mismos que en la mayoría de lenguajes de programación, a excepción de algunos, que veremos a continuación.

Podemos usar == o === para comparar la igualdad (o lo contrario !=, !==). La principal diferencia es que el primero (==), no tiene en cuenta los tipos de datos que están siendo comparados, compara si los valores son equivalentes. Internamente convierte uno de los valores al tipo del otro para compararlos.

Cuando usamos === (o !==), los valores además deben ser del mismo tipo. Si el tipo de valor es diferente (o si es el mismo tipo de dato pero diferente valor) devolverá falso. Devuelve true cuando ambos valores son idénticos.

console.log(3 == "3"); // true
console.log(3 === "3"); // false
console.log(3 != "3"); // false
console.log(3 !== "3"); // true

console.log("" == false); // true
console.log(false == null); // false (null no equivale a ningún booleano).
console.log(false == undefined); // false (undefined no equivale a ningún booleano).
console.log(null == undefined); // true (null y undefined si equivalen entre ellos)
console.log(0 == false); // true
console.log({} == false); // Empty object -> false
console.log([] == false); // Empty array -> true

Debido a esta característica del lenguaje, podemos simplemente evaluar cualquier valor en una estructura condicional. JavaScript obtendrá su equivalente booleano (true o false) y evaluará dicha condición en base a ello

function sayHello(name) {
  if(name) { // name no está vacío, ni es undefined, ni null
    console.log(`Hello ${name}`);
  } else {
    console.error('Name cannot be empty');
  }
}

Otros operadores relacionales para números o strings son: menor que (<), mayor que (>), menor o igual que (<=), y mayor o igual que (>=). Cuando comparamos un string con estos operadores, se va comparando carácter a carácter y se compara su posición en la codificación Unicode para determinar si es menor (situado antes) o mayor (situado después). A diferencia del operador de suma (+), cuando uno de los dos operandos es un número, el otro será transformado en número para comparar. Para poder comparar como string, ambos operandos deben ser string.

console.log(6 >= 6); // true
console.log(3 < "5"); // true ("5" => 5)
console.log("adios" < "bye"); // true
console.log("Bye" > "Adios"); // true
console.log("Bye" > "adios"); // false. Las letras mayúsculas van antes
console.log("ad" < "adios"); // true

Operadores lógicos

Los operadores lógicos son negación (!), y (&&), o (||). Estos operadores normalmente se usan en combinación con los operadores relacionales formando una condición más compleja. El resultado final siempre es true o false.

console.log(!true); // Prints false
console.log(!(5 < 3)); // Prints true (!false)

console.log(4 < 5 && 4 < 2); // Prints false (both conditions need to be true)
console.log(4 < 5 || 4 < 2); // Prints true (only one condition has to be true)

Se puede usar el operador &&, o el operador ||, con valores que no son booleanos. La expresión devolverá uno de los 2 valores. El operador || devuelve el primer valor si este equivale a true, o el segundo en caso contrario. El operador && hará lo opuesto (devolverá el segundo valor solo si el primero es cierto).

console.log(0 || "Hello"); // Prints "Hello"
console.log(45 || "Hello"); // Prints 45
console.log(45 && "Hello"); // Prints Hello
console.log(undefined && 145); // Prints undefined
console.log(null || 145); // Prints 145
console.log("" || "Default"); // Prints "Default"