Tutorial de Javascript y las mejoras desde ES6 (ES2015) hasta ES10 (ES2019) – Parte 3 (Control de flujo y bucles)

Controlando el flujo y realizando bucles

Javascript nos ofrece un conjunto de sentencias para controlar el flujo de nuestro código:

  • Sentencia de bloque: Esta sentencia se usa para agrupar más sentencias, usando ‘{‘ para abrir el bloque y ‘}‘ para cerrar el bloque.
    • if (true) {
         let valor = 123;
         console.log(valor);
      } else {
         console.log('false');
      }
  • Sentencia condicional: Es un grupo de sentencias que se ejecutan si una condición es verdadera, y Javascript nos ofrece diferentes sentencias:
    • if: Utilizada para comprobar si una condición (lógica) es verdadera
    • const estado = true;
      if (estado) {
         console.log('Verdadero');
      }

       

    • else: Se usa en combinación con if, para ejecutar una sentencia si la condición es falsa.
    • const estado = false;
      
      if (estado) {
         console.log('Verdadero');
      } else {
         console.log('Falso');
      }

       

    • else if: Se usa para realizar sentencias más complejas, y como ocurre con else, también se usa en combinación con if. Debemos tener en cuenta que, en las condiciones múltiples solo se ejecutara la primera condición verdadera.
    • const edad = 20;
      
      if (edad < 18) {
         console.log('No puedes acceder. La edad mínima son 18 años');
      } else if (edad >= 18 && edad <=65) {
         console.log('Bienvenido!!!!!');
      } else if (edad > 65 && edad <= 90) {
         console.log('Bienvenido!!!!!, tiene descuento ORO');
      } else {
         console.log('La edad indicada no es correcta o válida');
      }

       

    • switch: Con esta sentencia se comprueba una expresión (switch) e intenta igualar el valor a la expresión de la etiqueta (case).
    • Si la expresión de la sentencia switch coincide con la etiqueta case entonces la sentencia asociada se ejecutara, en caso de no encontrar ninguna coincidencia entonces ejecutara la opción default.
    • Otra cosa a tener en cuenta es la sentencia break, ya que es la encargada de finalizar la sentencia switch. En el caso de que no la usemos la sentencia switch continuara ejecutando las siguientes sentencias.
    • const opcion = 'alta';
      switch (opcion) {
          case 'alta':
              console.log('Dar de alta');
              break;
          case 'baja':
              console.log('Dar de baja');
              break;
          case 'modificacion':
              console.log('Realiza una modificación');
              break;
          case 'consulta':
              console.log('Consultar información');
              break;
          default:
              console.log('¿Que operación deseas realizar?');
      }

       

  • Sentencia de manejo de excepciones: Se utiliza para lanzar excepciones.
    • Para lanzar las excepciones usamos la sentencia throw, en combinación con try – catch – [finally]
    • Podemos lanzar cualquier objeto, número, boleano o strings.
    • throw: Con esta sentencia lanzamos una excepción parando el flujo de javascript, y como habíamos comentado en el punto anterior podemos lanzar cualquier tipo.
    • const errorMsn = msn => alert(msn);
      throw 'texto';
      throw 200;
      throw false;
      throw { status: ok, code: 200 };
      throw errorMsn('Error');
      
    • try..catch..finally: Con la sentencia try creamos un bloque de código que se evaluará. A continuación puede ir seguida o no de la sentencia catch, finalizando si quisiéramos de la sentencia finally.
    • El flujo de estas sentencias seria el siguiente.
      • Se ejecuta el código dentro de try, y si falla saltaría el bloque catchSi existiera un bloque finally se ejecutaría el código.
      • Se ejecuta el código dentro de try, y si todo es correcto ignora el bloque catch. Si existiera un bloque finally se ejecutaría el código.
      • // Error en TRY
        
        var t = () => {
          try {
            console.log('1');
            throw 'Error desde try';
            } catch (error) {
            console.log('2');
            return 'Return desde catch' + error;
            } finally {
            console.log('3');
            return 'Finally';
            }
        }
        t();
        
        // Resultado
        
        1
        2
        3
        "Finally"
      • // Sin error en TRY
        
        var t = () => {
          try {
            console.log('1');
            } catch (error) {
            console.log('2');
            return 'Return desde catch' + error;
            } finally {
            console.log('3');
            return 'Finally';
            }
        }
        t();
        
        // Resultado
        1
        3
        "Finally"

Ahora que ya sabemos como controlar el flujo de nuestro código, vamos a ver que son lo bucles y las iteraciones.

Bucles e iteraciones

