Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica
Aplicación de Tecnologías Web
Tema n.° 5
Estructuras en JavaScript
Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica
Índice
Pág.
Introducción ................................................................................ 3
1.5. Estructuras de control en JavaScript ................................ 4
1.5.1. La cláusula If .......................................................... 4
1.5.2. La cláusula switch................................................... 5
1.5.3. Estructuras iterativas en JavaScript ........................ 6
Recursos complementarios ....................................................... 12
Referencias ............................................................................... 12
Autoevaluación ......................................................................... 13
Tema n.° 5: Estructuras en JavaScript 2
Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica
Introducción
En el mundo de la programación, la capacidad de dirigir el flujo de ejecución
de un programa es esencial para construir aplicaciones dinámicas y eficientes.
JavaScript, como lenguaje de programación versátil y ampliamente utilizado en el
desarrollo web, ofrece poderosas herramientas conocidas como Estructuras de
Control e Iterativas, que permiten a los desarrolladores tomar decisiones y repetir
tareas de manera efectiva.
Estructuras de Control
Las Estructuras de Control en JavaScript son mecanismos que determinan el
orden en que se ejecutan las instrucciones en un programa. La cláusula if y la
cláusula else son fundamentales para realizar decisiones condicionales, permitiendo
que ciertas acciones se ejecuten solo cuando se cumple una condición específica.
La cláusula switch proporciona una manera eficiente de manejar múltiples casos,
simplificando el código en comparación con múltiples instrucciones if-else anidadas.
Estructuras Iterativas
Por otro lado, las Estructuras Iterativas, o bucles, permiten la repetición de
bloques de código, facilitando la manipulación de datos y la ejecución de tareas
similares de manera eficiente. El bucle for es ideal para iteraciones con un número
conocido de repeticiones, mientras que el bucle while es útil cuando la condición de
repetición se evalúa antes de la ejecución. El bucle do-while garantiza que el bloque
de código se ejecute al menos una vez, independientemente de la condición inicial.
La combinación efectiva de estas estructuras proporciona a los
desarrolladores el control necesario para adaptar el comportamiento de sus
programas a diversas situaciones. Al comprender y dominar estas herramientas, los
programadores pueden mejorar la legibilidad del código, optimizar la eficiencia y
resolver problemas de manera más efectiva.
Tema n.° 5: Estructuras en JavaScript 3
Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica
En esta exploración de las Estructuras de Control e Iterativas en JavaScript,
descubriremos cómo estas herramientas fundamentales se entrelazan para formar
la columna vertebral de la lógica de programación en este lenguaje
1.5. Estructuras de control en JavaScript
Muy a menudo, es necesario que una parte del código JavaScript escrito se
ejecute cuando una o varias condiciones se cumplan y que no se ejecute en caso
contrario. Es decir, tendremos código que se ejecutará de forma condicional. Para
poder realizar este tipo de sentencias, JavaScript dispone de diferentes estructuras
de control del flujo del código.
1.5.1. La cláusula If
La sentencia más sencilla y conocida es la que comienza por la cláusula if,
que seguida de una condición lógica (que se evaluará como true o false) define un
bloque de código que se ejecutará únicamente si la condición es satisfecha. Un
ejemplo sería:
Figura 1.
Estructura if
La consola solo mostrará la frase si la variable edad tiene un valor
estrictamente menor que 78.
Junto a la cláusula if tenemos otras dos que suelen acompañarla casi
siempre. Son else if y else. Si estamos barajando varias opciones en nuestro
programa, podemos hacer uso de else if para tratar los diferentes escenarios. Por
Tema n.° 5: Estructuras en JavaScript 4
Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica
último, si ninguna de las condiciones anteriores se cumplió, podemos hacer uso de
else para indicar las acciones a realizar en el caso de que ninguna de las
condiciones anteriores se diese. Observemos un ejemplo:
Figura 2.
Estructura if-else
Al igual que en otros lenguajes de programación, en JavaScript también
podemos hacer uso del operador ternario para comprobar una condición y actuar
en consecuencia de su cumplimiento (o no) en una única línea. Su sintaxis, al igual
que en otros lenguajes, es la siguiente:
Figura 3.
Operador ternario
Un ejemplo sería:
Figura 4.
Código del operador ternario
1.5.2. La cláusula switch
La cláusula switch nos permite construir disyuntivas más complejas. Es una
estructura de control que se utiliza para realizar múltiples comparaciones de una
Tema n.° 5: Estructuras en JavaScript 5
Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica
expresión y ejecutar bloques de código según el valor coincidente. Es una
alternativa más limpia y legible a múltiples declaraciones if-else anidadas.
El funcionamiento de la cláusula switch es el siguiente:
• La expresión dentro del switch se evalúa una vez.
• Se compara el valor resultante con cada caso.
• Si se encuentra una coincidencia, se ejecuta el bloque de código
correspondiente y se sale del switch usando la palabra clave break.
• Si no se encuentra una coincidencia, se ejecuta el bloque de código asociado
al caso default (si está presente).
Figura 5
Días de la Semana.
1.5.3. Estructuras iterativas en JavaScript
Una estructura iterativa nos permite construir bucles en los cuáles es posible
repetir una o varias líneas de código. Estudiaremos por tanto los bucles for y while.
Tema n.° 5: Estructuras en JavaScript 6
Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica
Bucles while
Los bucles while ejecutan las instrucciones que haya dentro de un bloque
mientras la condición enunciada se cumpla. Un ejemplo:
Figura 6.
Bucle while.
Si ejecutamos este código en la consola de JavaScript, veremos que el
resultado que se imprime por pantalla es el siguiente:
Figura 7
Ejecución del bucle while
Nótese que se ha hecho uso de template literals para intercalar cadenas de
texto con el valor de las variables con las que estamos trabajando. Es muy
importante que el código que se encuentre dentro del bloque del while pueda dar
lugar a un cambio en la condición que se está evaluando. De no ser así, se podría
formar un bucle infinito, algo que casi con toda seguridad será un comportamiento
no deseado.
Existe una variación del bucle while llamada do while. La diferencia entre
ambas es que la versión do while se ejecutará siempre una vez como mínimo, ya
Tema n.° 5: Estructuras en JavaScript 7
Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica
que la condición del while se comprobará al final del bloque, mientras que esto no
ocurre con la versión que acabamos de ver. Un ejemplo sería el siguiente:
Figura 8
Bucle do-while
Si ejecutamos este código en la consola de JavaScript, veremos que el
resultado que se imprime por pantalla es el siguiente:
Figura 9
Ejecución del bucle do-while.
Bucles for
Se trata de otra estructura diferente para poder realizar bucles. Su sintaxis es
bastante distinta a la de la opción anterior:
Figura 10
Bucle for.
Un bucle for tiene cuatro partes muy diferenciadas:
Tema n.° 5: Estructuras en JavaScript 8
Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica
Figura 11
Partes del bucle for.
Al igual que ocurría con los bucles while, es necesario definir bien la
condición, el valor inicial de la variable de estado y cómo va a modificarse su valor
en cada iteración para evitar dar lugar a bucles infinitos no deseados. Veamos un
ejemplo de este tipo de bucles:
Tema n.° 5: Estructuras en JavaScript 9
Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica
Figura 12
Bucle for.
Bucles forEach
La cláusula forEach es una función integrada en JavaScript que proporciona
una forma elegante y funcional de recorrer cada elemento de un array. Facilita la
ejecución de una función específica en cada elemento del array, simplificando
tareas como la manipulación de datos, filtrado y más.
La sintaxis básica de la cláusula forEach es la siguiente:
» elemento: Representa el valor del elemento actual durante la iteración.
» indice: Representa la posición del elemento actual en el array.
» arrayCompleto: Es una referencia al array sobre el cual se está iterando.
Veamos algunos ejemplos prácticos para ilustrar el uso de la cláusula
forEach:
Tema n.° 5: Estructuras en JavaScript 10
Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica
Figura 13
Imprimir cada elemento de un array
Tema n.° 5: Estructuras en JavaScript 11
Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica
Recursos complementarios
• Documentación de JavaScript
https://developer.mozilla.org/es/docs/Web/JavaScript
Referencias
Brown, A. R., & Wilson, S. (2013). JavaScript Testing with Jasmine: JavaScript
Behavior-Driven Development. O'Reilly Media.
Crockford, D. (2008). JavaScript: The Good Parts. O'Reilly Media.
Duckett, J. (2011). JavaScript & jQuery. John Wiley & Sons Books.
Flanagan, D. (2011). JavaScript: The Definitive Guide: Activate Your Web Pages
(6th ed.). O'Reilly Media.
Freeman, A., & Robson, S. (2012). Head First JavaScript Programming: A Brain-
Friendly Guide. O'Reilly Media.
McPeak, J., Kuksenok, K., & Robinson, C. (2012). Learning Node: Moving to the
Server-Side. O'Reilly Media.
Osmani, A. (2013). Developing Backbone.js Applications. O'Reilly Media.
Resig, J., Bibeault, B., & Marconcini, J. (2013). Secrets of the JavaScript Ninja.
Manning Publications.
Tema n.° 5: Estructuras en JavaScript 12
Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica
Autoevaluación
1. ¿Cuál de las siguientes palabras clave se utiliza para iniciar una estructura
de control if en JavaScript?
start
begin
if
initiate
2. ¿Qué declaración se utiliza para manejar múltiples casos en una estructura
de control en JavaScript?
for
switch
while
case
3. En una estructura if-else, ¿qué bloque de código se ejecuta si la condición
es falsa?
Bloque if
Bloque else
Ninguno
Ambos bloques
4. ¿Cuál es la finalidad de la estructura else if en JavaScript?
Para manejar errores
Tema n.° 5: Estructuras en JavaScript 13
Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica
Para agregar condiciones adicionales
Para finalizar la ejecución del programa
Para iniciar un bucle
5. ¿Cuál de las siguientes opciones representa una combinación de una
estructura de control y una estructura iterativa?
if
while
for
switch
6. ¿Qué estructura de control es adecuada para ejecutar un bloque de código
mientras se cumpla una condición?
for
if
while
switch
7. ¿Cuál de los siguientes bucles se ejecuta al menos una vez, incluso si la
condición es falsa desde el principio?
for
while
do-while
forEach
Tema n.° 5: Estructuras en JavaScript 14
Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica
8. ¿Cómo se incrementa una variable i en un bucle for en JavaScript?
i++
++i
i+=1
Todas las anteriores
9. ¿Cuál es el propósito principal del bucle for...in en JavaScript?
Iterar sobre propiedades de un objeto
Iterar sobre elementos de un array
Crear funciones
Ninguna de las anteriores
10. ¿Cuál de las siguientes opciones representa una estructura de control de
múltiples casos en JavaScript?
for
while
switch
if-else
Tema n.° 5: Estructuras en JavaScript 15
