06 - Condicionales

¿Qué es una función condicional?

Es una función que se ejecuta en caso de que se cumpla una determinada condición.

Estructura inicial

En nuestra carpeta de proyecto crearemos la siguiente estructura:

/
├── js/
│   └── 06-condicionales.js
└── index.html

Y un código sencillo para nuestro HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/06-condicionales.js"></script>
    <title>06 - Condicionales</title>
</head>
<body>
    <h1>Temario de JavaScript</h1>
</body>
</html>

Operadores condicionales (relacionales)

Antes de comenzar a ver condicionales, es importante conocer los operadores condicionales:

Estructura de un condicional if

La estructura más básica para nuestro if sería:

if(condición) {
    // Código a ejecutar si se cumple la condición.
}

No obstante, también podemos añadir una propiedad else para cuando no se cumple nuestra condición:

if(condición) {
    // Código a ejecutar si se cumple la condición.
} else {
    // Código a ejecutar en caso de no se cumpla nuestra condicición.
}

Además de esto, podemos hacer que nuestro else tenga una segunda condición y repetir esto de forma sucesiva:

if(condición1) {
    // Código a ejecutar si se cumple la condición1.
} else if (condición2) {
    // Código a ejecutar si se cumple la condición2.
} else if (condición3) {
    // Código a ejecutar si se cumple la condición3.
} else {
    // Código a ejecutar si no se cumple ninguna de las condiciones anteriores.
}

Otra opción es hacer que nuestro if tenga múltiples condiciones gracias a los operadores AND (&&) y OR (||)

if(condición1 && condición2){
    // Código a ejecutar si se cumplen las dos condiciones.
}

if(condición1 || condición2){
    // Código a ejecutar si se cumple como mínimo una de las dos condiciones.
}

Ejemplos de condicionales

let edad = 13
let nombre = "Jorge Javier"

if(edad >= 18) {
    console.log(nombre + "es mayor de edad")
} else {
    console.log(nombre + "es menor de edad")
}
//Jorge Javier es menor de edad

/* Vamos a cambiar la edad a un valor mayor o igual a 18 y volver a crear el if */
edad = 20

if(edad >= 18) {
    console.log(nombre + "es mayor de edad")
} else {
    console.log(nombre + "es menor de edad")
}
//Jorge Javier es mayor de edad

/* Probemos con un condicional más complejo */
let edad2 = 15
let nombre2 = "Nuria"

if(edad2 <= 13) {
    console.log(nombre2 + " es una niña pequeña")
} else if(edad2 < 18) {
    console.log(nombre2 + " es una adolescente")
} else {
    console.log(nombre3 + " es una adulta")
}
//Nuria es una adolescente