En esta página

Operadores, condicionales y bucles

12 min lectura TextoCap. 1 — Fundamentos

Operadores de comparación

JavaScript tiene dos tipos de igualdad:

  • Estricta (===, !==) — Compara valor y tipo. Siempre preferida
  • Debil (==, !=) — Hace coercion de tipos antes de comparar. Evitala
0 === false   // false (distinto tipo)
0 == false    // true  (coercion: false -> 0)
'' === false  // false
'' == false   // true  (coercion: '' -> 0, false -> 0)

Operadores logicos

Operador Nombre Descripcion
&& AND Verdadero si ambos lo son
|| OR Verdadero si al menos uno lo es
! NOT Invierte el valor
?? Nullish coalescing Retorna el derecho si el izquierdo es null o undefined

Nullish coalescing vs OR

La diferencia clave es que ?? solo considera null y undefined como "vacios", mientras que || también considera 0, '' y false:

const cantidad = 0;
console.log(cantidad || 10);  // 10 (0 es falsy)
console.log(cantidad ?? 10);  // 0  (0 no es null ni undefined)

Condicionales

if / else if / else

La estructura más comun para control de flujo. Evalua condiciones secuencialmente y ejecuta el primer bloque cuya condición sea verdadera.

Operador ternario

El ternario es útil para asignaciones condicionales en una sola linea:

const mensaje = puntos > 100 ? 'Ganaste' : 'Sigue intentando';

Switch

Usa switch cuando tengas multiples valores posibles para una misma variable. No olvides break para evitar fall-through no deseado.

Bucles

JavaScript ofrece varias formas de iterar:

Bucle Uso recomendado
for Cuando necesitas el índice
for...of Para recorrer arrays y otros iterables
for...in Para recorrer claves de un objeto
while Cuando no sabes cuantas iteraciones habrá
do...while Como while, pero ejecuta al menos una vez

break y continue

  • break — Sale del bucle completamente
  • continue — Salta a la siguiente iteración

Valores truthy y falsy

JavaScript convierte valores a booleano en contextos condicionales. Los valores falsy son: false, 0, -0, 0n, "", null, undefined y NaN. Todo lo demas es truthy.

if ([]) console.log('truthy');  // se ejecuta: array vacio es truthy
if ({}) console.log('truthy');  // se ejecuta: objeto vacio es truthy

Práctica

  1. Escribe una funcion clasificadora: Crea una funcion que reciba una edad y retorne 'menor', 'adolescente' o 'adulto' usando if/else if/else. Probala con los valores 10, 15 y 25.
  2. Usa nullish coalescing y OR: Declara una variable cantidad con valor 0 y muestra en consola la diferencia entre cantidad || 10 y cantidad ?? 10. Explica por que los resultados difieren.
  3. Recorre un array con for...of: Crea un array colores con 5 colores y recorrelo con for...of, imprimiendo cada color en mayusculas con toUpperCase(). Usa continue para saltar el tercer elemento.

En la siguiente leccion aprenderemos sobre funciones modernas en JavaScript.

Evita == (igualdad debil)
Siempre usa === (igualdad estricta). La igualdad debil == hace coercion de tipos y produce resultados inesperados como 0 == '' siendo true.
Prefiere for...of
Para recorrer arrays usa for...of. Es más legible que el for clásico y funciona con cualquier iterable (strings, Maps, Sets, etc.).
javascript
// Operadores de comparación
console.log(5 === '5');   // false (estricta)
console.log(5 == '5');    // true  (coercion)
console.log(5 !== '5');   // true

// Operadores logicos
const edad = 20;
const tienePermiso = true;
const puedeEntrar = edad >= 18 && tienePermiso;
const esEstudiante = edad < 25 || edad > 60;

// Nullish coalescing
const nombre = null;
const saludo = nombre ?? 'Invitado';
console.log(saludo); // "Invitado"

// Condicionales
if (edad >= 18) {
  console.log('Mayor de edad');
} else if (edad >= 13) {
  console.log('Adolescente');
} else {
  console.log('Menor de edad');
}

// Ternario
const tipo = edad >= 18 ? 'adulto' : 'menor';

// Switch
const dia = 'lunes';
switch (dia) {
  case 'lunes':
  case 'martes':
    console.log('Inicio de semana');
    break;
  case 'viernes':
    console.log('Fin de semana laboral');
    break;
  default:
    console.log('Otro dia');
}
javascript
const frutas = ['manzana', 'banana', 'cereza'];

// for clásico
for (let i = 0; i < frutas.length; i++) {
  console.log(frutas[i]);
}

// for...of (valores) - recomendado para arrays
for (const fruta of frutas) {
  console.log(fruta);
}

// for...in (claves) - útil para objetos
const config = { tema: 'oscuro', idioma: 'es' };
for (const clave in config) {
  console.log(`${clave}: ${config[clave]}`);
}

// while
let intentos = 3;
while (intentos > 0) {
  console.log(`Intentos restantes: ${intentos}`);
  intentos--;
}

// break y continue
for (const fruta of frutas) {
  if (fruta === 'banana') continue;
  console.log(fruta); // salta banana
}