Saltar al contenido
Portada » Lenguajes » 3. Estructuras de Control en JavaScript

3. Estructuras de Control en JavaScript

Estructuras de Control en JavaScript. En programación, muchas veces no basta con ejecutar las instrucciones una tras otra; necesitamos tomar decisiones, repetir acciones o controlar el flujo del programa dependiendo de ciertos valores o condiciones. Aquí es donde entran en juego las estructuras de control, uno de los pilares fundamentales de cualquier lenguaje de programación.

En este capítulo descubrirás cómo usar instrucciones como if, else y switch para ejecutar bloques de código de forma condicional. También aprenderás a usar bucles como for y while para repetir tareas. Verás cómo las expresiones condicionales y los operadores de control de flujo como break, continue y pass (en JS no existe pass como tal, pero veremos su equivalente) te permiten dirigir el camino que tomará tu programa.

Además, exploraremos una herramienta muy compacta: las expresiones de tipo «ternario», así como las estructuras como for...of y for...in, que te facilitarán trabajar con arreglos y objetos.

Arrancamos!!!

3.1 Condicionales: if, else if, else

¿Qué son las condicionales?

Las condicionales son estructuras que nos permiten tomar decisiones dentro de nuestro código y decidir entre ejecutar una parte del código u otra. Imagina que estás programando una aplicación que verifica si un usuario es mayor de edad. No quieres que el mismo código se ejecute para alguien de 17 años que para alguien de 30. Ahí es donde entra if y sus amigos else if y else.

En JavaScript usamos estas instrucciones para evaluar condiciones lógicas. Si una condición se cumple (true), entonces se ejecuta un bloque de código. Si no se cumple, se puede probar otra condición (else if), o simplemente ejecutar un bloque alternativo (else).

Estructura básica de if

if (condición) {
  // Código a ejecutar si la condición es verdadera
}

Ejemplo:

let edad = 20;

if (edad >= 18) {
  console.log("Eres mayor de edad.");
}

Aquí, la condición edad >= 18 se evalúa como true, por lo tanto, el mensaje se muestra en la consola.

Añadiendo un else

En el ejemplo anterior, se evalua la condición de si es mayor de edad y se ejecuta la parte del código si es cierta, pero si no lo es no hace nada, continua con el resto del programa. En muchas ocasiones tendremos la necesidad de hacer una cosa u otra y luego continuar con el resto del código.

if (condición) {
  // Código si es verdadera
} else {
  // Código si es falsa
}

Ejemplo:

let edad = 15;

if (edad >= 18) {
  console.log("Eres mayor de edad.");
} else {
  console.log("Eres menor de edad.");
}

Como edad es 15, la condición se evalúa como false, así que se ejecuta el bloque else.

Añadiendo múltiples condiciones con else if

Cuando quieres comprobar más de una condición diferente, puedes usar else if tantas veces como necesitemos.

if (condición1) {
  // Si condición1 es verdadera
} else if (condición2) {
  // Si condición2 es verdadera
} else {
  // Si ninguna de las anteriores es verdadera
}

Ejemplo:

let temperatura = 30;

if (temperatura < 10) {
  console.log("Hace frío.");
} else if (temperatura >= 10 && temperatura <= 25) {
  console.log("El clima es agradable.");
} else {
  console.log("Hace calor.");
}

En este ejemplo, el código evalúa varias condiciones:

  • ¿Temperatura menor que 10? No.
  • ¿Entre 10 y 25? No.
  • Entonces ejecuta el else: «Hace calor.»

Importante sobre las condiciones

Las condiciones dentro de un if siempre deben ser expresiones booleanas, es decir, que se puedan evaluar como true o false. JavaScript puede interpretar muchos tipos de valores como verdaderos o falsos automáticamente:

Valores que se consideran falsos:

  • false
  • 0
  • "" (cadena vacía)
  • null
  • undefined
  • NaN

Todo lo demás se considera verdadero.

Ejemplo:

let nombre = "";

if (nombre) {
  console.log("Nombre válido.");
} else {
  console.log("Por favor, ingresa un nombre.");
}
// Resultado: "Por favor, ingresa un nombre." porque "" es falsy

Buenas prácticas

  • Utiliza === para comparar valores y tipo de dato (es más estricto que == que solo comprueba valores).
  • Usa sangrías y llaves {} para mantener tu código legible.
  • No abuses de múltiples else if seguidos; si hay demasiadas condiciones, considera usar switch (lo veremos en el siguiente apartado).

Ejemplo:

let nota = 7;

