Saltar al contenido principal

Instrucciones de control en JavaScript: Guía con ejemplos y ejercicios

Instrucciones de control en JavaScript

Domina las instrucciones de control en JavaScript. Aprende condicionales, bucles y más con ejemplos claros y ejercicios para programar desde cero.

¿Qué son las instrucciones de control en JavaScript?​

Las instrucciones de control en JavaScript son estructuras que permiten dirigir el flujo de ejecución del código según ciertas condiciones o repeticiones. Estas instrucciones son fundamentales para crear programas dinámicos y adaptativos.

Importancia de las estructuras de control en la programación​

Las estructuras de control son esenciales en la programación porque permiten:

  • Tomar decisiones basadas en condiciones específicas.

  • Repetir bloques de código para realizar tareas múltiples.

  • Mejorar la legibilidad y mantenibilidad del código.

Tipos de instrucciones de control en JavaScript​

Sentencias condicionales​

Las sentencias condicionales permiten ejecutar diferentes bloques de código según si una condición es verdadera o falsa.

if y else​

La estructura básica de una sentencia if es:

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

Ejemplo:

let edad = 18;

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

else if​

Puedes encadenar múltiples condiciones usando else if:

if (condición1) {
  // Código si condición1 es verdadera
} else if (condición2) {
  // Código si condición2 es verdadera
} else {
  // Código si ninguna condición es verdadera
}

Ejemplo:

let nota = 85;

if (nota >= 90) {
  console.log("Sobresaliente");
} else if (nota >= 75) {
  console.log("Aprobado");
} else {
  console.log("Reprobado");
}

switch​

La sentencia switch es útil para comparar una variable con múltiples valores posibles:

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 ningún caso coincide
}

Ejemplo:

let dia = 3;

switch (dia) {
  case 1:
    console.log("Lunes");
    break;
  case 2:
    console.log("Martes");
    break;
  case 3:
    console.log("Miércoles");
    break;
  default:
    console.log("Otro día");
}

Operador ternario ? : en JavaScript​

El operador ternario es una forma concisa de escribir una sentencia if...else. La sintaxis es:

condición ? expresiónSiVerdadero : expresiónSiFalso;

Ejemplo:

let edad = 20;

let mensaje = edad >= 18 ? "Eres mayor de edad." : "Eres menor de edad.";

console.log(mensaje); // Imprime: Eres mayor de edad.

Bucles​

Los bucles permiten repetir un bloque de código varias veces hasta que se cumpla una condición específica.

for​

El bucle for se utiliza cuando sabes cuántas veces quieres repetir un bloque de código:

for (inicialización; condición; incremento) {
  // Código a ejecutar en cada iteración
}

Ejemplo:

for (let i = 0; i < 5; i++) {
  console.log("Número: " + i);
}

while​

El bucle while repite un bloque de código mientras una condición sea verdadera:

while (condición) {
  // Código a ejecutar mientras la condición sea verdadera
}

Ejemplo:

let contador = 0;

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

do...while​

El bucle do...while ejecuta el bloque de código al menos una vez y luego repite mientras la condición sea verdadera:

do {
  // Código a ejecutar
} while (condición);

Ejemplo:

let numero = 0;

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

Bucle for...in para recorrer objetos​

El bucle for...in se utiliza para iterar sobre las propiedades enumerables de un objeto:

let persona = {
  nombre: "Juan",
  edad: 30,
  ciudad: "Madrid",
};
for (let clave in persona) {
  console.log(clave + ": " + persona[clave]);
}

Bucle for...of para recorrer objetos​

El bucle for...of se utiliza para iterar sobre objetos iterables como arrays, strings, mapas, conjuntos, entre otros:

let frutas = ["Manzana", "Banana", "Cereza"];

for (let fruta of frutas) {
  console.log(fruta);
}

Diferencias entre for...in y for...of​

  • for...in itera sobre las propiedades enumerables de un objeto, incluyendo las propiedades heredadas. Es ideal para objetos.

  • for...of itera sobre los valores de objetos iterables como arrays, strings, mapas y conjuntos. No funciona con objetos normales.

Instrucciones de control adicionales​

break​

La instrucción break se utiliza para salir de un bucle o una sentencia switch antes de que termine su ejecución normal.

