Marc Semper Lloret
← JavaScript: el lenguaje

Sesión 3 · Semana 1

Operadores, conversión y comparación

Hoy · Hoja de ruta

  1. 1. Aprende: Cómo opera JavaScript entre tipos distintos y por qué comparamos siempre con el triple igual.
  2. 2. Haz: Predice el resultado de una batería de expresiones y comprueba tus predicciones.
  3. 3. Comprueba: Aciertas la mayoría y sabes explicar las que fallas.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Qué crees que vale "3" + 1? ¿Y "3" - 1?
  2. Un campo de formulario, ¿te devolverá un número o un texto?
  3. ¿Qué significa para ti que dos valores sean «iguales»?

Los operadores

7 + 2      // 9
7 - 2      // 5
7 * 2      // 14
7 / 2      // 3.5
7 % 2      // 1   resto de la división
7 ** 2     // 49  potencia

El resto, %, parece anecdótico y no lo es: es como se detecta un número par (n % 2 === 0) o se recorre algo en ciclo.

Estos son los de asignación abreviada:

let stock = 10;
stock += 5;    // 15
stock -= 2;    // 13
stock++;       // 14

La conversión automática, el gran tropiezo

JavaScript, cuando mezclas tipos, convierte por su cuenta:

"3" + 1      // "31"   con texto, el + concatena
"3" - 1      // 2      el - no sabe concatenar: convierte a número
"3" * "2"    // 6
true + 1     // 2      true vale 1

La regla práctica: la suma con un texto a un lado concatena; el resto de operadores aritméticos convierten a número.

Esto no es una curiosidad de examen. Es exactamente el fallo que te espera en la UD4, cuando leas el valor de un campo:

const introducido = "10";      // lo que da un campo de formulario
introducido + 5                // "105"   ← el error clásico
Number(introducido) + 5        // 15      ← lo correcto

Convierte tú, en el borde de tu programa

Todo lo que entra desde fuera —un formulario, una URL, un fichero, una API— llega como texto. Conviértelo en el momento de leerlo y opera después con números de verdad. Si conviertes tarde, arrastras el texto por medio programa.

Y comprueba el resultado: Number("hola") da NaN, que es un número que significa «esto no era un número».

Number("10")       // 10
Number("10,5")     // NaN   ← la coma no es el separador decimal
parseInt("10px")   // 10    se queda con lo que puede leer
parseFloat("10.5") // 10.5
Number.isNaN(Number("hola"))   // true

Comparar: dos iguales frente a tres

5 == "5"     // true   compara después de convertir
5 === "5"    // false  compara valor y tipo
null == undefined    // true
null === undefined   // false

En este módulo se compara con el triple igual

Siempre. El doble igual convierte antes de comparar, y esas conversiones tienen casos que nadie recuerda de memoria. Escribir un carácter más no cuesta nada y elimina una familia entera de errores.

Valores «verdaderos» y «falsos»

En un if, JavaScript pregunta si el valor es truthy o falsy. Los falsos son exactamente estos seis:

false, 0, "", null, undefined, NaN

Todo lo demás es verdadero, incluidos "0", "false", [] y {}. Esto explica un fallo muy común:

const unidades = 0;

if (unidades) {
  // no entra: 0 es falsy, aunque sea un valor perfectamente válido
}

if (unidades !== undefined) {
  // esto sí comprueba lo que querías comprobar
}

Estos son los operadores lógicos:

true && false     // false   y
true || false     // true    o
!true             // false   no

const nombre = entrada || "Sin nombre";      // si entrada es falsy
const stock = recibido ?? 0;                 // solo si es null o undefined

El segundo suele ser el que quieres: el || también sustituiría un 0 legítimo.

Tarea 3 · Predice y comprueba

Crea js/predicciones.js. Para cada expresión, escribe primero tu predicción en un comentario y después ejecútala:

"5" + 3
"5" - 3
5 + true
"10" > 9
"10" > "9"
0 === -0
NaN === NaN
[] == false
null + 1
undefined + 1
Number("")
Boolean("false")

Después, sobre tu proyecto:

  1. Simula tres datos «de formulario» como textos.
  2. Conviértelos correctamente.
  3. Calcula un total y comprueba que no es NaN.
  4. Escribe una comprobación que detecte una entrada no numérica.
Objetivo mínimoDoce predicciones escritas, comprobadas, y las falladas explicadas.
Si lo tienesEscribe cinco expresiones tramposas para un compañero y corregidlas juntos.
RetoExplica por qué "10" > "9" es falso y "10" > 9 verdadero.

Checkpoint · fin de la sesión 3

  • Predices el resultado de una mezcla de tipos y aciertas.
  • Conviertes la entrada al leerla y compruebas NaN.
  • Comparas siempre con el triple igual.
  • Recitas los seis valores falsy.

Cierre de la semana 1

  • Tu código se ejecuta desde un fichero externo en todo el sitio.
  • Modelas un producto con variables bien nombradas y del tipo correcto.
  • Sabes por qué un campo de formulario nunca te dará un número.
  • Tienes un fichero de predicciones que puedes releer cuando algo raro pase.
Ver respuestas de la sesión 3

De arriba abajo: "53", 2, 6, true (convierte a número), false (compara texto con texto, y el «1» va antes que el «9»), true, false (nada es igual a NaN), true, 1, NaN, 0, true (es un texto no vacío).

Microprueba semanal 1 · 5–10 minutos

Individual, sin IA y sin apuntes.

  1. Di qué imprime "5" + 3 y qué imprime "5" - 3, y por qué son distintos.
  2. Declara tres variables eligiendo const o let, y justifica cada elección en cinco palabras.
  3. Enumera los seis valores falsy.
---