¿En validaciones, qué decisión evita errores de coerción?

Comparacin estricta reduce resultados inesperados.

Operadores en JavaScript: pensar como la máquina para decidir mejor

Domina operadores aritméticos, de comparación, lógicos y de asignación para construir condiciones fiables, evitar bugs de coerción y escribir reglas de negocio claras.

¿Cuánto sabes de JavaScript?

📘 Teoría

Mapa mental: qué operador usar y cuándo

Elegir bien operador = decisiones previsibles en tu código.

No todos los operadores resuelven el mismo problema. Hay operadores para calcular, para comparar, para combinar condiciones y para asignar valores con intención.

Si interiorizas esta clasificación, te resultará mucho más fácil construir lógica limpia en vez de encadenar parches.

Aritméticos

Transforman números.

+, -, *, /, %
Cálculos de precio, IVA, descuentos, medias

Comparación

Responden con true/false.

===, !==, >, =, =
Útiles en validación y reglas de acceso

Lógicos

Combinan condiciones.

&&, ||, !
Sistemas de permisos y filtros compuestos

Asignación

Actualizan estado rápidamente.

=, +=, -=, *=, /=
Contadores y acumuladores

Aritméticos + asignación compuesta: calcula sin ruido

Menos líneas, misma claridad, cero magia.

En proyectos reales vas a actualizar importes y contadores constantemente. Ahí brillan los operadores compuestos como += o -=.

Úsalos cuando el objetivo sea explícito: acumular, descontar, incrementar. Si la expresión se vuelve compleja, separa en variables intermedias para mantener legibilidad.

% te ayuda con patrones cíclicos (turnos, filas pares/impares, paginación).
++ y -- son cómodos, pero evita abusar dentro de expresiones largas.
Si hay dinero de por medio, redondea al final (toFixed o utilidades de formato).

Carrito con acumulador y descuento

let subtotal = 0;

subtotal += 24.99; // camiseta
subtotal += 14.5;  // gorra
subtotal += 8;     // envío base

const descuento = subtotal * 0.1;
const total = subtotal - descuento;

console.log({ subtotal, descuento, total });

Comparaciones sin sustos: siempre estrictas por defecto

=== y !== son tu red de seguridad.

Con ==, JavaScript convierte tipos para intentar que la comparación salga 'bien'. El problema es que para negocio real ese comportamiento suele ser ruido, no ayuda.

La norma profesional es simple: usa === y !== salvo casos muy concretos y bien justificados.

Comparar códigos de API

const statusApi = '200';
const statusEsperado = 200;

console.log(statusApi == statusEsperado);  // true (coerción)
console.log(statusApi === statusEsperado); // false (seguro)

Operadores lógicos y short-circuit

No solo combinan condiciones: también permiten valores por defecto con criterio.

&& devuelve el primer valor falsy o el último truthy. || devuelve el primer truthy. Esto se llama short-circuit y se usa constantemente en frontend.

Si te apoyas en este patrón, puedes escribir validaciones compactas y componentes más robustos.

Usa || para fallback rápido de cadenas vacías o valores nulos.
No metas demasiadas condiciones en una sola línea: extrae variables booleanas intermedias.
Si la regla es crítica, escribe la condición en varias líneas y documenta intención.

Permisos + fallback de configuración

const usuario = { rol: 'editor', activo: true };
const puedePublicar = usuario.activo && (usuario.rol === 'admin' || usuario.rol === 'editor');

const titulo = '';
const tituloUI = titulo || 'Sin título';

console.log({ puedePublicar, tituloUI });

Operador ternario: excelente para decisiones pequeñas

Si cabe en una frase, el ternario suele mejorar lectura.

El ternario (condicion ? A : B) funciona muy bien para asignar etiquetas o estilos en una sola decisión.

Evita ternarios anidados en básico: dificultan depuración y confunden al leer.

Estado visual para stock

const stock = 3;
const badge = stock > 0 ? 'Disponible' : 'Agotado';
console.log(badge);

Errores reales que vas a cometer (y cómo salir rápido)

Aprender operadores también es aprender a depurar operadores.

Error típico 1: usar = dentro de condición por inercia. Error típico 2: mezclar strings y números y comparar sin convertir.

Error típico 3: condiciones gigantes sin nombres. Solución: divide en booleanos con nombres semánticos como esMayorDeEdad o tieneSaldo.

Depuración por pasos

const edad = '18';
const minimo = 18;

console.log('edad', edad, typeof edad);
console.log('minimo', minimo, typeof minimo);

const acceso = Number(edad) >= minimo;
console.log('acceso', acceso);

1 Mapa mental: qué operador usar y cuándo 2 Aritméticos + asignación compuesta: calcula sin ruido 3 Comparaciones sin sustos: siempre estrictas por defecto 4 Operadores lógicos y short-circuit 5 Operador ternario: excelente para decisiones pequeñas 6 Errores reales que vas a cometer (y cómo salir rápido)

🧭 Visuales clave

Operadores en JavaScript

Resume como se evaluan expresiones para tomar decisiones en codigo.

Esquema de operadores aritmeticos, logicos y de comparacion

De variables a resultados con operadores

Ayuda a visualizar que los operadores no son símbolos sueltos: son el puente entre datos guardados y decisiones del programa.

Diagrama que conecta variables de entrada, operadores y resultados numéricos o booleanos

🧪 Aprende probando

Ejemplo Ejemplo guiado: calcular precio final con condiciones Combina aritméticos, comparación y ternario en un escenario de ecommerce.

⌄

Ejemplo Ejemplo guiado: regla de acceso por rol y estado Diseña una condición compuesta legible usando variables booleanas intermedias.

⌄

Ejemplo Demo interactiva: simulador de presupuesto mensual Ajusta ingresos/gastos y comprueba cómo los operadores cambian la decisión financiera.

⌄

🏁 Retos

Reto Reto 1: clasificador de nivel de riesgo Usa comparaciones y lógicos para asignar un nivel en función de deuda e ingresos.

⌄

Reto Reto 2: acumulador con filtro de valores válidos Recorre un array, suma solo números positivos y descarta el resto con operadores de comparación.

⌄

🧰 Recursos

Enlaces útiles

MDN: Expresiones y operadores javascript.info: Comparisons javascript.info: Logical operators MDN: Igualdad estricta (===) MDN: Operador condicional (ternario) MDN: Operadores lógicos

Test

Comprueba tus conocimientos con un test sobre JavaScript.

Test de JavaScript

Recursos del curso 62

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 06

Tipos y coerción en JavaScript: evita bugs silenciosos

Lección 08

Control de flujo: diseña decisiones claras con if, else if y switch

›