Estructuras de Control

Por medio de las estructuras de control podemos controlar el flujo de nuestro código y como queremos que se ejecute según se cumplan o no algunas condiciones
Una de las estructuras más conocidas es el if y en español podemos reconocerlo como si entonces
Esta estructura espera una condición true para que ingrese y ejecute el código que tiene dentro de su bloque

Como vemos en esta imágen tenemos una condición que se va a resolver en true o false
En caso de que la condición sea verdadera (true) se va a ejecutar las distintas instrucciones
En caso de que la condición sea negativa (false) no se ejecutan las instrucciones declaradas dentro de esta estructura y el código sigue su flujo

// Estructura básica de un if
if (condicion) {
  // Se ejecuta el código que se escriba en esta sección si la condición 
  // es verdadera.
}

if (true) {
  console.log('Se muestra este texto ya que la condición es true');
}

Como podemos ver en el ejemplo anterior siempre se va a mostrar el mensaje ya que la condición siempre va a ser true
Podemos escribir distintas condiciones que nos permitan elegir si vamos a ejecutar el código dentro de la estructura o no
Por ejemplo podemos preguntar SI el numero es mayor o igual que 2 Entonces mostrar un mensaje en consola

let numero = 2;
// SI numero >= 2 ENTONCES mostrar en consola
if (numero >= 2) {
  console.log('El numero es mayor o igual a 2');
}

El flujo del código se sigue ejecutando sin importar el resultado del if

let numero = 1;
if (numero >= 2) {
  console.log('Este mensaje no se ve');
}
console.log('Este mensaje se ve siempre se cumpla o no la condición del if');

También existe la estructura if/else que nos permite controlar que pasa si la condición es falsa
Es decir que en caso de que la condición sea verdadera entra en una parte de la estructura
En caso de ser falsa la condición entonces entra en la otra sección
Utilizamos la palabra SI NO para el else

if/else

if (condicion) {
  // Entra en esta sección si se cumple la condición
} else {
  // Entra en esta sección si no se cumple la condición
}

let numero = 2;
if (numero === 2) {
  console.log('El número es 2');
} else {
  console.log('El número no es 2');
}

Podemos leer este código de la siguiente manera: SI el número es igual a 2 entonces mostrar el mensaje 'El número es 2' SINO mostrar el mensaje 'El número no es 2'

Operador Ternario

Existe una manera más corta de escribir un if/else y es por medio del operador ternario
Se escribe de la siguiente manera: (condicion) ? true : false
Es decir que dada una condición se ejecuta una parte o la otra

let numero = 2;
let mensaje = (numero === 2) ? 'El numero es 2' : 'El numero no es 2';
console.log(mensaje);

If Anidados

Podemos anidar estructuras if/else/if para validar distintas condiciones

if (condicion) {
  // primer condicion
} else if (otraCondicion) {
  // segunda condicion
} else {
  // Si no se cumplio ninguna de las anteriores ingresa acá
}

let nombre = 'Marta';
if (nombre === 'Miriam') {
  console.log('El nombre de la usuaria es Miriam');
} else if (nombre === 'Felipa') {
  console.log('El nombre de la usuaria es Felipa');
} else {
  console.log('El nombre de la usuaria no es Marta ni Felipa');
}

Podemos ver en este ejemplo que podemos preguntar por distintas condiciones
Utilizar muchos if's anidados no es una buena práctica

Switch

En uno de los ejemplos anteriores necesitabamos mostrar un mensaje según el nombre del usuario

let nombre = 'Marta';
if (nombre === 'Miriam') {
  console.log('El nombre de la usuaria es Miriam');
} else if (nombre === 'Felipa') {
  console.log('El nombre de la usuaria es Felipa');
} else {
  console.log('El nombre de la usuaria no es Marta ni Felipa');
}

En caso de querer seguir agregando condiciones para más nombres se nos puede volver medio caos el código

let nombre = 'Marta';
if (nombre === 'Miriam') {
  console.log('El nombre de la usuaria es Miriam');
} else if (nombre === 'Felipa') {
  console.log('El nombre de la usuaria es Felipa');
} else if (nombre === 'Xime') {
  console.log('El nombre de la usuaria es Xime');
} else if (nombre === 'Belu') {
  console.log('El nombre de la usuaria es Belu');
} else {
  console.log('El nombre de la usuaria no es Marta, Felipa, Xime o Belu');
}

Existe otra forma de escribir esta estructura y que hace que sea más fácil leer e interpretar este código
Esta estructura se conoce como switch y nos permite evaluar un valor con diferentes opciones
Decimos SEGUN tal condicion ENTONCES hacemos tal o cual cosa

let nombre = 'marta';
let mensaje = null;
switch (nombre) {
  case 'Miriam':
    mensaje = 'El nombre de la usuaria es Miriam';
    break;
  case 'Felipa':
    mensaje = 'El nombre de la usuaria es Felipa';
    break;
  case 'Xime':
    mensaje = 'El nombre de la usuaria es Xime';
    break;
  case 'Belu':
    mensaje = 'El nombre de la usuaria es Belu';
    break;
  default:
     mensaje = 'El nombre de la usuaria no es Marta, Felipa, Xime o Belu';
}
console.log(mensaje);

Utilizamos break para decirle al switch que ya puede dejar de validar el resto de las condiciones y que su trabajo terminó.
En este ejemplo podemos decir SEGUN el nombre ENTONCES mostra un mensaje personalizado SINO mostrar un mensaje que ninguno de los nombres es el correcto.

Truthy and Falsy (valores verdaderos y falsos)

En ECMAScript existen valores que se pueden transformar como true o false en una condición
Los siguientes valores se transformar en falso:
- false
- null
- undefined
- 0
- NaN
- ''
Cualquier otro valor se transforma en verdadero

if ('') {
  // no entra en esta sección
} else {
  // entra en esta sección ya que un string vacio se transforma en falso
}

Podemos ver en este ejemplo que al interpretar el string vacío como un valor falsy o falso, no se entra en la condición del if verdadero sino por el lado del falso. Es por esto que tenemos que validar nuestros datos.

let nombre = '';
if (nombre === '') {
  console.log('por favor ingrese su nombre');
} else {
  console.log('Bienvenido/a: ' + nombre);
}

Por medio de condicionales podemos hacer una mejor validación
Utilizando valores truthy y falsy podemos escribir el mismo código de la siguiente manera:

let nombre = '';
if (nombre) {
  console.log('Bienvenido/a: ' + nombre);
} else {
  console.log('por favor ingrese su nombre');
}

Estructuras de repetición

Es común en la programación tener que ejecutar un mismo código varias veces
Por ejemplo si quiero imprimir en pantalla los números del 0 al 10 lo puedo hacer de la siguiente manera

console.log(0);
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);

Si bien de esta forma logramos el objetivo, es poco práctico si necesito, por ejemplo, cambiar el mensaje que quiero mostrar: tengo que modificar muchas lineas de código. Imaginemos que tengo que mostrar del 0 al 100 o al 1000! IMPOSIBLE!

console.log('número: ', 0);
console.log('número: ', 1);
console.log('número: ', 2);
console.log('número: ', 3);
console.log('número: ', 4);
console.log('número: ', 5);
console.log('número: ', 6);
console.log('número: ', 7);
console.log('número: ', 8);
console.log('número: ', 9);
console.log('número: ', 10);

Para nuestra sanidad mental existen las estructuras de repetición que nos hacen la vida más fácil

While

Existe una estructura de repetición que se llama while y se ejecuta mientras la condición sea verdadera
En español podemos pensar esta estructura como MIENTRAS condición HACER tal cosa

while (condicion) {
  console.log('Imprimo este mensaje mientras la condición sea verdadera');
}

Vamos a refactorizar el código que muestra números del 0 al 10 utilizando la estructura while

let numero = 0;
while (numero < 11) {
  console.log(numero);
  numero++;
}

Con tan solo un par de lineas de código podemos mostrar todos los números del 0 al 10 y si queremos mostrar más tan solo hacemos un cambio

let numero = 0;
while (numero < 10000) {
  console.log(numero);
  numero++;
}

En caso de querer cambiar el mensaje tan solo modificamos una línea de código

let numero = 0;
while (numero < 10000) {
  console.log('número: ', numero);
  numero++;
}

Vemos que de esta forma las estructura de repetición nos hacen la vida mucho más fácil y controlable
Un tema que tenemos que tener en cuenta es que al utilizar las estructuras de repetición podemos caer en lo que se denomina un loop infinito: un código que se va a repetir por siempre ya que la condición no cambia. Esto puede colgar un servidor o el ambiente donde estemos ejecutando esta repetición. IMPORTANTE: recordar cambiar la condicón en algún momento.

while (true) {
  console.log('colgamos esta rutina');
}
let numero = 0;
while (numero < 10000) {
  console.log('número: ', numero);
}

En cualquiera de estos ejemplos podemos colgar todo ya que en ningún momento se modifica la condición y siempre va a ser verdadera.
Otra de las características que tiene el while es que si la condición es negativa no se ejecuta

while (false) {
  console.log('nunca se ejecuta este código');
}
let numero = 1000;
while (numero < 10) {
  console.log('número: ', numero);
  numero++;
}

do/while

Otra de las estructuras de repetición que podemos encontrar es el do/while
En español podemos leer esta estructura como HACER MIENTRAS
La diferencia que tiene esta estructura con el while es que siempre se ejecuta al menos una vez y luego pregunta por la condición

do {
  // esto se ejecuta al menos una vez
} while (condicion)

Si la condición siempre es true también podemos colgar el proceso

do {
  // colgamos todo
} while (true)

Podemos escribir uno de los ejemplos anteriores de la siguiente manera:

let numero = 0;
do {
  console.log('número: ', numero);
  numero++;
} while (numero < 10000);

En este ejemplo mostramos el mensaje e incrementamos la variable al menos una vez y luego podemos seguir mostrando el resto de los números

let numero = 1000;
do {
  console.log('número: ', numero);
  numero++;
} while (numero < 10);

En este ejemplo sólo se muestra el número 1000 y luego no se vuelve a repetir la condición.

For

Otra estructura de repetición que podemos utilizar es for
Esta estructura en español se la denomina PARA
Consiste en 3 partes delimitadas por un ;

for (iniciarVariable; condicion; alteración) {
  // se ejecuta siempre y cuando se cumpla la condición
}

Por ejemplo, para mostrar números de 0 a 10, podemos escribir el siguiente for:

// Primero: declaramos la variable numero y le asignamos el valor 0
// Segundo: escribimos la condición que queremos validar
// Terceo: incrementamos el valor de la variable numero en 1
for (let numero = 0; numero <= 10; numero++) {
  console.log(numero);
}

Siguiendo con los ejemplos anteriores si queremos modificar esta estructura lo podemos hacer de forma simple

for (let numero = 0; numero <= 1000; numero++) {
  console.log('número: ', numero);
}

Cortar la ejecución de una estructura de repetición

Utilizando la sentencia break podemos cortar la ejecución de una estructura de repetición

for (let i = 0; i < 1000; i++){
  break;
}

En este ejemplo se va a intentar correr el for, va a declarar la variable i, se le va a asignar el valor y luego se va a cortar la ejecución por el break.

for (let i = 0; i < 1000; i++){
  if (i < 10) {
    console.log(i);
  } else {
    break;
  }
}

En este ejemplo si la variable i es 10 o más se va a cortar la ejecución del for y va a seguir el flujo normal del código

#Estructuras de Control

#Operador Ternario

#If Anidados

#Switch

#Truthy and Falsy (valores verdaderos y falsos)

#Estructuras de repetición

#While

#do/while

#For

#Cortar la ejecución de una estructura de repetición

Estructuras de Control

Operador Ternario

If Anidados

Switch

Truthy and Falsy (valores verdaderos y falsos)

Estructuras de repetición

While

do/while

For

Cortar la ejecución de una estructura de repetición