Ciclos y estructuras de control

Ciclos y estructuras de control

Operadores lógicos

Los operadores nos permiten evaluar expresiones, veámoslos en acción:

1
2
3
4
5
6
console.log( 1 === 1 )  // output> true
console.log( 1 !== 1 )  // output> false
console.log( 1 > 2 )    // output> false
console.log( 1 < 2 )    // output> true
console.log( 1 >= 1 )   // output> true
console.log( 2 <= 1 )   // output> false

Así mismo también podemos emplear los operadores lógicos && (AND) y || (OR)

1
2
3
4
5
// &&
console.log( true && true )  // output> true
console.log( true && false )  // output> false
console.log( false && true )  // output> false
console.log( false && false )  // output> false

En el caso de && (AND) nos arrojará true si, y solo sí ambas expresiones son verdaderas

1
2
3
4
5
// ||
console.log( true || true )  // output> true
console.log( true || false )  // output> true
console.log( false || true )  // output> true
console.log( false || false )  // output> false

En el caso de || (OR) nos arrojará true si al menos una de sus expresiones es verdadera

Por último mencionemos la negación !

Con el signo ! podemos negar una expresión, veamos un ejemplo

1
2
console.log( !true )  // output> false
console.log( !false )  // output> true

Estructura de cotrol IF

A menos que le indiquemos lo contrario, javascript ejecuta línea a línea el código. Las estructuras de control son un modo de alterar este comportamiento. Con IF, por ejemplo yo puedo indicar que se ejecute una determinada línea de código (bloque de líneas) si, y solo sí se cumple una determinada condición. Veamos un ejemplo

1
2
3
4
5
6
7
8
if (true) {
    console.log('Esta línea se ejecuta si la condición es true')
}

if (true) {
    console.log('Pero esta línea NO se ejecuta si la condición es false')
}

Como vemos, la estructura es bastante sencilla, después de la palabra if se encierra la condición entre los paréntesis, si esta condición resulta true se ejecutarán la líneas de código que estén dentro de las llaves, pero si la condición resulta false no ejecutará el código en el interior de las llaves y seguirá de largo.

Estructura de control IF ELSE

Vimos que con la estructura de control de IF podemos decidir si ejectuamos un bloque de lineas de codigo. Ahora pensemos en la siguiente situación, quiero decidir si muestro un mensaje u otro dada cierta condición.

1
2
3
4
5
if (true) {
    console.log('Mostra este mensaje')
}

console.log('Si no mostrá este otro mensaje')

El problema que tenemos en el ejemplo de arriba es que sea verdadera o falsa la condición siempre mostraremos el mensaje de la línea 5 y lo que queremos es mostrar uno u otro. Aquí podemos aplicar el ELSE

1
2
3
4
5
if (true) {
    console.log('Mostra este mensaje')
} else {
    console.log('Si no mostrá este otro mensaje')   
}

De este modo si y solo si la condición es verdadera se mostrará el primer mensaje y si y solo si es falsa se mostrará el segundo mensaje.

Estructura de control IF ELSE IF

En una estructura IF ELSE hay una posibilidad binaria, es decir, es lo uno o lo otro, con lo cual sólo una condición (en el IF), que si es verdadera se ejecutará un bloque de código y si no otro. Pero qué ocurre si tenemos que tomar una decisión de acuerdo a más de una condición. Para esta situación podemos acudir a una estructura IF ELSE IF, esto sería evaluar una primera condición y luego, si esta fuera falsa iríamos consultando si otras condiciones se cumplen

1
2
3
4
5
6
7
8
9
if (false) {
    console.log('Si cumpliera la primer condición mostra este mensaje')
} else if (false) {
    console.log('Si no si cumpliera esta nueva condiciónn mostrá este otro mensaje')   
} else if (false) {
    console.log('Si no si cumpliera esta otra nueva condición mostrá este otro mensaje')
} else {
    console.log('Si no se cumpliera ninguna de las condiciones anteriores mostrá este otro mensaje')
}

Estructura de control Switch

Switch es una estructura de control que nos permite tomar decisiones a partir del valor de una expresión. Veamos un ejemplo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
switch (color) {
    case 'rojo':
        console.log('El valor de la variable color es rojo')
        break;
    case 'verde':
        console.log('El valor de la variable color es verde')
        break;
    case 'azul':
        console.log('El valor de la variable color es azul')
        break;
    default:
        console.log('El valor de la variable color NO es rojo, verde ni azul')
        break;
}

En este punto es muy importante colocar el break para que salga del switch una vez ocurrido un caso. Si ninguno de los casos explicitados se dieran entonces se ejecutaría el código dentro del default

Ciclos

Hasta ahora vimos estructuras de control. Ahora veremos los ciclos )o también conocidos como bucles)

While

En un ciclo while se ejecutará cíclicamente un bloque de código infinitamente hasta que le indique explícitamente que salga del bucle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let count = 0
while(true) {
    if (count > 5) {
        break
    } 
    console.log(count)
    count++
}

/*
output> 0
output> 1
output> 2
output> 3
output> 4
output> 5
*/

En la línea 1 declaramos una variable y la inicializamos en 0. Como la condición es true entramos al ciclo de while e imprime en pantalla el valor de count y luego aumenta en uno el valor de count y vuelve a iterarse dentro del ciclo. Sólo cuando cumpla la condición dentro del if y count sea mayor a 5 es que se ejecutará el break y saldrá del ciclo

For

En un ciclo for definimos la condición de iteración y no tenemos que romper el bucle explícitamente desde el mismo ciclo. Veamos el ejemplo

1
2
3
4
5
6
7
8
9
10
11
for (let i = 0; i <= 5; i++) {
    console.log(i)
}
/*
output> 0
output> 1
output> 2
output> 3
output> 4
output> 5
*/

En una sola línea, desntro de los paréntesis declaramos e inicializamos la variable i en 0, después del ; definimos la condición de que i tiene que ser menor o igual a 5 para que se ejecute el código dentro del for y luego del siguiente ; incrementamos en uno a i después de cada iteración