Control de flujos

Control de flujos 1
¿Qué aprenderás? 1
Introducción 2
Operadores y Comparadores 3
Ejercicio guiado: Operadores y comparadores 6
La estructura If 7
Ejercicio guiado: La estructura if 7
Estructura If - else 9
Ejercicio guiado: Estructura if-else 11
Estructura Switch 12
Ejercicio guiado: Estructura switch 14
Uso de sentencias condicionales dentro de un bloque if 16
Ejercicio guiado: Uso de sentencias condicionales 16

¡Comencemos!

¿Qué aprenderás?

● Desarrollar rutinas utilizando operadores y control de flujo para resolver un problema.

_ 1

www.desafiolatam.com
 ● Refactorizar flujos de múltiples if y else, utilizando operadores lógicos para facilitar la
legibilidad del código.

Introducción

Es posible realizar un programa completo utilizando solamente variables, constantes y

operadores en una sucesión lineal de instrucciones básicas, pero esto puede traer
complicaciones si es necesario repetir un proceso múltiples veces. Por ejemplo, para sumar
los 100 primeros números ingresados por un usuario con las herramientas que conocemos,
podemos crear variables y realizar la pregunta “Ingrese número” 100 veces, sin embargo, el
trabajo se hace repetitivo y conduce a errores. ¿Qué sucede si además es necesario seguir
una ruta diferente dependiendo de alguna condición?

Es por ello que existen las estructuras de control de flujo y ciclos. Si utilizamos estas
estructuras, los programas dejan de ser solamente una sucesión lineal de instrucciones para
convertirse en programas inteligentes que pueden tomar decisiones en función del valor de
las variables. El manejar estos conceptos nos permitirá construir programas que respondan
de mejor manera a los desafíos que se nos planteen. Aprender cómo manejar
adecuadamente el control de flujo, es clave para desarrollar lógicas cada vez más complejas
y cercanas a la realidad.

_ 2

www.desafiolatam.com
Operadores y Comparadores

Los operadores son la forma con la que efectuamos acciones u operaciones con las
variables y los valores.

Los operadores más comunes dentro de JavaScript son los siguientes:

● Asignación: =

El operador “=” se ocupa para asignar. Primero se calcula el valor del lado derecho del
operador “=” (valor fuente) y luego la variable al lado izquierdo del operador (la variable
objetivo).

var numero = 2;

● Matemática: + (adición), - (sustracción), * (multiplicación), / (división), % (módulo)

Operadores que se ocupan de realizar cálculos matemáticos.

var numero = 2;
numero + 2;
numero * 4;
console.log(numero); // nos devuelve 2

● Asignación compuesta: +=, -=, *=, /=

Estos son operadores que combinan asignación y operación matemática en un solo

operador.

var numero += 2 // es lo mismo que numero = numero + 2

var numero -= 2 // es lo mismo que numero = numero - 2
var numero *= 2 // es lo mismo que numero = numero * 2
var numero /= 2 // es lo mismo que numero = numero / 2

● Incrementar/Decrementar: ++, --

Estos operadores se ocupan bastante cuando queremos subir o bajar en 1 sola unidad
alguna variable. Representan una versión simplificada de la asignación compuesta.

var numero = 1;

_ 3

www.desafiolatam.com
 numero++;
console.log(numero) // nos devuelve 2
numero--;
console.log(numero) // nos devuelve 1

● Igualdad:
○ == (sueltamente iguales )
○ === (estrictamente iguales)
○ != (sueltamente desiguales)
○ !== (estrictamente desiguales).

JavaScript tiene la particularidad que es bastante permisivo con la forma en que ocupamos
los operadores entre variables y sus diferentes tipos, lo que nos permite realizar operaciones
como esta:

// mismo valor, diferente tipo de dato (Number vs String)

console.log(22 == '22'); // true
console.log(22 === '22'); // false

