INVESTIGACIÓN 1

ESTRUCTURAS DE CONTROL EN JAVASCRIPT

POR:
JERÓNIMO WILIBALDO FIGUEROA SOLANO

TECNOLÓGICO NACIONAL DE MÉXICO

CAMPUS PINOTEPA
PROGRAMACIÓN WEB
PINOTEPA NACIONAL, OAXACA
DICIEMBRE 14 DEL 2020.
 INVESTIGACIÓN 1
ESTRUCTURAS DE CONTROL EN JAVASCRIPT

POR:
JERÓNIMO WILIBALDO FIGUEROA SOLANO

DOCENTE:
M. Sc. JESÚS HERNÁNDEZ SÁNCHEZ

TECNOLÓGICO NACIONAL DE MÉXICO

CAMPUS PINOTEPA
PROGRAMACIÓN WEB
PINOTEPA NACIONAL, OAXACA
DICIEMBRE 14 DEL 2020.

2
Estructuras de control en JavaScript.

Cuando escribimos código JavaScript, por defecto, el navegador leerá el script de

forma secuencial, es decir, una línea detrás de otra, desde arriba hacia abajo. Por lo tanto,

una acción que realicemos en la línea 5 nunca ocurrirá antes que una que aparece en la línea

3. Ya veremos que más adelante esto se complica, pero en principio partimos de esa base.

Los programas que se pueden realizar utilizando solamente variables y operadores

son una simple sucesión lineal de instrucciones básicas. Sin embargo, no se pueden realizar

programas que muestren un mensaje si el valor de una variable es igual a un valor

determinado y no muestren el mensaje en el resto de casos. Tampoco se puede repetir de

forma eficiente una misma instrucción, como por ejemplo sumar un determinado valor a

todos los elementos de un array.

Para realizar este tipo de programas son necesarias las estructuras de control de flujo,

que son instrucciones del tipo "si se cumple esta condición, hazlo; si no se cumple, haz esto

otro". También existen instrucciones del tipo "repite esto mientras se cumpla esta

condición".

Si se utilizan estructuras de control de flujo, los programas dejan de ser una sucesión

lineal de instrucciones para convertirse en programas inteligentes que pueden tomar

decisiones en función del valor de las variables.

3
Condicionales

Al hacer un programa necesitaremos establecer condiciones o decisiones, donde

buscamos que el navegador realice una acción A si se cumple una condición o una acción B

si no se cumple. Este es el primer tipo de estructuras de control que encontraremos. Para

ello existen varias estructuras de control:

Condicional If.
Quizás, el más conocido de estos mecanismos de estructura de control es el if

(condicional). Con él podemos indicar en el programa que se tome un camino sólo si se

cumple la condición que establezcamos:

En este caso, como el valor de nota es superior a 5, nos aparecerá en la consola el

mensaje «¡Estoy aprobado!». Sin embargo, si modificamos en la primera línea el valor de

nota a un valor inferior a 5, no nos aparecerá ese mensaje.

Cuando dentro de las llaves ({ }) sólo tenemos una línea, se pueden omitir dichas

llaves. Aún así, es recomendable ponerlas siempre si tenemos dudas o no estamos seguros.

4
Condicional If / else.
Pero se puede dar el caso que queramos establecer una alternativa a una condición.

Para eso utilizamos el if seguido de un else. Con esto podemos establecer una acción A si

se cumple la condición, y una acción B si no se cumple.

Vamos a modificar el ejemplo anterior para mostrar también un mensaje cuando

estamos suspendidos, pero en este caso, en lugar de mostrar el mensaje directamente con un

console.log vamos a guardar ese texto en una nueva variable calificación:

Nuevamente, en este ejemplo comprobaremos que podemos conseguir que se

muestre el mensaje Estoy aprobado o Estoy suspendido dependiendo del valor que tenga la

variable nota. La diferencia con el ejemplo anterior es que creamos una nueva variable que

contendrá un valor determinado dependiendo de la condición del If.

Por último, el console.log del final, muestra el contenido de la variable calificación,

independientemente de que sea el primer caso o el segundo.

5
 Este nuevo ejemplo, es equivalente al ejemplo anterior. Si nos fijamos bien, la única

diferencia respecto al anterior es que estamos realizando dos if independientes: uno para