Ejemplo:

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // Sale del bucle cuando i es 5
  }
  console.log(i);
}

continue​

La instrucción continue se utiliza para saltar a la siguiente iteración de un bucle, omitiendo el código restante en la iteración actual.

Ejemplo:

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    continue; // Salta los números pares
  }
  console.log(i); // Imprime solo números impares
}

Instrucciones de control anidadas​

Las instrucciones de control pueden anidarse dentro de otras instrucciones para crear estructuras más complejas.

Ejemplo:

let edad = 20;

if (edad >= 18) {
  console.log("Eres mayor de edad.");
  for (let i = 0; i < 3; i++) {
    console.log("Iteración: " + i);
  }
} else {
  console.log("Eres menor de edad.");
}

Manejo de errores con try...catch​

La estructura try...catch se utiliza para manejar errores en el código. El bloque try contiene el código que puede generar un error, y el bloque catch contiene el código que se ejecuta si ocurre un error.

try {
  // Código que puede causar un error
  let resultado = 10 / 0;
  console.log(resultado);
} catch (error) {
  // Código para manejar el error
  console.log("Ocurrió un error: " + error.message);
}

Uso de throw para lanzar excepciones​

La instrucción throw se utiliza para lanzar una excepción personalizada. Puedes lanzar cualquier tipo de valor, pero comúnmente se lanzan objetos de error.

function dividir(a, b) {
  if (b === 0) {
    throw new Error("No se puede dividir por cero.");
  }
  return a / b;
}

try {
  let resultado = dividir(10, 0);
  console.log(resultado);
} catch (error) {
  console.log("Ocurrió un error: " + error.message);
}

Ejemplos prácticos de try...catch...finally​

El bloque finally se ejecuta siempre, independientemente de si se lanzó una excepción o no. Es útil para realizar tareas de limpieza.

try {
  let resultado = dividir(10, 0);
  console.log(resultado);
} catch (error) {
  console.log("Ocurrió un error: " + error.message);
} finally {
  console.log("Ejecución finalizada.");
}

Casos prácticos y buenas prácticas​

Ejemplo práctico: Validación de formulario​

function validarFormulario(nombre, edad) {
  if (nombre === "") {
    console.log("El nombre es obligatorio.");
    return;
  }
  if (edad < 0 || edad > 120) {
    console.log("La edad no es válida.");
    return;
  }
  console.log("Formulario válido.");
}

validarFormulario("Ana", 25); // Formulario válido.

validarFormulario("", 25); // El nombre es obligatorio.

validarFormulario("Ana", 130); // La edad no es válida.

Recorrer arrays con bucles​

let numeros = [1, 2, 3, 4, 5];

for (let i = 0; i < numeros.length; i++) {
  console.log("Número: " + numeros[i]);
}

// Usando for...of

for (let numero of numeros) {
  console.log("Número: " + numero);
}

// Usando forEach

numeros.forEach(function (numero) {
  console.log("Número: " + numero);
});

// Usando map para crear un nuevo array

let cuadrados = numeros.map(function (numero) {
  return numero * numero;
});

console.log(cuadrados); // [1, 4, 9, 16, 25]

Buenas prácticas para escribir instrucciones de control en JavaScript​

  • Mantén el código limpio y legible utilizando sangrías y espacios adecuados.

  • Evita anidar demasiadas instrucciones de control para mejorar la legibilidad.

  • Usa comentarios para explicar bloques de código complejos.

  • Prefiere estructuras claras como switch cuando tengas múltiples condiciones basadas en el mismo valor.

Resumen​

Las instrucciones de control en JavaScript son fundamentales para dirigir el flujo de ejecución del código. Las sentencias condicionales (if, else, switch) permiten tomar decisiones basadas en condiciones, mientras que los bucles (for, while, do...while) facilitan la repetición de bloques de código. Además, las instrucciones como break, continue, y el manejo de errores con try...catch son esenciales para escribir código robusto y eficiente. Siguiendo buenas prácticas, puedes mejorar la legibilidad y mantenibilidad de tu código.

Recursos
Ejercicios

💻 Prueba estos ejercicios básicos sobre instrucciones de control en JavaScript: