Saltar al contenido
operadores.js · devschool

Operadores en JavaScript

Lección 6 de 38 · 3 min de lectura · Actualizado el

En esta lección
  1. Aritméticos
  2. De asignación
  3. De comparación
  4. Lógicos
  5. Valores por defecto: || y ??
  6. Acceso seguro: ?.
  7. El operador ternario

Los operadores son los símbolos que hacen cálculos y comparaciones con los valores.

Aritméticos

10 + 3   // 13  suma
10 - 3   // 7   resta
10 * 3   // 30  multiplicación
10 / 3   // 3.333...  división
10 % 3   // 1   resto de la división
2 ** 3   // 8   potencia

El resto (%) es más útil de lo que parece. Por ejemplo, un número es par si el resto de dividirlo entre 2 es 0: numero % 2 === 0.

De asignación

Atajos para modificar una variable:

let puntos = 10;
puntos += 5;   // puntos = puntos + 5  → 15
puntos -= 3;   // puntos = puntos - 3  → 12
puntos *= 2;   // puntos = puntos * 2  → 24
puntos++;      // suma 1 → 25
puntos--;      // resta 1 → 24

De comparación

Comparan dos valores y devuelven true o false:

5 > 3     // true   mayor que
5 < 3     // false  menor que
5 >= 5    // true   mayor o igual
5 <= 4    // false  menor o igual
5 === 5   // true   igual
5 !== 3   // true   distinto

=== frente a ==

  • === (igualdad estricta) compara el valor y el tipo.
  • == convierte los tipos antes de comparar, y eso da sorpresas:
5 === "5"    // false: número y texto
5 == "5"     // true
0 == ""      // true  (!)
null == undefined // true

Algunos resultados más de ==, para que veas por qué tiene tan mala fama:

0 == false       // true
1 == true        // true
2 == true        // false (!)
"" == "0"        // false
0 == "0"         // true
"\t123\n" == 123 // true
"true" == true   // false
[] == ![]        // true (!!)

No hace falta que entiendas las reglas que hay detrás: basta con no usar ==.

Usa siempre === y !==. Te ahorrarás errores difíciles de encontrar.

Lógicos

Sirven para combinar condiciones:

OperadorNombreEs true si…
&&Ylas dos condiciones son verdaderas
||Oal menos una es verdadera
!NOla condición es falsa (le da la vuelta)
const edad = 20;
const tieneEntrada = false;

edad >= 18 && tieneEntrada   // false: falta la entrada
edad >= 18 || tieneEntrada   // true: basta con ser mayor de edad
!tieneEntrada                // true

Valores por defecto: || y ??

Los operadores lógicos no siempre devuelven true o false: devuelven uno de los dos valores. Eso se aprovecha para dar valores por defecto:

const nombre = entrada || "Anónimo";

Si entrada es un valor “falso” ("", 0, null, undefined…), se usa "Anónimo". El problema es que 0 o "" a veces son valores válidos. Para eso existe ?? (nullish coalescing), que solo usa el valor por defecto si el primero es null o undefined:

const cantidad = 0;
cantidad || 10   // 10  (trata el 0 como "vacío")
cantidad ?? 10   // 0   ✓

Acceso seguro: ?.

Si intentas leer una propiedad de undefined, el programa se detiene con un error. El encadenamiento opcional ?. devuelve undefined en lugar de fallar:

const usuario = { nombre: "Ana" };
usuario.direccion.ciudad   // TypeError: Cannot read properties of undefined
usuario.direccion?.ciudad  // undefined

El operador ternario

Un if en una sola línea: condición ? valorSiSí : valorSiNo.

const edad = 16;
const mensaje = edad >= 18 ? "Puedes votar" : "Todavía no puedes votar";

Úsalo para decisiones cortas. Si la lógica es larga, un if normal se lee mejor.

Pruébalo tú

Cambia el código y pulsa Ejecutar (o Ctrl + Enter).

operadores.js
Consola

Pon a prueba lo que has aprendido

[JavaScript] ¿Qué muestra la consola?
console.log("5" + 3);

[JavaScript] ¿Qué muestra la consola?
console.log(5 == "5", 5 === "5");

[JavaScript] ¿Qué muestra la consola?
const cantidad = 0;
console.log(cantidad || 10, cantidad ?? 10);

¿Te ha quedado claro? Márcala y verás tu progreso en el explorador.