if (nota >= 9) {
  console.log("Sobresaliente");
} else if (nota >= 7) {
  console.log("Notable");
} else if (nota >= 5) {
  console.log("Aprobado");
} else {
  console.log("Suspenso");
}

3.2 Bucles: for, while

¿Qué son los bucles?

Los bucles (o ciclos) son estructuras que permiten repetir un bloque de código varias veces, ya sea una cantidad determinada de veces o mientras se cumpla una condición. Son extremadamente útiles cuando necesitas procesar una lista de elementos, repetir una tarea o automatizar acciones repetitivas.

JavaScript nos ofrece varias formas de hacer bucles, pero en este apartado nos vamos a centrar en los dos más comunes: for y while.

Bucle for

¿Cuándo usar for?

Cuando sabes de antemano cuántas veces necesitas repetir algo. Es muy útil para recorrer arreglos, contar, generar salidas numéricas, etc.

Sintaxis básica:

for (inicialización; condición; incremento) {
  // Código que se repite mientras la condición sea verdadera
}
  • Inicialización: Se ejecuta una vez, al principio.
  • Condición: Se evalúa antes de cada repetición. Si es true, se ejecuta el bloque.
  • Incremento/Decremento: Se ejecuta al final de cada iteración.

Ejemplo:

for (let i = 1; i <= 5; i++) {
  console.log("Iteración número: " + i);
}

Esto imprimirá:

Iteración número: 1  
Iteración número: 2  
Iteración número: 3  
Iteración número: 4  
Iteración número: 5

Cómo funciona paso a paso:

  1. let i = 1 → Se crea la variable i.
  2. Se evalúa i <= 5. Si es true, entra en el bucle.
  3. Ejecuta console.log(...).
  4. Ejecuta i++ (incrementa i en 1).
  5. Vuelve al paso 2.

Bucles for...in y for...of

– for...in

El bucle for...in se utiliza para recorrer las propiedades enumerables de un objeto. En otras palabras, itera sobre las claves (nombres de propiedades) de un objeto. Aunque los objetos todavía no los hemos visto, se verá en capítulos posteriores vamos a utilzarlos en los ejemplos para que entienas los bucles for..in y for..of

Es útil cuando estás trabajando con objetos literales y quieres saber qué propiedades contiene.

Ejemplo:

const persona = {
  nombre: "Ana",
  edad: 30,
  profesion: "Ingeniera"
};

for (let clave in persona) {
  console.log(clave + ": " + persona[clave]);
}

Salida:

nombre: Ana
edad: 30
profesion: Ingeniera

En cada iteración, clave toma el valor de una propiedad del objeto ("nombre", "edad", "profesion"), y accedemos al valor con persona[clave].

@Tip. Aunque también puedes usar for...in con arrays, no es recomendable, ya que recorre índices como strings y puede incluir propiedades heredadas.

– for...of

El bucle for...of es ideal para recorrer elementos iterables como arrays, cadenas de texto, mapas, conjuntos (Set) y más.

A diferencia de for...in, este recorre directamente los valores del iterable, no las claves.

Ejemplo con un array:

const numeros = [10, 20, 30];

for (let numero of numeros) {
  console.log(numero);
}

Salida:

10
20
30

En este ejemplo, numero toma directamente el valor de cada elemento del array.

Ejemplo con una cadena:

const palabra = "Hola";

for (let letra of palabra) {
  console.log(letra);
}

Salida:

H
o
l
a

Comparativa:

BucleRecorreÚsalo con…
forÍndices o condiciones manualesArrays, cuando necesitas el índice
for...inClaves del objetoObjetos
for...ofValores de elementosArrays, strings, Map, Set

Conclusión

  • Usa for...in para recorrer las propiedades de un objeto.
  • Usa for...of para recorrer los valores de un iterable.
  • Evita usar for...in con arrays, ya que puede darte resultados inesperados.

Bucle while

¿Cuándo usar while?

Cuando no sabes exactamente cuántas veces se repetirá la tarea, pero quieres seguir repitiendo el bucle de código mientras una condición sea verdadera.

Sintaxis básica:

while (condición) {
  // Código que se repite mientras la condición sea verdadera
}

Ejemplo:

let contador = 0;

while (contador < 3) {
  console.log("Contador: " + contador);
  contador++;
}

Imprime:

Contador: 0  
Contador: 1  
Contador: 2

Importante: asegúrate de modificar la variable dentro del bucle, o podría quedarse en un bucle infinito.

Bucle infinito (¡Cuidado!)

