Extras:

Estilo de nombrado
Al margen del nombre que utilicemos para nombrar una variable, función u otro
elemento, tenemos el estilo o convención que utilizaremos para escribir nombres
compuestos por varias palabras.

Existen varias convenciones a utilizar:

Nombre Descripción
Ejemplo
lowercase Todo minúsculas. ❌ No se usa porque en palabras compuestas puede
confundir. precioproducto
UPPERCASE Todo mayúsculas. ❌ No se usa porque en palabras compuestas puede
confundir. PRECIOPRODUCTO
camelCase Primera palabra, todo minúsculas. El resto, todo minúsculas salvo
primera letra. precioProducto
PascalCase Idem, pero las palabras empiezan con la primera letra mayúscula. Se usa
en Clases. PrecioProducto
snake_case Las palabras se separan con un guión bajo y se escriben siempre en
minúsculas. precio_producto
UPPER_SNAKE_CASE Se usa en constantes ajustables frecuentemente por el
programador. PRECIO_PRODUCTO
kebab-case Palabras separadas con un guión normal y en minúsculas. Usadas en
HTML/CSS. precio-producto
[Link] Palabras en minúsculas separadas por puntos. ❌ En Javascript no se
puede usar. [Link]
Húngara Prefijo (minúsculas) con el tipo de dato (n = número, t = texto, ...).
❌ Desaconsejada. nPrecioProducto

FLUJO DE EJECUCION:

En nuestro código de programación, en líneas generales, el flujo del programa, se

lee desde arriba hacia abajo, y de izquierda a derecha. De esta forma, y siempre
por norma general, se procesa primero el código que está a la izquierda y arriba,
actuando de forma secuencial, ya que cuando termina un primer bloque o línea de
código, se comienza con el siguiente.

Este mecanismo es de los más sencillos y básicos, y a medida que vamos escribiendo
código se puede complicar, o introducir variaciones que hacen que este flujo se
vuelva más complejo.

Nombre Descripción
Condiciones Bifurcaciones donde el flujo se divide en dos o más caminos.
Bucles Repeticiones de un código idéntico varias veces o hasta cumplir
una condición.
Funciones Fragmento de código que realiza una tarea, abstrayendo información.
Anidación Fragmentos o bloques de código dentro de otros.
Estructuras de datos Lugares o «compartimentos» donde podemos guardar
información.

Condicionales:

Los condicionales, condiciones o bifurcaciones son fragmentos de código donde se

establece una cierta condición para evaluar si realizar un bloque de código u otro.
De esta forma, tenemos un bloque de código (en verde) que sólo se realizará si se
cumple la condición, saltando el bloque rojo y continuando el programa, o un bloque
de código (en rojo) que sólo se realiza si no se cumple la condición, saltando el
bloque verde y continuando el programa:

Las condiciones pueden ser algo más complejas, o incluso tener expresiones que
deben ser evaluadas. Las explicaremos más adelante.

Bucles:

Los bucles, ciclos o estructuras de repetición, son bloques especiales de código

que se ejecutarán varias veces (de 0 a un número concreto de veces) dependiendo de
una condición. Esto nos ahorra el tener que repetir código muchas veces, y hace que
el programa sea más pequeño y más fácil de leer y escribir.

El flujo de un bucle es el siguiente:

Evaluar y determinar si una condición es cierta o falsa

Si es cierta, ejecuta el bloque de código, realiza un cambio relacionado con la
condición y vuelve a 1.
Si es falsa, sale del bucle y continua el programa.
Flujo de repetición (bucles)

Cada una de las repeticiones que realiza es un concepto que se denomina iteración o
vuelta.

Funciones:

A medida que escribimos código en nuestra aplicación, es muy común que nos
encontremos con que hay partes del código que se repiten y/o se parecen mucho a
otras (o directamente son idénticas). Existe un concepto llamado función que
básicamente lo que permite es aislar un fragmento de código y darle un nombre. De
esta forma, cada vez que llamemos a ese nombre, se aplicará el fragmento de código.
Esto reduce sustancialmente el código de nuestra aplicación y lo hace mucho más
fácil de leer y entender.
Las funciones son mucho más complejas, pero esto es un buen punto de partida para
entenderlas. Más adelante las explicaremos en profundidad.

Anidación:

Otro concepto que conviene conocer es el denominado anidación o anidamiento. Cuando

hablamos de un código anidado significa que tenemos un fragmento de código «dentro»
de otro. Por ejemplo, imaginemos que tenemos un condicional que a su vez, tiene
dentro otro condicional. En ese caso estaríamos hablando un condicional anidado. Si
tenemos un bucle con otro bucle en su interior, estaríamos hablando de un bucle
anidado.

