Operadores y comparaciones

docs.scrimba.com

Digamos que estás rastreando un carrito de compras. Sumas precios, aplicas un descuento, verificas si el total supera un umbral de envío gratis, y decides si mostrar una advertencia cuando el carrito está vacío. Cada uno de esos pasos es un operador en acción: un símbolo que toma uno o dos valores y produce uno nuevo. Este capítulo cubre los operadores que usas constantemente, desde hacer operaciones aritméticas en números hasta comparar valores y combinar pruebas verdadero-o-falso.

Aritmética y asignación

Los operadores aritméticos hacen la matemática que ya conoces: + suma, - resta, * multiplica, / divide. Hay uno más que quizás no hayas visto: %, el operador de residuo, que te da lo que sobra después de una división.

const total = 8 + 5; // 13
const change = 20 - 13; // 7
const leftover = 17 % 5; // 2, porque 5 entra en 17 tres veces con 2 de sobra
console.log(total); // 13

Cuando quieres actualizar un valor basándote en sí mismo, hay una forma abreviada. En lugar de escribir score = score + 10, puedes escribir score += 10. Significa lo mismo: toma el valor actual, suma 10, guarda el resultado.

let score = 100;
score += 10; // score ahora es 110
score -= 30; // score ahora es 80
console.log(score); // 80

Y para mover un número hacia arriba o hacia abajo exactamente por uno, ++ y -- lo hacen en un paso. count++ suma uno, count-- quita uno.

let lives = 3;
lives--; // lives ahora es 2
console.log(lives); // 2

Los operadores aritméticos son +, -, *, /, y %. Los primeros cuatro son familiares; % es el que merece una segunda mirada. Devuelve el residuo de una división, lo que lo hace la herramienta estándar para verificaciones de "¿es esto divisible uniformemente?" y para envolver un valor dentro de un rango.

const isEven = 10 % 2; // 0, entonces 10 es par
const isOdd = 7 % 2; // 1, entonces 7 es impar
console.log(isEven); // 0

Actualizar un valor desde sí mismo es lo suficientemente común como para tener formas abreviadas. Cada operador aritmético se empareja con = para formar una asignación compuesta: +=, -=, *=, /=, %=. Entonces price *= 1.2 se lee como "multiplica price por 1.2 y guárdalo", evitándote escribir price = price * 1.2.

let price = 40;
price *= 1.2; // suma 20 por ciento, price ahora es 48
price -= 8; // price ahora es 40
console.log(price); // 40

Para un cambio de exactamente uno, ++ y -- incrementan y decrementan en el lugar. Se leen claramente cuando estás avanzando un contador, y los verás constantemente.

let attempts = 0;
attempts++; // attempts ahora es 1
console.log(attempts); // 1

Los operadores aritméticos tienen pocas sorpresas en los cuatro básicos, así que los dos que merecen atención real son % y la sobrecarga de +. El operador de residuo % devuelve lo que queda después de una división de estilo entero, y mantiene el signo del operando izquierdo: -7 % 3 es -1, no 2, lo que sorprende a la gente que espera un módulo matemático. Es tu recurso para pruebas de divisibilidad y para envolver un índice de nuevo dentro de un rango.

const remainder = 17 % 5; // 2
const negative = -7 % 3; // -1, el signo sigue al operando izquierdo
console.log(negative); // -1

El operador + está sobrecargado: con dos números suma, pero si cualquiera de los lados es una cadena concatena, coercionando el otro lado a una cadena. Esa única regla está detrás de toda una clase de sorpresas, así que nombra lo que tienes antes de sumarlo.

const sum = 5 + 3; // 8
const glued = "5" + 3; // "53", el 3 se convirtió en una cadena
console.log(glued); // 53

La asignación compuesta (+=, -=, *=, /=, %=) es la forma idiomática de actualizar un enlace desde sí mismo, e hereda la misma sobrecarga de +: msg += count convierte count a cadena. Los operadores de incremento y decremento ++ y -- vienen en formas prefijo y sufijo que difieren en el valor que devuelve la expresión: x++ evalúa al valor antiguo y luego incrementa, ++x incrementa y luego evalúa al nuevo. En una expresión donde la distinción importa, mantenlos en su propia declaración donde la diferencia no importa. Usa let para cualquier cosa que reasignes de esta manera, ya que los enlaces const no pueden actualizarse.

let counter = 5;
const before = counter++; // before es 5, counter ahora es 6
const after = ++counter; // after es 7, counter ahora es 7
console.log(`${before} ${after}`); // 5 7

JunoAritmética y asignación Los operadores de matemática son los que esperas, más % para el residuo después de dividir. Cuando actualizas un valor desde sí mismo, usa la forma abreviada: score += 10 en lugar de score = score + 10. Y ++ o -- mueve un número hacia arriba o hacia abajo por uno. Me tomó un tiempo confiar en estos, pero son las mismas matemáticas escritas más corto.

JunoAritmética y asignación Cinco operadores aritméticos, y % para el residuo es el que se gana su lugar en las pruebas de divisibilidad. La asignación compuesta como price *= 1.2 actualiza un valor desde sí mismo en un movimiento, y ++ o -- avanza por uno. Usa let para cualquier cosa que planees actualizar de esta manera, ya que un const no puede reasignarse.

JunoAritmética y asignación Dos cosas que debes mantener agudas: % mantiene el signo del operando izquierdo, así que -7 % 3 es -1, y + concatena en el momento en que cualquiera de los lados es una cadena. Prefijo versus sufijo ++ devuelven valores diferentes, así que mantenlos en su propia declaración donde no pueda morder. El resto de los operadores aritméticos se comportan exactamente como esperarías.

Comparaciones

Una comparación hace una pregunta sobre dos valores y responde con true o false. Esas respuestas verdadero-o-falso son booleanos, y son lo que tu programa usa para tomar decisiones más adelante.

La comparación que usarás más es ===, que pregunta "¿son estos dos exactamente iguales?"

const answer = 42;
console.log(answer === 42); // true
console.log(answer === 7); // false

Su opuesto es !==, que pregunta "¿son estos dos diferentes?" Y para el orden hay <, >, <=, y >=, que funcionan como lo hacen en matemáticas: menor que, mayor que, menor o igual, mayor o igual.

const age = 18;
console.log(age >= 18); // true
console.log(age !== 21); // true

Siempre compara con ===, nunca ==. La versión de doble equals tiene un comportamiento que sorprende a la gente, y la versión de triple equals hace lo que esperas cada vez.

Una comparación toma dos valores y devuelve un booleano, true o false. Ese booleano es la materia prima para las decisiones que escribirás en condicionales, así que acertar con las comparaciones importa.

Usa === para igualdad y !== para desigualdad. Para ordenamiento hay <, >, <=, y >=.

const stock = 3;
console.log(stock === 0); // false
console.log(stock > 0); // true
console.log(stock <= 5); // true

La razón para usar === en lugar de == es que no son el mismo operador. === (igualdad estricta) compara tanto el valor como el tipo, devolviendo true solo cuando coinciden. == (igualdad flexible) primero convierte los dos lados a un tipo común y luego compara, lo que produce resultados que casi nadie predice.

console.log(0 == ""); // true, y raramente lo que quieres
console.log("1" == 1); // true, la cadena se convirtió en un número
console.log("1" === 1); // false, tipos diferentes

Usa por defecto === y !== cada vez. Comparan sin convertir, así que nunca tienes que razonar sobre las reglas de conversión. Guarda == para leer código antiguo, no para escribir código nuevo.

Una comparación devuelve un booleano, y los operadores se dividen en dos familias: igualdad (===, !==) y relacional (<, >, <=, >=). Los relacionales son directos con números. Los de igualdad son donde vive la decisión real, porque JavaScript te da dos de ellos.

=== (igualdad estricta) devuelve true solo cuando ambos operandos comparten un tipo y un valor, sin conversión. == (igualdad flexible) ejecuta un algoritmo de igualdad abstracta que coerciona los operandos hacia un tipo común primero, y las reglas prácticas vale la pena conocer para que puedas leer código antiguo: comparar un número y una cadena convierte la cadena a un número ("1" == 1 es true); comparar un booleano con cualquier cosa convierte el booleano a un número primero (true == 1, false == 0); null == undefined es true pero ninguno es igual a nada más; y NaN no es igual a nada, ni siquiera a sí mismo.

console.log(0 == ""); // true, "" se convierte a 0
console.log("1" == 1); // true, "1" se convierte a 1
console.log(null == undefined); // true, un caso especial
console.log(NaN === NaN); // false, NaN nunca es igual a nada

Usa === y !==; trata == como conocimiento de solo lectura. La conclusión no es memorizar cada ruta de coerción, es evitarlas: la igualdad estricta no tiene coerción, así que su resultado se lee directamente de los operandos. El único lugar donde == merece una mención es la verificación null == undefined, que algunos códigos usan deliberadamente para atrapar ambos valores nulos a la vez, pero los operadores nullish más adelante en este capítulo hacen ese trabajo más claramente.

JunoComparaciones Una comparación hace una pregunta de sí-o-no sobre dos valores y responde con true o false. Usa === para verificar igualdad, !== para "diferente", y <, >, <=, >= para orden. Mantente con === y salta ==, porque la versión doble tiene una sorpresa y la versión triple se comporta.

JunoComparaciones Cada comparación te da un booleano, que es el combustible para las decisiones que escribes después. === verifica el valor y el tipo juntos; == convierte los lados primero y produce rarezas como 0 == "" siendo true. Usa por defecto === y !== para que nunca razone sobre conversión, y deja == para leer código antiguo.

JunoComparaciones La igualdad estricta compara el tipo y el valor sin coerción, así que su respuesta se lee directamente de los operandos. La flexible == ejecuta un algoritmo de conversión detrás de tu espalda, por lo que "1" == 1 es true y NaN no es igual a nada en absoluto. Escribe === y !== y mantén las reglas de coerción como conocimiento de solo lectura para código antiguo.

Operadores lógicos y veracidad

A menudo necesitas combinar más de una comparación. Los operadores lógicos te permiten hacer eso: && (y), || (o), y ! (no).

