Tema 4 · Fundamentos

Operadores y Comparación Estricta

Aprende a realizar operaciones matemáticas y lógicas, y comprende por qué en JavaScript siempre debes usar igualdad estricta (===) en lugar de igualdad débil (==).

Tipos de Datos Primitivos y typeof Cadenas y Template Literals

Operadores Aritméticos y Asignación

JavaScript provee todos los operadores de cálculo estándar para manipular números y variables numéricas:

  • + (Suma), - (Resta), * (Multiplicación), / (División).
  • % (Módulo o resto): Retorna el residuo de una división entera (ej: 10 % 3 resulta en 1). Muy útil para saber si un número es par o impar.
  • ** (Exponenciación): Calcula potencias (ej: 2 ** 3 es 8).
  • ++ y --: Incremento y decremento en una unidad.

Igualdad Estricta (===) vs Igualdad Débil (==)

Operador Nombre ¿Cómo Compara? Ejemplo
=== Igualdad Estricta Compara valor Y tipo de dato. No realiza conversión implícita. Es el estándar recomendado. 5 === "5" resulta false (número vs texto).
== Igualdad Débil Convierte los tipos antes de comparar (coerción implícita). Fuente común de errores y vulnerabilidades. 5 == "5" resulta true.
!== Desigualdad Estricta Retorna true si los valores o los tipos son diferentes. 5 !== "5" resulta true.

Operadores Lógicos y Coalescencia Nula (??)

Para combinar condiciones lógicas se usan && (Y lógico), || (O lógico) y ! (Negación).

En ES2020 se introdujo el operador Nullish Coalescing (??), que retorna el valor de la derecha únicamente si el valor de la izquierda es estrictamente null o undefined: 

let intentos = 0;
// Con || el 0 se considera "falsy" y toma el valor por defecto:
let val1 = intentos || 10;   // 10 (Incorrecto si 0 era un valor válido)

// Con ?? solo se reemplaza si es null o undefined:
let val2 = intentos ?? 10;   // 0 (Correcto)

⚡ Comparación Estricta vs Débil en Vivo

Ingresa un número y compáralo contra un string con ambos operadores para ver la diferencia en tiempo real:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Operadores de Comparación en JS</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-comp { max-width: 520px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .resultado-caja { background: #f1f5f9; border-left: 4px solid #0284c7; padding: 12px; margin-top: 15px; border-radius: 4px; }
    .btn { background: #0284c7; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; }
  </style>
</head>
<body>

  <div class="card-comp">
    <h3 style="margin-top: 0; color: #0f172a;">Calculadora de Comparación</h3>
    <p>Vamos a comparar el número <code>10</code> contra el texto <code>"10"</code>:</p>

    <button class="btn" onclick="ejecutarComparacion()">Evaluar Operadores</button>

    <div id="resultado" class="resultado-caja">
      Presiona el botón para ejecutar la prueba...
    </div>

    <script>
      function ejecutarComparacion() {
        const num = 10;
        const str = "10";

        const resDebil = (num == str);
        const resEstricto = (num === str);

        document.getElementById('resultado').innerHTML = `
          <strong>Resultados:</strong><br>
          • Débil: <code>10 == "10"</code> &rarr; <strong>${resDebil}</strong> (hizo conversión automática)<br>
          • Estricto: <code>10 === "10"</code> &rarr; <strong style="color: #ef4444;">${resEstricto}</strong> (detectó que son tipos diferentes)<br>
          <br>
          <small>💡 <em>Conclusión: Usa siempre <code>===</code> para evitar bugs inesperados.</em></small>
        `;
      }
    </script>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.