También es interesante conocer el nivel de anidamiento, ya que en los casos

mencionados sólo hay 2 niveles, pero podríamos hablar de niveles superiores de
anidación donde por ejemplo tenemos 3 condicionales anidados o más.

Aunque ya lo veremos más adelante, hay que tener cuidado con las anidaciones, ya
que pueden complicar nuestro programa, y en algunos casos hacerlo menos eficiente.
Lo hablaremos en profundidad en próximos temas.

Estructuras de datos:

Por último, y no por ello menos importante, tenemos las denominadas estructuras de
datos. Cuando programamos, de forma habitual necesitamos guardar información en
nuestro programa, y a priori no conocemos dicha información porque variará
dependiendo del usuario. Por ejemplo, imagina un programa que pregunta el nombre al
usuario. En un caso podría ser Juan, en otro caso podría ser Sara, y en otro podría
ser Pancracio.

Es por ello, que necesitamos utilizar ciertas estructuras de datos (compartimentos)

para almacenar dicha información y usarla en nuestro programa de forma abstracta o
genérica. Estos compartimentos se identificarán en nuestro programa mediante un
nombre identificativo, sin mencionar el valor que contienen directamente.

CONDICIONALES:

Al hacer un programa necesitaremos establecer condiciones o decisiones, donde

buscamos que se 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.

Tenemos varias estructuras de control condicionales:

Estructura de control Descripción

If Condición simple: Si ocurre algo, haz lo siguiente...
If/else Condición con alternativa: Si ocurre algo, haz esto, sino, haz lo esto
otro...
?: Operador ternario: Equivalente a If/else, forma abreviada.
Switch Estructura para casos específicos: Similar a varios If/else anidados.

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.

Observa el siguiente ejemplo, donde guardamos en el «compartimento» nota, un valor

numérico:

JS
let nota = 7;
[Link]("He realizado mi examen.");

// Condición (si la nota es mayor o igual a 5)

if (nota >= 5) {
[Link]("¡Estoy aprobado!");
}

En este caso, como el valor de nota es superior o igual 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.

Condicional If / else:

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 [Link] vamos a guardar ese texto en una nueva variable calificacion:

JS
let nota = 7;
[Link]("He realizado mi examen. Mi resultado es el siguiente:");

if (nota < 5) {
// Acción A: nota es menor que 5
calificacion = "suspendido";
} else {
// Acción B: Cualquier otro caso diferente a A (nota es mayor o igual que 5)
calificacion = "aprobado";
}

[Link]("Estoy", calificacion);

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 [Link] del final, muestra el contenido de la variable

calificacion, independientemente de que sea el primer caso o el segundo.

JS
let nota = 7;
[Link]("He realizado mi examen. Mi resultado es el siguiente:");

if (nota < 5) {
// Acción A (nota es menor que 5)
calificacion = "suspendido";
}
if (nota >= 5) {
// Acción B (nota es mayor o igual que 5)
calificacion = "aprobado";
}

[Link]("Estoy", calificacion);

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 la
comprobación de una condición. En este ejemplo que vemos ahora, se realizan dos if,
y por lo tanto, se evaluan dos condiciones independientes.

En este caso se trata de algo insignificante que no repercute demasiado, pero es

importante darse cuenta de que el primer ejemplo estaría realizando menos tareas
para conseguir un mismo resultado.

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:

JS
let nota = 7;
[Link]("He realizado mi examen.");
// Condición
if (nota < 5) {
calificacion = "Insuficiente";
} else if (nota < 6) {
calificación = "Suficiente";
} else if (nota < 8) {
calificacion = "Bien";
} else if (nota <= 9) {
calificacion = "Notable";
} else {
calificacion = "Sobresaliente";
}

[Link]("He obtenido un", calificacion);

Sin embargo, anidar de esta forma varios if suele ser muy poco legible y produce un
código repetitivo algo feo. En algunos casos se podría utilizar otra estructura de
control llamada switch, que veremos a continuación.

Condicional Switch
La estructura de control switch permite definir casos específicos a realizar cuando
la variable expuesta como condición sea igual a los valores que se especifican a
continuación mediante cada case:

JS
let nota = 7;
[Link]("He realizado mi examen. Mi resultado es el siguiente:");

switch (nota) {
case 10:
calificacion = "Sobresaliente";
break;
case 9:
case 8:
calificacion = "Notable";
break;
case 7:
case 6:
calificacion = "Bien";
break;
case 5:
calificacion = "Suficiente";
break;
case 4:
case 3:
case 2:
case 1:
case 0:
calificacion = "Insuficiente";
break;
default:
// Cualquier otro caso
calificacion = "Nota errónea";
break;
}