&& es true solo cuando ambos lados son true. || es true cuando al menos uno de los lados es true. ! voltea un booleano a su opuesto.

const age = 20;
const hasTicket = true;
console.log(age >= 18 && hasTicket); // true, ambos son true
console.log(age < 13 || hasTicket); // true, uno es suficiente
console.log(!hasTicket); // false, volteado

Hay una idea relacionada llamada valores verdaderos y falsos. En una configuración verdadero-o-falso, JavaScript trata algunos valores no booleanos como si fueran false. Los valores falsos son false, 0, "" (una cadena vacía), null, undefined, y NaN. Todo lo demás cuenta como verdadero.

const name = "";
console.log(!name); // true, una cadena vacía es falsa

Los operadores lógicos combinan valores booleanos: && (y) es true solo cuando ambos operandos son true, || (o) es true cuando al menos uno lo es, y ! (no) invierte un único booleano.

const loggedIn = true;
const isAdmin = false;
console.log(loggedIn && isAdmin); // false, ambos deben ser true
console.log(loggedIn || isAdmin); // true, uno es suficiente
console.log(!isAdmin); // true

Los operadores no se detienen en booleanos reales, porque JavaScript clasifica cada valor en verdadero o falso. El conjunto falso es corto y vale la pena memorizar: false, 0, "", null, undefined, y NaN. Todo lo demás es verdadero, incluyendo "0", "false", y cualquier cadena no vacía. Esto es lo que te permite escribir una verificación como !username para significar "no se ingresó un nombre de usuario".

const username = "";
console.log(!username); // true, "" es falso
console.log(Boolean("hello")); // true, una cadena no vacía es verdadera

Los operadores lógicos son &&, ||, y !, y la idea clave es que && y || no devuelven un booleano. Ellos cortocircuitan: cada uno evalúa el operando izquierdo, y solo evalúa el derecho si tiene que hacerlo, luego devuelve uno de los operandos reales, no un true o false coercionado.

a || b devuelve a si a es verdadero, de lo contrario b. a && b devuelve a si a es falso, de lo contrario b. Ese comportamiento sustenta el conjunto falso: false, 0, "", null, undefined, y NaN son los seis valores falsos, y todo lo demás es verdadero.

const name = "";
const display = name || "Invitado"; // "Invitado", porque "" es falso
const label = "Carlos" && "activo"; // "activo", izquierda es verdadera así que devuelve la derecha
console.log(display); // Invitado

El truco de defecto || tiene un filo afilado, por lo que existe ?? (coalescencia nula). || retrocede siempre que el lado izquierdo sea cualquier valor falso, así que 0 || 10 es 10 y "" || "n/a" es "n/a", incluso cuando 0 y "" fueron entradas válidas que querías mantener. ?? retrocede solo cuando el lado izquierdo es null o undefined, tratando 0 y "" como valores reales.

const count = 0;
console.log(count || 5); // 5, pero 0 era un valor real
console.log(count ?? 5); // 0, ?? solo reemplaza null o undefined

Cuando necesitas elegir entre dos valores basándote en una condición, una comparación completa más un ternario (condition ? whenTrue : whenFalse) es la forma de una línea, por ejemplo age >= 18 ? "adulto" : "menor". Esto es una vista previa; el capítulo condicionales lo cubre a él y la declaración if en su totalidad.

JunoOperadores lógicos y veracidad&& es "ambos", || es "cualquiera", y ! voltea un booleano. Además de eso, JavaScript trata algunos valores como falso-ish: false, 0, "", null, undefined, y NaN son los falsos, y todo lo demás es verdadero. Eso es lo que permite que !name represente "no se proporcionó nombre".

JunoOperadores lógicos y veracidad&& necesita ambos lados verdaderos, || necesita uno, y ! invierte. Cada valor es también verdadero o falso, y el conjunto falso es lo suficientemente pequeño como para memorizar: false, 0, "", null, undefined, NaN. Ten cuidado de que "0" y "false" son cadenas, así que ambas son verdaderas.

JunoOperadores lógicos y veracidad&& y || cortocircuitan y devuelven un operando, no un booleano, por eso name || "Invitado" funciona como un defecto. Ese defecto tiene un filo: || reemplaza cada valor falso, así que usa ?? cuando 0 y "" son entradas que quieres mantener. Los seis valores falsos son toda la historia, así que aprende el conjunto y el resto sale.

Dónde van los operadores desde aquí

Los operadores son los verbos del lenguaje: toman los valores que almacenas y los convierten en resultados y decisiones. La aritmética produce nuevos números, las comparaciones producen booleanos, y los operadores lógicos combinan esos booleanos en las respuestas sí-o-no en las que actúa tu programa.

Esos booleanos no hacen mucho por sí solos. El siguiente paso es usarlos para dirigir tu código, ejecutando una rama cuando una verificación pasa y otra cuando falla, que es de lo que trata el capítulo condicionales. Si alguno de los valores aquí se sintió borroso, el capítulo tipos de datos es donde los números, las cadenas, y los booleanos reciben su tratamiento completo.