comprobar si está suspendido y otro para comprobar si está aprobado.

Pero, aunque son equivalentes, no son exactamente iguales, ya que en el ejemplo

que vimos anteriormente sólo existe un if, y, por lo tanto, sólo se realiza una comprobación.

En este ejemplo que vemos ahora, se realizan dos if, y, por lo tanto, dos comprobaciones.

En este caso se trata de algo insignificante, pero es importante darse cuenta de que

el primer ejemplo estaría realizando menos tareas para conseguir un mismo resultado, ergo,

el primer ejemplo sería más eficiente.

Operador ternario.
El operador ternario es una alternativa de condicional if/else de una forma mucho

más corta y, en muchos casos, más legible. Vamos a reescribir el ejemplo anterior

utilizando este operador:

6
 Este ejemplo hace exactamente lo mismo que el ejemplo anterior. La idea del

operador ternario es que podemos condensar mucho código y tener un if en una sola línea.

Obviamente, es una opción que sólo se recomienda utilizar cuando son if muy pequeños.

Condicional If múltiple.
Es posible que necesitemos crear un condicional múltiple con más de 2 condiciones,

por ejemplo, para establecer la calificación específica. Para ello, podemos anidar varios

if/else uno dentro de otro, de la siguiente forma:

7
 Sin embargo, anidar de esta forma varios if suele ser muy poco legible y produce un

código algo feo. En algunos casos se podría utilizar otra estructura de control llamada

switch, que puede ser útil en ciertos casos.

Condicional Switch
La estructura de control switch permite definir casos específicos a realizar en el caso

de que la variable expuesta como condición sea igual a los valores que se especifican a

continuación mediante los case. No obstante, hay varias puntualizaciones que aclarar sobre

este ejemplo:

En primer lugar, el ejemplo anterior no es exactamente equivalente al anterior. Este

ejemplo funcionaría si sólo permitimos notas que sean números enteros, es decir, números

del 0 al 10, sin decimales. En el caso de que nota tuviera, por ejemplo, el valor 7.5,

mostraría Nota errónea.

8
 El ejemplo de los if múltiples si controla casos de números decimales porque

establecemos comparaciones de rangos con mayor o menor, cosa que con el switch no se

puede hacer. El switch está indicado para utilizar sólo con casos con valores concretos y

específicos.

En segundo lugar, observa que al final de cada caso es necesario indicar un break

para salir del switch. En el caso que no sea haga, el programa saltará al siguiente caso,

aunque no se cumpla la condición específica.

Estructura While.
La estructura while ejecuta un simple bucle, mientras se cumpla la condición. Su

definición formal es la siguiente:

var veces = 0;