La principal diferencia entre el operador == y ===, es que este último compara no solo el
valor de dos variables, sino también verifica su tipo de dato. Para el caso del ejemplo, ambos
valores son 22, pero el tipo de dato difiere: 22 es Number, mientras que ‘22’ es un String.
Luego, para la comparación con ==, este solo pone atención al valor por ende el resultado es
true, mientras que === se fija en el tipo de dato al ser diferente Number y String, el resultado
es false.

A tener en cuenta que para el proceso de comparación de == JavaScript realiza una

‘coerción de tipo’, es decir, antes de la comparación intenta convertir ambas variables a un
tipo común (como se vio en el ejemplo anterior), esto da como resultado positivo para
comparaciones como la que vemos a continuación.

console.log(false == 0); // true

console.log(false === 0); // false

Debido a esto, tenemos que tener mucho cuidado con la manera en que manejamos los
tipos de datos de nuestros valores, ya que JavaScript nos va a permitir sumar números con
strings y compararlos con operadores de igualdad.

console.log(10 + 2); // 12
console.log(10 + '2'); // '102'

_ 4

www.desafiolatam.com
Por esta misma razón, herramientas más avanzadas como los frameworks sugieren hacer
uso de === para evitar este tipo de problemas.

● Comparación:
○ < (menor que)
○ > (mayor que)
○ <= (menor o igual a que)
○ >= (mayor o igual a que)

Es lo mismo que vimos en matemáticas en el colegio, pero ahora ocuparemos estos

operadores comparativos para efectuar lógica basada en valores numéricos.

2 > 3; // false
2 < 3; // true

● Lógico:
○ && (y)
○ || (ó)
○ ! (negación)

Estos operadores se utilizan bastante cuando ocupamos declaraciones condicionales,

donde se necesita que se cumplan ciertas condiciones para ejecutar un código en particular.

En el caso de “&&” (que se lee como and ó doble ampersand) este es un operador que va a
preguntar si se está cumpliendo el caso de su izquierda tanto como el de su derecha, por
ejemplo:

const nombre = 'pedro';

const edad = 22;
​
nombre === 'pedro' && edad === 22; // true

En la última línea del ejemplo anterior se verifica si la variable nombre es estrictamente igual
a pedro y si su edad es estrictamente igual al número 22.

Dado que ambas condiciones son verdaderas, cada una de las condiciones a ambos lados
del “&&” nos devuelve True.

De forma similar, el operador “||” (que se lee como “ó” u OR) también va a preguntar a su
izquierda y a su derecha, con la diferencia que sólo va a necesitar que uno de estos 2 sea
True para que toda la sentencia sea verdadera.

_ 5

www.desafiolatam.com
 const nombre = 'pedro';
const edad = 22;
​
nombre === 'pedro' || edad === 10; // true

El operador negación (!), por su parte, requiere de un único valor para funcionar, lo que hace
este operador es invertir (o negar) el valor booleano de una variable o de una sentencia
condicional. Así, si se niega un valor true el resultado obtenido es false y si se niega un valor
false el resultado es true.

!(nombre === 'pedro'); // false

!(edad === 22); // true

Ejercicio guiado: Operadores y comparadores

Realizar ahora el siguiente ejercicio, sabiendo que “x” es igual a 20 y “z” es igual a 13, ¿Cuál
será el resultado para la siguiente operación (x-z) > (z-x), utilizando operadores y
comparadores?

Lo primero que podemos realizar es la operación de forma manual y después probarla en la

consola del navegador para verificar lo realizado. Por lo tanto, sigamos los siguientes pasos:

● Paso 1: Sustituir los valores indicados dentro de la comparación, para x=20 y z=13,
quedando: (20-13) > (13-20).

● Paso 2: Realizar la operación matemática: (7) > (-7).

● Paso 3: Analizar los resultados y ver si se cumple la condición de comparación, en

