Condicional if

Hasta ahora tu código se ejecutaba de arriba abajo, línea a línea, sin pensárselo. Con if eso cambia: tu programa empieza a tomar decisiones y a ejecutar un trozo de código solo cuando se cumple una condición.

Es lo mismo que haces tú cada mañana: si llueve, coges el paraguas. En JavaScript se escribe con la palabra reservada if:

if (condición) {  // código que se ejecuta si la condición es verdadera}

La condición va entre paréntesis y el código, entre llaves. Si la condición es true, se ejecuta lo que hay dentro de las llaves. Si es false, JavaScript se lo salta y sigue con lo que venga después.

Imagina que quieres mostrar un mensaje solo si el usuario tiene 18 años o más:

const edad = 18if (edad >= 18) {  console.log('Eres mayor de edad')}

Como edad >= 18 es true, el mensaje aparece en la consola. Cambia la edad a 17 y no verás nada.

else#

Vale, pero ¿y si quieres hacer otra cosa cuando la condición no se cumple? Para eso está else, que significa «si no». Fíjate en que ahora la edad es 17:

const edad = 17if (edad >= 18) {  console.log('Eres mayor de edad')} else {  console.log('Eres menor de edad')}

La condición es false, así que JavaScript ignora el primer bloque y ejecuta el del else. Siempre se ejecuta uno de los dos, nunca ambos.

else if#

¿Y cuando hay más de dos caminos? Con else if puedes encadenar tantas condiciones como necesites:

const edad = 17if (edad >= 18) {  console.log('Eres mayor de edad')} else if (edad >= 16) {  console.log('Eres casi mayor de edad')} else {  console.log('Eres menor de edad')}

JavaScript va comprobando las condiciones en orden, de arriba abajo:

1. Comprueba el if. Si es true, ejecuta su bloque y se acabó.
2. Si era false, comprueba el else if. Si es true, ejecuta ese bloque.
3. Si ninguna se cumple, ejecuta el else.

Dicho de otra forma: entra en el primer bloque cuya condición se cumpla y se olvida de los demás. Aquí 17 >= 18 es false, pero 17 >= 16 es true, así que verás «Eres casi mayor de edad».

Anidación de condicionales#

Dentro de un if puedes meter otro if. A esto se le llama anidar. Mira este ejemplo, donde para conducir hacen falta dos cosas, la edad y el carnet:

const edad = 17const tieneCarnet = trueif (edad >= 18) {  if (tieneCarnet) {    console.log('Puedes conducir')  } else {    console.log('No puedes conducir')  }} else {  console.log('No puedes conducir')}

Funciona, pero cuesta seguirlo y además repetimos el mismo mensaje dos veces. Cuantos más niveles anidas, más difícil es leer y mantener el código.

Casi siempre hay una salida mejor: juntar las condiciones con operadores lógicos. Fíjate en el &&:

const edad = 17const tieneCarnet = true// si es mayor de edad y tiene carnet entonces...if (edad >= 18 && tieneCarnet) {  console.log('Puedes conducir')} else {  console.log('No puedes conducir')}

Mismo resultado y un nivel menos. Todavía podemos dar un paso más: guardar el resultado de la condición en una variable con un buen nombre.

const edad = 17const tieneCarnet = trueconst puedeConducir = edad >= 18 && tieneCarnetif (puedeConducir) {  console.log('Puedes conducir')} else {  console.log('No puedes conducir')}

Ahora el if se lee casi como una frase: «si puede conducir…».

La importancia de las llaves#

Las llaves {} no siempre son obligatorias. Si el bloque solo tiene una línea, puedes omitirlas:

const edad = 17if (edad >= 18) console.log('Eres mayor de edad')else console.log('Eres menor de edad')

Incluso puedes escribirlo todo en la misma línea, separando las sentencias con punto y coma ;:

const edad = 18if (edad >= 18) console.log('Eres mayor de edad'); else console.log('Eres menor de edad')

Que se pueda no significa que debas.

if (condition) {  // código a ejecutar}

if { // código a ejecutar } (condición)

if { // código a ejecutar } condición;

if (condición) {  // código a ejecutar} else (  /* código alternativo */)

if (condición) {// código a ejecutar} && {  // código alternativo}

if (condición) {  // código a ejecutar} else {  // código alternativo}