while(veces < 7) {

console.log("Mensaje " + veces);

veces++;

La idea del funcionamiento de un bucle while es la siguiente: "mientras la condición

indicada se siga cumpliendo, repite la ejecución de las instrucciones definidas dentro del

while. Es importante modificar los valores de las variables incluidas dentro de la condición,

ya que otra manera, el bucle se repetiría de manera indefinida, perjudicando la ejecución de

la página y bloqueando la ejecución del resto del script.

9
var veces = 0;

while(veces < 7) {

console.log("Mensaje " + veces);

veces = 0;

En este ejemplo, se mostraría de manera infinita una alerta con el texto "Mensaje 0".

Estructura For.

La estructura for permite realizar bucles de una forma muy sencilla. Su definición

formal es la siguiente:

for(inicializacion; condicion; actualizacion) {

...

La idea del funcionamiento de un bucle for es la siguiente: "mientras la condición indicada

se siga cumpliendo, repite la ejecución de las instrucciones definidas dentro del for.

10
Además, después de cada repetición, actualiza el valor de las variables que se utilizan en la

condición".

• La "inicialización" es la zona en la que se establece los valores iniciales de las

variables que controlan la repetición.

• La "condición" es el único elemento que decide si continua o se detiene la

repetición.

• La "actualización" es el nuevo valor que se asigna después de cada repetición a las

variables que controlan la repetición. var mensaje = "Hola, estoy dentro de un

bucle";

for(var i = 0; i < 5; i++) {

console.log(mensaje);

La parte de la inicialización del bucle consiste en:

var i = 0;

Por tanto, en primer lugar, se crea la variable i y se le asigna el valor de 0. Esta zona

de inicialización solamente se tiene en consideración justo antes de comenzar a ejecutar el

bucle. Las siguientes repeticiones no tienen en cuenta esta parte de inicialización.

La zona de condición del bucle es:

i<5

Los bucles se siguen ejecutando mientras se cumplan las condiciones y se dejan de

ejecutar justo después de comprobar que la condición no se cumple. En este caso, mientras

la variable i valga menos de 5 el bucle se ejecuta indefinidamente.

11
 Como la variable i se ha inicializado a un valor de 0 y la condición para salir del

bucle es que i sea menor que 5, si no se modifica el valor de i de alguna forma, el bucle se

repetiría indefinidamente. Por ese motivo, es imprescindible indicar la zona de

actualización, en la que se modifica el valor de las variables que controlan el bucle:

i++

En este caso, el valor de la variable i se incrementa en una unidad después de cada

repetición. La zona de actualización se ejecuta después de la ejecución de las instrucciones

que incluye el for.

Así, durante la ejecución de la quinta repetición el valor de i será 4. Después de la

quinta ejecución, se actualiza el valor de i, que ahora valdrá 5. Como la condición es que i

sea menor que 5, la condición ya no se cumple y las instrucciones del for no se ejecutan una

sexta vez.

Normalmente, la variable que controla los bucles for se llama i, ya que recuerda a la

palabra índice y su nombre tan corto ahorra mucho tiempo y espacio. El ejemplo anterior

que mostraba los días de la semana contenidos en un array se puede rehacer de forma más

sencilla utilizando la estructura for:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

for(var i=0; i<7; i++) {

console.log(dias[i]);

}
12
Estructura For...In.
Una estructura de control derivada de for es la estructura for...in. Su definición

exacta implica el uso de objetos, permitiendo recorrer las propiedades de un objeto. En cada

iteración, un nuevo nombre de propiedad del objeto es asignada a la variable:

for(propiedad in object) {

if (object.hasOwnProperty(propiedad)) {

...

Suele ser conveniente comprobar que la propiedad pertenece efectivamente al

objeto, a través de object.hasOwnProperty(propiedad). De la misma manera que podemos

recorrer las propiedades de un objeto, es posible adaptar este comportamiento a los arrays:

for(indice in array) {

...

Si se quieren recorrer todos los elementos que forman un array, la estructura for...in es la

forma más eficiente de hacerlo, como se muestra en el siguiente ejemplo:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

for(i in dias) {

console.log(dias[i]);

13
 La variable que se indica como indice es la que se puede utilizar dentro del bucle

for...in para acceder a los elementos del array. De esta forma, en la primera repetición del

bucle la variable i vale 0 y en la última vale 6. Esta estructura de control es la más adecuada

para recorrer arrays (y objetos), ya que evita tener que indicar la inicialización y las

condiciones del bucle for simple y funciona correctamente cualquiera que sea la longitud

del array. De hecho, sigue funcionando igual aunque varíe el número de elementos del

array.

Estructura Try.
La estructura try consiste en un bloque de código que se ejecuta de manera normal,
y captura cualquier excepción que se pueda producir en ese bloque de sentencias. Su
definición formal es la siguiente:

try {
funcion_que_no_existe();
} catch(ex) {
console.log("Error detectado: " + ex.description);
}
En este ejemplo, llamamos a una función que no está definida, y por lo tanto

provoca una excepción en JavaScript. Este error es capturado por la cláusula catch, que

contiene una serie de sentencias que indican que acciones realizar con esa excepción que

acaba de producirse. Si no se produce ninguna excepción en el bloque try, no se ejecuta el

bloque dentro de catch.

14
Referencias.

Garro, A. (2014b, agosto 1). Estructuras de control | JavaScript. arkaitzgarro.

https://www.arkaitzgarro.com/javascript/capitulo-5.html

uniwebsidad. (2015, 13 junio). 3.4. Estructuras de control de flujo (Introducción a

JavaScript). https://uniwebsidad.com/libros/javascript/capitulo-3/estructuras-de-control-de-

flujo

Estructuras de control en JavaScript. (2018, 21 octubre). Escuela Javascript.

https://www.escuelajavascript.com/estructuras-de-control-en-javascript-if-else-if-switch/

15