este caso es mayor que “>”, por lo tanto se podría leer: ¿siete es mayor que -7? La
respuesta a esto sería verdadera, es decir, “true”. Por lo tanto esa sería la salida en la
consola del navegador al comprobar la condición.

● Paso 4: Implementar la operación completa en la consola, el uso de variables y el

operador de asignación para guardar los valores indicados en las variables
correspondientes:

Imagen 1. Resultado mediante consola.

Fuente: Desafío Latam

_ 6

www.desafiolatam.com
La estructura If

La estructura más utilizada en JavaScript y en la mayoría de los lenguajes de programación

es la estructura if. Esta estructura se emplea para tomar decisiones en función de una
condición, su definición es la siguiente:

if(condicion) {
...
}

Si la condición se cumple, se ejecutan todas las instrucciones que estén dentro de {...}. Si la
condición no se cumple, no se ejecuta la instrucción contenida dentro de las llaves {...} y la
aplicación continua ejecutando el resto de instrucciones del código. Por ejemplo:

var mostrarMensaje = true;

if(mostrarMensaje == true) {
alert("Es verdadero");
}

En este ejemplo, declaramos una variable de tipo Boolean con valor verdadero (true). La
condición está comparando si el valor de la variable “mostrarMensaje” es igual o no a true.
Como los dos valores coinciden, la igualdad se cumple y por tanto la condición es cierta, su
valor es true y se ejecutan las instrucciones contenidas en este bloque condicional.

Ejercicio guiado: La estructura if

Solicitar al usuario que ingrese dos números enteros y comparar si el primer número es
menor o igual que el segundo. Luego, comprobar si el segundo número es mayor o igual que
cero. Finalmente, comprobar si el primer número es menor que cero o distinto de cero.

● Paso 1: Crear un archivo .html llamado “index.html” y uno .js, el cual llamaremos
“script.js” dentro de una carpeta en nuestro lugar de trabajo preferido. No olvidar
incluir en el .html el archivo externo del .js como se ha hecho en los capítulos
anteriores.

● Paso 2: De igual forma a continuación está la instrucción que se debe agregar al final
de la etiqueta body:

<script type="text/JavaScript" src="JavaScript.js"></script>

_ 7

www.desafiolatam.com
 ● Paso 3: Ahora, en el archivo script.js, implementar las estructuras if necesarias para
poder realizar las comparaciones indicadas en el enunciado, en este caso, serán tres
estructuras if, una para comprobar si el número 1 es menor o igual que el número 2,
otra para comprobar si el número 2 es mayor o igual a cero y la última para
comprobar si el número 1 es distinto de cero o menor que cero. Si la respuesta es
correcta o verdadera (true), utilizamos un alert para mostrar el mensaje
correspondiente. En el caso que alguna de estas condiciones no se cumpla, no
pasará por la instrucción dentro de las llaves de los if. Por lo tanto, al codificar lo
anterior en el archivo script.js, quedaría:

var num1;
var num2;

num1 = prompt("Ingresa el primer número: ");

num2 = prompt("Ingresa el segundo número: ");