Un bucle que nunca termina porque su condición siempre es verdadera. Evítalo salvo casos muy concretos. Si no es intencionado puede llevarte a un bloqueo de la ejecución del programa. 

while (true) {
  console.log("¡Esto nunca termina!");
}

Este código va a ejecutarse para siempre (o hasta que el navegador o el entorno lo detenga), porque true siempre es… true.

do...while: una variante de while

Este bucle se ejecuta al menos una vez, incluso si la condición es falsa desde el principio, ya que la condición se evalúa al final del bloque de código y no al inicio.

let numero = 10;

do {
  console.log("Número: " + numero);
  numero++;
} while (numero < 5);

Resultado: aunque numero ya es mayor que 5, se ejecuta una vez.

Número: 10

Diferencias rápidas entre for y while

Característicaforwhile
Se usa cuando sabes cuántas veces se repite✅❌
Se usa cuando repites según una condición desconocida❌✅
Inicialización y control todo en una línea✅❌
Puede no ejecutarse nunca✅✅
Puede volverse infinito si no se tiene cuidado✅✅

Veamos un ejemplo comparativo entre for y while

// Usando for
for (let i = 10; i >= 1; i--) {
  console.log(i);
}

// Usando while
let j = 10;
while (j >= 1) {
  console.log(j);
  j--;
}

Ambos imprimen los números del 10 al 1, pero con sintaxis distinta. ¡Mismo resultado, diferentes caminos!

3.3 Estructura switch

¿Qué es switch?

La estructura switch en JavaScript se utiliza como una alternativa al uso de múltiples sentencias if...else if...else, especialmente cuando estás comparando una misma variable o expresión contra diferentes valores.

Su sintaxis es más limpia y legible y te permite organizar tu código de forma más ordenada cuando hay muchas opciones posibles.

Sintaxis básica

switch (expresión) {
  case valor1:
    // Código si expresión === valor1
    break;
  case valor2:
    // Código si expresión === valor2
    break;
  ...
  default:
    // Código si no se cumple ningún caso anterior
}

Detalles clave:

  • La expresión se evalúa una sola vez.
  • Se compara con cada case usando === (comparación estricta).
  • Si encuentra una coincidencia, ejecuta ese bloque.
  • break evita que el código siga ejecutando los siguientes casos (esto se llama «fall through»).
  • El bloque default se ejecuta si ninguno de los casos coincide. Es como el else de los if.

Ejemplo. Menú de opciones

let opcion = "ver";

switch (opcion) {
  case "ver":
    console.log("Mostrando contenido...");
    break;
  case "editar":
    console.log("Editando contenido...");
    break;
  case "eliminar":
    console.log("Eliminando contenido...");
    break;
  default:
    console.log("Opción no reconocida");
}

Resultado:

Mostrando contenido...

¿Qué pasa si no usamos break?

Si te fijas, en el ejemplo hemos puesto la sentencia break al final de cada una de las opciones. Break lo que hace es salir del cuerpo de la sentencia switch. Si no se incluye break el código continuará ejecutando todos los casos siguientes, incluso si no coinciden. Esto se llama fall through, y aunque a veces se usa a propósito, la mayoría de las veces es un error no intencional.

Ejemplo sin break:

let numero = 2;

switch (numero) {
  case 1:
    console.log("Uno");
  case 2:
    console.log("Dos");
  case 3:
    console.log("Tres");
  default:
    console.log("Otro número");
}

Resultado:

Dos  
Tres  
Otro número

¿Por qué? Porque no hay break, entonces después de encontrar case 2, sigue ejecutando los demás bloques.

Ejemplo. Días de la semana

let dia = 5;

switch (dia) {
  case 1:
    console.log("Lunes");
    break;
  case 2:
    console.log("Martes");
    break;
  case 3:
    console.log("Miércoles");
    break;
  case 4:
    console.log("Jueves");
    break;
  case 5:
    console.log("Viernes");
    break;
  case 6:
    console.log("Sábado");
    break;
  case 7:
    console.log("Domingo");
    break;
  default:
    console.log("Día no válido");
}

Si dia = 5, la consola mostrará:

Viernes

¿Cuándo usar switch en vez de if...else?

SituaciónRecomendación
Comparas una misma variable con valores específicos✅ Usa switch
Comparas múltiples condiciones distintas❌ Usa if...else
Tienes 2 o 3 condiciones simples❌ Mejor if...else
Tienes más de 3 o 4 posibles valores✅ switch mejora la legibilidad

3.4 Control de flujo: break, continue y pass

Ya hemos avanzando en el apartado anterior el uso de Break. Vamos a ver otros usos, además de otros comandos de control de flujo como son continue y pass.