[Link]("He obtenido un", calificacion);

Hay varias puntualizaciones que aclarar sobre este ejemplo, así que vamos a
explicarlo:

La sentencia switch establece que vamos a realizar múltiples condiciones analizando

la variable nota.
Cada condición se establece mediante un case, seguido del valor posible de cada
caso.
El switch comienza evaluando el primer case, y continua con el resto, hacia abajo.
Observa que algunos case tienen un break. Esto hace que deje de evaluar y se salga
del switch.
Los case que no tienen break, no se interrumpen, sino que se salta al siguiente
case.
El caso especial default es como un else. Si no entra en ninguno de los anteriores,
entra en default.

OPERADOR TERNARIO:

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

más compacta y breve, que en muchos casos resulta más legible. Sin embargo, hay que
tener cuidado, porque su sobreutilización puede ser contraproducente y producir un
código más difícil de leer.

La sintaxis de un operador ternario es la siguiente:

JS
condición ? valor verdadero : valor falso;

Para entenderlo bien, vamos a reescribir el ejemplo de los temas anteriores

utilizando este operador ternario. Primero, recordemos el ejemplo utilizando
estructuras if/else:

JS
let nota = 7;
[Link]("He realizado mi examen. Mi resultado es el siguiente:");

if (nota < 5) {
// Acción A: nota es menor que 5
calificacion = "suspendido";
} else {
// Acción B: Cualquier otro caso diferente a A (nota es mayor o igual que 5)
calificacion = "aprobado";
}

[Link]("Estoy", calificacion);

Ahora, vamos a reescribirlo utilizando un operador ternario:

JS
let nota = 7;
[Link]("He realizado mi examen. Mi resultado es el siguiente:");

// Operador ternario: (condición ? verdadero : falso)

let calificacion = nota < 5 ? "suspendido" : "aprobado";

[Link]("Estoy", calificacion);

Repasemos el ejemplo:
Observa que guardamos en calificacion el resultado del operador ternario.
La condición es nota < 5, se escribe al principio, previo al ?.
Si la condición es cierta, el ternario devuelve "suspendido".
Si la condición es falsa, el ternario devuelve "aprobado".
Este ejemplo hace exactamente lo mismo que el ejemplo anterior del if/else. La idea
del operador ternario es que podemos condensar mucho código y tener un if en una
sola línea. Es muy práctico, legible e ideal para ejemplos pequeños donde
almacenamos la información en una variable para luego utilizarla.

Operador ternario anidado:

Sin embargo, hay que tener cuidado, ya que los operadores ternarios sólo se
recomiendan cuando se trata de if muy pequeños. Si intentasemos realizar una
comprobación de if múltiples con el operador ternario, la sintaxis puede resultar
compleja y difícil de leer. Observa el siguiente ejemplo con múltiples if / else:

JS
let nota = 7;
[Link]("He realizado mi examen.");

if (nota < 5) {
calificacion = "Insuficiente";
} else if (nota < 6) {
calificación = "Suficiente";
} else if (nota < 8) {
calificacion = "Bien";
} else if (nota <= 9) {
calificacion = "Notable";
} else {
calificacion = "Sobresaliente";
}

[Link]("He obtenido un", calificacion);

Vamos a trasladarlo a un nuevo ejemplo utilizando operadores ternarios anidados:

JS
let nota = 7;
[Link]("He realizado mi examen.");

let calificacion =
nota < 5 ? "Insuficiente" :
nota < 6 ? "Suficiente" :
nota < 8 ? "Bien" :
nota <= 9 ? "Notable" :
"Sobresaliente";

[Link]("He obtenido un", calificacion);

Observa que lo que tenemos en este ejemplo son múltiples operadores ternarios
anidados uno dentro de otro. El "valor falso" del primer operador ternario, es un
nuevo operador ternario, que a su vez su valor falso es un nuevo operador ternario,
y así con varios casos más.

Aunque en principio puede resultar interesante porque es bastante compacto y se

escribe poco código, se trata de una estructura y sintaxis extraña, por lo que
recuerda que los operadores ternarios anidados no suelen estar muy bien vistos.

Tipos de bucles:
Existen muchas formas de realizar bucles, vamos a ver los más basicos, que son muy
similares en otros lenguajes de programación:

Tipo de bucle Descripción

while Bucles simples.
for Bucles clásicos por excelencia.
do..while Bucles simples que se realizan siempre como mínimo una vez.
for..in Bucles sobre posiciones de un array. Los veremos más
adelante.
for..of Bucles sobre elementos de un array. Los veremos más
adelante.
Array functions Bucles específicos sobre arrays. Los veremos más
adelante.