Para realizar bucles e iteraciones Javascript nos ofrece las siguiente sentencias.

  • for: Es un bucle que se repite hasta que la condición que se evalúa sea falsa (false).
  • const maximo = 10;
    for (let cont = 0; cont < maximo; cont++) {
      console.log(`Número: ${cont}`);
    }
    
    // Resultado
    
    Número: 0 
    // cont = 0; 0 < 10 = true; Ejecuta el bloque de código; Cuando termina incrementa la variable cont (cont++) -> cont = 1
    Número: 1 
    // cont = 1; 0 < 10 = true; Ejecuta el bloque de código; Cuando termina incrementa la variable cont (cont++) -> cont = 2
    Número: 2 
    // cont = 2; 0 < 10 = true; Ejecuta el bloque de código; Cuando termina incrementa la variable cont (cont++) -> cont = 3
    Número: 3 
    // cont = 3; 0 < 10 = true; Ejecuta el bloque de código; Cuando termina incrementa la variable cont (cont++) -> cont = 4
    Número: 4 
    // cont = 4; 0 < 10 = true; Ejecuta el bloque de código; Cuando termina incrementa la variable cont (cont++) -> cont = 5
    Número: 5 
    // cont = 5; 0 < 10 = true; Ejecuta el bloque de código; Cuando termina incrementa la variable cont (cont++) -> cont = 6
    Número: 6 
    // cont = 6; 0 < 10 = true; Ejecuta el bloque de código; Cuando termina incrementa la variable cont (cont++) -> cont = 7
    Número: 7 
    // cont = 7; 0 < 10 = true; Ejecuta el bloque de código; Cuando termina incrementa la variable cont (cont++) -> cont = 8
    Número: 8 
    // cont = 8; 0 < 10 = true; Ejecuta el bloque de código; Cuando termina incrementa la variable cont (cont++) -> cont = 9
    Número: 9 
    // cont = 9; 0 < 10 = true; Ejecuta el bloque de código; Cuando termina incrementa la variable cont (cont++) -> cont = 10; En este punto realiza la comprobación 10 < 10 y es false no ejecutando el bloque de código y saliendo de la sentencia for
    
  • do…while: Es un bucle que se repite hasta que la condición que se evalúa sea falsa (false).
  • En este tipo de bucles siempre se entra la primera vez ejecutando el código y si la condición es falsa sale del bucle.
  • let cont = 0;
    do {
      console.log(`Número: ${cont}`);
      cont++;
    } while (cont < 5);
    
    // Resultado
    
    Número: 0
    Número: 1
    Número: 2
    Número: 3
    Número: 4
  • let cont = 5;
    do {
      console.log(`Número: ${cont}`);
      cont++;
    } while (cont < 5);
    
    // Resultado
    Número: 5
  • while: Como ocurre con la sentencia do…while, se ejecuta hasta que la condición que se evalúa sea falsa (false), pero en este caso si la condición no se cumple no entra en el bucle.
  • let cont = 0;  
    while (cont < 5) { 
        console.log(`Número: ${cont}`); 
        cont++; 
    }
    Número: 0
    Número: 1
    Número: 2
    Número: 3
    Número: 4
  • let cont = 5; 
    while (cont < 5) { 
       console.log(`Número: ${cont}`); 
       cont++; 
    }
    
    // Resultado
    
    No cumple la condición no ejecuta el bucle
    
  • for…in: Con esta sentencia realizamos una iteración sobre todas las propiedades enumerables de un objeto.
  • const datos = { nombre: 'a', apellidos: 'b', edad: 100 };
    
    for (dato in datos) {
       console.log(datos, dato, datos[dato]);
    }
    {nombre: "a", apellidos: "b", edad: 100} "nombre" "a"
    {nombre: "a", apellidos: "b", edad: 100} "apellidos" "b"
    {nombre: "a", apellidos: "b", edad: 100} "edad" 100
    
  • for…of: Itera sobre objetos iterables incluyendo Array, Map, Set, argumentos, objetos, etc…
  • let test = ['a', 'b'];
    test.data = 121
    
    // Recorriendo con for...in devuelve el nombre de las propiedades
    for (let data in test) { 
       console.log(data); 
    }
    // Resultado
    0
    1
    data
    
    // Recorriendo con for...of devuelve el valor de las propiedades
    for (let data of test) { 
       console.log(data); 
    }
    // Resultado
    a
    b

Con esto hemos finalizado esta entrada donde hemos aprendido como controlar el flujo de nuestro código y como realizar bucles.

En la siguiente entrada veremos que son los Arrays, Objetos y las funciones.