break: salir del bucle

A parte de la utilización de break en la sentencias switch que vimos antes, podemos utilizar la instrucción break para salir completamente de un bucle (como for o while).

Es útil cuando quieres terminar la ejecución anticipadamente porque ya encontraste lo que necesitabas.

Ejemplo:

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    break;
  }
  console.log(i);
}

Salida:

1  
2

En este caso, cuando i llega a 3, el break hace que el bucle finalice completamente.

continue: salta a la siguiente iteración

La instrucción continue salta a la siguiente vuelta del bucle sin ejecutar el resto del código del ciclo actual.

Es útil cuando quieres omitir ciertos valores o condiciones, pero seguir iterando.

Ejemplo:

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;
  }
  console.log(i);
}

Salida:

1  
2  
4  
5

En este caso, cuando i vale 3, se ejecuta continue, lo cual omite ese número y pasa al siguiente.

¿Y el pass?

JavaScript no tiene una instrucción pass como en Python por ejemplo. En Python, pass se utiliza para crear un bloque vacío que no hace nada. En JavaScript, puedes simular esto simplemente no escribiendo nada dentro del bloque {} o colocando un comentario.

Ejemplo:

for (let i = 1; i <= 3; i++) {
  if (i === 2) {
    // No hacemos nada aquí (como un "pass")
  } else {
    console.log(i);
  }
}

Salida:

1  
3

Aquí, cuando i es 2, no ocurre ninguna acción, y el bucle sigue.

Otra forma más explícita podría ser:

if (i === 2) {
  // pass
}

Comparación rápida:

Instrucción¿Qué hace?
breakTermina el bucle o switch completamente.
continueSalta al siguiente ciclo del bucle.
pass(No existe en JavaScript) – se puede omitir el bloque o dejarlo vacío.

Consejos prácticos:

  • Usa break cuando ya no tiene sentido seguir ejecutando el bucle.
  • Usa continue cuando quieras evitar procesar ciertos elementos.
  • Para dejar bloques vacíos, simplemente omítelos o déjalos con un comentario.
Ejercicio 1: Clasificador de Edad
Enunciado:
Crea un programa que solicite al usuario una edad (puedes simularla con una variable). El programa debe clasificar la edad en las siguientes categorías:
Menor de edad: menos de 18 años
Adulto: entre 18 y 65 años
Jubilado: más de 65 años
Muestra por consola la categoría correspondiente.

Código:

let edad = 70;  // Puedes cambiar este valor para probar diferentes edades

if (edad < 18) {
  console.log("Eres menor de edad.");
} else if (edad <= 65) {
  console.log("Eres un adulto.");
} else {
  console.log("Eres un jubilado.");
}

Explicación:

El programa evalúa la variable edad usando una estructura if...else if...else.
Se prueban las condiciones en orden:

  1. Si es menor que 18: imprime «menor de edad».
  2. Si no, pero es menor o igual a 65: imprime «adulto».
  3. Si ninguna de las anteriores es verdadera, cae en el else e imprime «jubilado».
Ejercicio 2: Suma de los N primeros números naturales
Enunciado:
Escribe un programa que calcule la suma de los primeros N números naturales (por ejemplo, del 1 al 10). Usa un bucle for.

Código:

let N = 10;
let suma = 0;

for (let i = 1; i <= N; i++) {
  suma += i;
}

console.log("La suma de los primeros", N, "números naturales es:", suma);

Explicación:

Se utiliza un bucle for que va desde 1 hasta N.
En cada iteración, se suma el valor de i a la variable acumuladora suma.
Finalmente, se muestra el resultado por consola.

Ejercicio 3: Contador de Vocales
Enunciado:
Escribe un programa que cuente cuántas vocales (a, e, i, o, u) tiene una palabra. Usa un bucle for...of.

Código:

let palabra = "programacion";
let contador = 0;
let vocales = "aeiou";

for (let letra of palabra.toLowerCase()) {
  if (vocales.includes(letra)) {
    contador++;
  }
}

console.log(`La palabra "${palabra}" tiene ${contador} vocales.`);

Explicación:

  • Convertimos la palabra a minúsculas para evitar problemas con mayúsculas.
  • Usamos un bucle for...of para recorrer cada letra.
  • Usamos .includes() para comprobar si la letra está dentro de la cadena de vocales.
  • Si lo está, incrementamos el contador.
  • Al final mostramos cuántas vocales se encontraron.

Anterior

Índice

Logotipo Javascripot

Bibliografía

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *