Programación con JavaScript > Sesión 02
Distinguir las distintas estructuras que permiten controlar el flujo de ejecución de un programa o aplicación
Las condicionales nos permiten cotrolar el flujo de un programa, es decir, podemos controlar las partes del código que se ejecutarán dependiendo de si una condición se cumple o no.
JavaScript nos proporciona varios operadores lógicos para que podamos realizar operaciones de comparación.
| Operador | Descripción | Ejemplos |
|---|---|---|
| == | Igualdad: Devuelve true si ambos operandos son iguales |
3 == 3 3 == "3" "mike" == "mike" var1 == true |
| != | Desigualdad: Devuelve true si ambos operandos no son iguales |
3 != 4 |
| === | Estrictamente iguales: Devuelve true si los operandos son igualy tienen el mismo tipo. |
3 === 3 3 === "3" (Devuelve falso) |
| !== | Estrictamente desiguales: Devuelve true si los operandos no son igualesy/o no son del mismo tipo. |
3 !== "3" |
| > | Mayor que: Devuelve true si el operando de la izquierdaes mayor que el operando de la derecha. |
4 > 3 |
| >= | Mayor o igual que: | 4 >= 4 |
| < | Menor que: Devuelve true si el operando de la izquierdaes menor que el operando de la derecha. |
12 < 15 |
| <= | Menor o igual que: | 15 <= 15 |
| && | And: Devuelve true si ambas condiciones se cumplen |
2 > 1 && 1 > 0 |
| || | Or: Devuelve true si una de las condiciones se cumplen |
2 > 1 || 1 < 0 |
El tipo de condición más común de todos. Traducida literalmente del inglés, se la podría llamar la estructura si...si no, es decir, si se cumple la condición, haz esto, y sino, haz esto otro.
La sintaxis se compone de la siguiente forma:
if ( /* Condición a evaluar */ ) {
/* Código a ejecutar si la condición retorna true */
} else {
/* Código a ejecutar si la condición retorna false */
}if- La palabra clave que indica que se va a realizar una condicional.( ... )- Dentro de los paréntesis se coloca la condición a evaluar, la cuál retorna un booleano, es decir,trueofalse.{ ... }- Dentro de las llaves va el texto a ejecutar en caso de que la condición seatrue.else- Se utiliza para controlar el flujo en caso de que la condición seafalse. Si se usaelse, el código dentro de las llaves que le siguen se ejecuta sólo cuando la condición anterior no se cumplió.
Esta condicional nos permite ejecutar un sólo bloque de código de varios. Es una buena alternativa cuando tenemos múltiples condicionales if/else.
switch ( /* Expresión a evaluar*/ ) {
case a:
/* Código a ejecutar */
break;
case b:
/* Código a ejecutar */
break;
default:
/* Código a ejecutar por default */
}switch- La palabra clave que indica que se va a realizar una condicional.( ... )- Expresión a evaluar.case- Expresa uno de los posibles valores como resultado de la evaluación que se está haciendo.break- Detiene la ejecución del bloque y sale delswitch.default- Define qué se debe hacer cuando ninguno de los casos se cumple.
El operador ternario es el único operador en JavaScript que consta de tres operandos. Es una buena alternativa para una condición if/else, ya que presenta una sintaxis más sencilla.
condición ? expresión_true : expresión_falseLa condición a evaluar es retorna un booleano al igual que en la condicional if. Las expresiones en caso de ser true o false se colocan en la misma línea sin necesidad de else separadas por dos puntos :.
var speed = 120;
var message;
if(speed > 100) {
message = "You're going too fast!";
} else {
message = "Under the limit";
}
console.log(message); // You're going too fast!El código anterior lo podemos simplificar usando el operador ternario.
var speed = 120;
var message = speed > 100 ? "You're going too fast!" : "Under the limit";
console.log(message); // You're going too fast!En JavaScript todas las variables contienen un valor booleano, a esto se le conoce como truthy o falsy.
Los siguientes valores siempre son falsy:
false0''o""- String vacíonullundefinedNaN
Todo lo demás es truthy incluyendo los siguientes casos:
'0'- String conteniendo cero'false'- String con el textofalse[]- Arreglo vacío{}- Objeto vacíofunction(){}- Función vacía
Esto es muy útil a la hora de usar condicionales pues podemos evaluar un sólo valor sin necesidad de operadores lógicos.
if(value) {
// value es truthy
} else {
// value es falsy
// puede ser false, 0, '', null, undefined o NaN
}Es muy importante tener cuidado cuando se están haciendo comparaciones con == en lugar de === ya que se pueden obtener resultados inesperados, por ejemplo:
[1] == '1' // trueEn esta tabla se puede comparar los resultados de usar == con distintos valores.
Los ciclos o bucles ofrecen una manera rápida y sencilla de hacer algo repetidamente. Un ciclo for se repite hasta que la condición especificada se evalúa como false.
La sintaxis funciona de esta manera:
for(var i = 0; i<=50; i++){
// Código a ejecutar en cada ciclo
}for. La sintaxis para el inicio del ciclo. Posteriormente, abrimos paréntesis y dentro habrán 3 valores.Inicializador. El primer valor en el cual declaras la variable, incluyendo con cuál número inicia el ciclo.Condición. El segundo valor es la condición, lo que tiene que pasar para terminar la iteración.Incrementable. El tercer valor es el incrementable. Cada vez que termina todas las sentencias de ejecución, la variable aumenta en 1. Esto se debe al operando++.
Otro ciclo es while, el cual se repite siempre y cuando la condición especificada sea evaluada como true.
while(condición) {
// Código a ejecutar en cada ciclo
}El ejemplo 2 podría hacerse con while de la siguiente manera:
var i = 0;
while(i <= 200) {
console.log("Hello World");
i++;
}Si olvidas incrementar la variable
identro delwhileel ciclo nunca termina y se agotan los recursos de memoria.