if(num1 <= num2) {

alert("El primer número ingresado NO ES MAYOR que el segundo
número");
}
if(num2 >= 0) {
alert("El segundo número que ingresaste es positivo, Mayor o igual
que 0");
}
if(num1 != 0 || num1 < 0) {
alert("El primer número que ingresaste es distinto de 0 o es
negativo");
}

_ 8

www.desafiolatam.com
Estructura If - else
En muchas ocasiones, lo que debemos realizar no son lógicas del tipo "si se cumple la
condición, hagámoslo; si no se cumple, no hagamos nada". Normalmente, suelen ser "si se
cumple esta condición, hagámoslo; si no se cumple, hagamos esto otro". Para esto, existe
una variante de la estructura if llamada if-else, su definición formal es la siguiente:

if(condicion) {
...
}
else {
...
}

Si la condición que tenemos declarada se cumple, se ejecutan todas las instrucciones que
se encuentran dentro de las llaves del if, pero si la condición es el caso contrario y no se
cumple, se ejecutan todas las instrucciones contenidas en las llaves del else { }. Por
ejemplo:

var edad;

edad = prompt("Ingresa tu edad: ")

if(edad >= 18) {

alert("Eres mayor de edad");
}
else {
alert("Todavía eres menor de edad");
}

En este ejemplo que vimos, si el valor de la variable, el cual ingresamos mediante el método
“prompt();” es mayor o igual que el valor numérico 18, la condición del if { } se cumple y por
tanto nos mostrará el mensaje que nos dice que “Somos mayores de edad”. Sin embargo, si
el valor de la variable “edad” es menor que 18, automáticamente se ejecutará la instrucción
que está dentro de las llaves de else { }. En este caso, se mostraría el mensaje "Todavía eres
menor de edad". Pero no solamente esta estructura puede trabajar con tipos de datos
numéricos sino que también con cadenas de texto. Por ejemplo:

_ 9

www.desafiolatam.com
 var nombre = prompt("Ingresa tu nombre completo: ")

if(nombre == "") {
alert("Aún no nos has dicho tu nombre");
}
else {
alert("Gracias! Ya hemos guardado tu nombre en {desafío} latam_");
}

La condición del if { } que vimos en este ejemplo se realiza mediante el operador ==, que es
el que generalmente se emplea para comparar dos valores (no confundir con el operador =
que se utiliza para asignar valores). Por ejemplo, si la cadena de texto almacenada en la
variable “nombre”, la cual le mandamos el valor mediante el método “prompt ();” es vacía (es
decir, es igual a " ") se muestra el mensaje que definimos como instrucción dentro del if { }.
De otra forma, se muestra el mensaje definido en el bloque else { }.

La estructura if-else también se puede encadenar para realizar varias comprobaciones

seguidas, por ejemplo puedes comprobar este código:

var nombre = "Gary";

if (nombre == "Gary") {
alert("Hola Gary!");
}
else if (nombre == "Claudio"){
alert("Hola Claudio!");
}
else {
alert("¿Quién eres?");
}

En este ejemplo si te diste cuenta agregamos un else if { }. Que es como decir “pero si es
este caso” . Se utiliza para realizar una cadena de comprobaciones seguidas, determinamos
la variable “nombre” que almacenaba la cadena de texto “Gary”. Con el If teníamos la
condición que si el nombre era igual a “Gary” este mostraba un mensaje de saludo a Gary.
Pero también si el nombre era “Claudio”, también se ejecuta la instrucción de saludo. Pero si
no era ninguna de estas condiciones, pasaba automáticamente al else { } y mostraba un
mensaje “¿Quién eres?”

_ 10

www.desafiolatam.com
Ejercicio guiado: Estructura if-else

Solicitar al usuario que responda a una pregunta en específico, en este caso: “¿Quiere usted
aprender a programar con JavaScript?”, si el usuario responde que “Si” o “SI” o “si”, enviar el
mensaje: “Felicitaciones, ya eres parte de Desafío Latam”, de lo contrario: “Que lastima!!!… te
esperamos”. Por lo tanto, sigamos los siguientes pasos:

● Paso 1: En el archivo script.js, se inicializa una variable para almacenar el dato

ingresado por el usuario:.

var respuesta = prompt("¿Quiere usted aprender a programar con

JavaScript?: Si o No");

● Paso 2: La variable se utilizará para preguntar dentro del if si cumple o no con la

condición y generar la respuesta adecuada dependiendo si el resultado de la
condición es “true” o “false”

var respuesta = prompt("¿Quiere usted aprender a programar con

JavaScript?: Si o No");

if (respuesta == "Si" || respuesta == "si" || respuesta == "SI") {

console.log("Felicitaciones, ya eres parte de Desafío Latam");
} else {
console.log("Que lastima!!!... te esperamos");
}

Observando en detalle el ejercicio anterior, se puede apreciar como dentro una estructura
if-else se realizan distintas comparaciones utilizando los operadores lógicos y de
comparación en una sola línea de instrucción o código. Si vemos el resultado cuando el
usuario ingrese “Si”;

Felicitaciones, ya eres parte de Desafío Latam

En el caso de ingresar “No”:

Que lastima!!!... te esperamos

_ 11

www.desafiolatam.com
Estructura Switch

Al momento de utilizar estructuras de condición, la estructura Switch en ciertas ocasiones

puede ser más eficiente, ya que está especialmente diseñada para manejar de forma
sencilla múltiples condiciones sobre la misma variable.

Su definición formal puede parecer un tanto compleja, pero la verdad su uso es muy sencillo:

switch (variable) {
case valor_1:
// instrucciones
break;
case valor_2:
// instrucciones
break;
case valor_3:
// instrucciones
break
default:
// instrucciones
break;
}

Ahora bien, realizaremos el siguiente ejemplo para ver cómo funciona esta estructura.
Escribimos el siguiente código en nuestro archivo .js:

var respuesta = prompt("Escribe un Número del 1 al 4");

switch (respuesta) {
case "1":
alert("Escribiste el número uno");
break;
case "2":
alert("Escribiste el número dos");
break;
case "3":
alert("Escribiste el número tres");
break
case "4":
alert("Escribiste el número cuatro");
break

_ 12

www.desafiolatam.com
 default:
alert("No es un número entre 1 y 4");
break;
}

En este ejemplo, declaramos una variable con el nombre de “respuesta” a la cual le

asignamos un valor que le preguntamos al usuario, en este caso un número entre el 1 y el 4.
Luego con la estructura Switch lo que hacemos es evaluar la variable “respuesta” con los
distintos casos. En el caso cuando el usuario escriba “1” se ejecutará un mensaje de alerta
donde se señalará el número ingresado, y así con cada caso.

Cada caso se termina con un corte del proceso y esto se hace mediante la palabra “break;”.
Así mismo, cuando ya no colocamos más casos ingresamos la propiedad “default” que se
ejecutará si es que en ningún caso se ha cumplido.

Por legibilidad de código, a veces preferimos utilizar switch antes que múltiples if-else; si
bien, el resultado es el mismo, visualmente es más sencillo de interpretar de esta manera.
Puedes ver un ejemplo de cómo realizar esto en el documento Material Apoyo Lectura -
Transformar múltiples ciclos if-else en switch, ubicado en “Material Complementario”.

_ 13

www.desafiolatam.com
Ejercicio guiado: Estructura switch

Se solicita a un usuario que ingrese un número del 1 al 7 y se indique mediante un mensaje

el dia de la semana a cual pertenece ese número, para ello, sigamos los siguientes pasos:

● Paso 1: En el archivo script.js, armar la estructura del Switch e inicializar una variable
donde se almacenará el dato ingresado por el usuario, en este caso la podemos
llamar “num” y mediante la función “prompt()” solicitamos al usuario ingresar el
número. Quedando de la siguiente forma:

var num = prompt("Escribe un Número del 1 al 7");

switch () {
case "1":
break;
case "2":
break;
case "3":
break
case "4":
break
case "5":
break
case "6":
break
case "7":
break
default:
break;
}

● Paso 2: Activamos la lógica correspondiente dentro de la estructura del Switch,

colocando la variable dentro de los paréntesis del switch para que la estructura se
encargue de evaluar la condición de la variable y comparar con los valores
preestablecidos dentro de los “case”:

var num = prompt("Escribe un Número del 1 al 7");

switch (num) {
case "1":
alert("El día de la semana es lunes");
break;

_ 14

www.desafiolatam.com
 case "2":
alert("El día de la semana es martes");
break;
case "3":
alert("El día de la semana es miércoles");
break
case "4":
alert("El día de la semana es jueves");
break
case "5":
alert("El día de la semana es viernes");
break
case "6":
alert("El día de la semana es sábado");
break
case "7":
alert("El día de la semana es domingo");
break
default:
alert("El número ingresado no corresponde a un día de la semana");
break;
}

Generando el resultado en el navegador:

Imagen 2. Resultado en ventana emergente.

Fuente: Desafío Latam

_ 15

www.desafiolatam.com
Uso de sentencias condicionales dentro de un bloque if

Existirán ocasiones en las que sea necesario verificar varias condiciones a la vez, donde
todas tendrán que ser verdaderas para ejecutar cierto código. Supongamos que se ha
creado una nueva política pública que beneficia a toda persona mayor de 18 años, pero
menor de 40 años, que viva en las regiones 12 o 15 del país. Así, para verificar si una
persona es beneficiaria, se puede utilizar el siguiente código:

if(edad >= 18) {

if(edad <= 40) {
if(region == 12 || region == 15) {
// Persona apta para recibir el beneficio
}
}
}

Si bien este código funciona, no se recomienda anidar tantos if de manera consecutiva, ya

que aumenta la complejidad del código y disminuye su mantenibilidad. Es por lo anterior que
hay que modificar el código para mejorarlo, lo cual es posible de lograr usando
comparaciones lógicas. Con esto, el código anterior puede ser reducido a:

if(edad >= 18 && edad <= 40 && (region == 12 || region == 15)) {

// Persona apta para recibir el beneficio
}

Para aprender más sobre cómo codificar un programa en JavaScript utilizando estilos y
convenciones de programación tales como indentación y estructura de código, puedes
consultar el documento Material Apoyo Lectura - La importancia de las buenas prácticas,
ubicado en “Material complementario”.

Ejercicio guiado: Uso de sentencias condicionales

Se le solicita al usuario ingresar la edad y responder a la pregunta, “¿Quieres estudiar en

Desafío Latam?”:

❏ Evaluar si la edad es mayor o igual a 18 y la respuesta es “si” o “Si” o “SI”, responder

con un mensaje de bienvenida, de lo contrario, con el mensaje: “Que bueno, pero
debes estar acompañado por tu representante”
❏ Si su respuesta es “no” o “No” o “NO”, responder con el mensaje: “Que lastima!!!… te
esperamos pronto”

_ 16

www.desafiolatam.com
 ❏ En el caso de no ser ninguno de los datos mencionados anteriormente, indicar un
mensaje: “Datos errados”.

● Paso 1: En el archivo script.js debes armar la estructura del if e inicializar dos

variables donde se almacenarán los datos ingresados por el usuario, en este caso las
podemos llamar “num” y “respuesta” y mediante la función “prompt()” solicitamos al
usuario ingresar los datos. Quedando de la siguiente forma:

var num = prompt("Ingresa tu edad actual");

var respuesta = prompt("¿Quieres estudiar en Desafío Latam?, Sí o No");

● Paso 2: Activamos la lógica correspondiente dentro de la estructura if-else-if,

colocando las variables dentro de los paréntesis del “if” y del “else if” para que la
estructura se encargue de evaluar las condiciones de las variables y comparar:

var edad = prompt("Ingresa tu edad actual");

var respuesta = prompt("¿Quieres estudiar en Desafío Latam?, Sí o No");

if (edad >= 18 && respuesta == "Si" || respuesta == "SI" || respuesta ==

"si") {
alert("Excelente... Bienvenido");
} else if(edad < 18 && respuesta == "Si" || respuesta == "SI" ||
respuesta == "si") {
alert("Que bueno, pero debes estar acompañado por tu
representante");
} else if(respuesta == "NO" || respuesta == "No" || respuesta == "no") {
alert("Que lastima!!!... te esperamos pronto");
}

Generando el resultado en el navegador si el usuario ingresa 23 de edad y Si:

Imagen 3. Resultado en ventana emergente.

Fuente: Desafío Latam

_ 17

www.desafiolatam.com