En programación, muchas veces es necesario que el código tome decisiones. Por ejemplo, mostrar un mensaje si el usuario ha iniciado sesión, aplicar un descuento si el pedido supera cierta cantidad o permitir el acceso si se tiene permisos. En estos casos, el programa debe evaluar una condición y ejecutar una operación u otra en función de si el resultado es verdadero o falso (un resultado booleano).
En JavaScript existe la instrucción if…else para tomar decisiones dinámicas según las circunstancias. Si la condición es verdadera, se ejecuta el bloque de código del if. Si es falsa, se ejecuta un bloque alternativo usando else.
JavaScript incluye varias formas de usar esta estructura condicional:
Instrucción condicional
Vamos a ver más de cerca cómo funcionan los condicionales. Una instrucción condicional permite controlar el flujo de ejecución de un programa. Primero evalúa una expresión, como una comparación o el valor de una variable, y decide qué bloque de código ejecutar según si el resultado es verdadero o falso.
En este diagrama de flujo se puede ver una bifurcación condicional. Si la condición evaluada devuelve true (verdadero), se ejecutarán las sentencias agrupadas en el primer bloque del condicional. En caso contrario —si la condición devuelve false (falso)—, se ejecutarán las del segundo bloque.
La instrucción ‘if’
La instrucción if puede usarse de una forma muy básica, ya que por si sola (sin el else) permite decidir si se ejecuta o no el código del bloque.
Explicación: si la condición devuelve true, se ejecutan las sentencias. En caso contrario, se salta la sentencias y el programa prosigue.
La sintaxis es la siguiente:
if (condición) {
// Código que se ejecuta
// si la condición es true
}
Entre los paréntesis () se indica la condición a evaluar. Puede ser una expresión lógica, aritmética, comparativa o booleana. Entre las llaves {} se incluyen las sentencias que se ejecutarán solo si la condición devuelve true.
Por ejemplo:
let edad = 21;
if (edad >= 35) {
console.log('Eres mayor de 35');
}
El mensaje solo se muestra si la variable edad es mayor o igual que 35. Como «edad» vale 21, la condición es falsa y el mensaje no se muestra.
La combinación ‘if else’
La instrucción else permite ejecutar sentencias cuando la condición indicada en el if devuelve false. En esencia, lo que hace es ampliar el control de flujo que ofrece if, ya que permite definir dos caminos posibles: uno cuando la condición es verdadera y otro cuando es falsa, creando así una bifurcación.
Explicación: primero se evalúa la condición. Si el resultado es true, se ejecuta la sentencia 1 y se omite la sentencia 2. En caso contrario, resultado es false, por lo tanto se salta la sentencia 1 pero se ejecuta la sentencia 2.
Su sintaxis es la siguiente:
if (condición) {
// Código que se ejecuta
// si la condición es true
} else {
// Código que se ejecuta
// si la condición es false
}
Entre las segundas llaves {} —las que siguen al else— se incluyen las sentencias que se ejecutan cuando la condición devuelve false.
Ampliando el ejemplo anterior:
let edad = 21;
if (edad >= 35) {
console.log('Eres mayor de 35');
} else {
console.log('Eres menor de 35')
}
En este caso, si la edad es mayor o igual que 35, se ejecuta el bloque del if. De lo contrario, se ejecuta el bloque del else.
Varias condiciones: ‘if else if’
La instrucción else if permite evaluar múltiples condiciones dentro de una misma estructura. Esta instrucción se coloca después de la llave de cierre del if inicial. Esta instrucción permite crear una ramificación múltiple sin tener que anidar varios if; en realidad son bifurcaciones sucesivas.
Explicación: primero se evalúa la condición 1; si es true se ejecuta la sentencia 1, pero si no, se omite. Entonces se evalúa la condición 2; si es true se ejecuta la sentencia 2, pero si no, se salta salta hasta el else. En este punto, ninguna de las dos anteriores es true, por lo que se ejecuta la sentencia 3.
Veamos su sintaxis:
if (condición 1) {
// Código que se ejecuta
// si la condición 1 es true
} else if (condición 2) {
// Código que se ejecuta
// si la condición 2 es true
} else {
// Código que se ejecuta si
// ninguna de las anteriores es true
}
JavaScript evalúa las opciones de arriba a abajo. Cada else if forma parte del else de la declaración anterior. Esto significa que el bloque que se ejecuta es aquel cuya condición devuelve true. En caso de que ninguna de las condiciones anteriores sea true, se ejecuta el bloque final del else.
Ampliando el ejemplo anterior:
let edad = 21;
if (edad >= 35) {
console.log('Eres mayor de 35');
} else if (edad >= 30) {
console.log('Tienes entre 30 y 34');
} else if (edad >= 25) {
console.log('Tienes entre 25 y 29');
} else {
console.log('Eres menor de 25');
}
En este caso, si la edad es mayor o igual que 35, se muestra el mensaje del bloque del if. Si no lo es, se comprueba si es mayor o igual que 30 y, después, si es mayor o igual que 25. Si ninguna de las condiciones es verdadera, se ejecuta el bloque del else.
Condiciones compuestas con operadores lógicos
Hasta ahora hemos visto cómo evaluar una sola condición dentro de una estructura condicional. Sin embargo, en JavaScript es posible evaluar varias condiciones al mismo tiempo dentro de una misma instrucción. Esto se consigue combinándolas mediante los operadores lógicos AND (&&) y OR (||).
El operador AND
El operador AND (&&) se usa cuando todas las condiciones deben ser verdaderas. Si ambas condiciones son truthy, la condición completa devuelve true y se ejecuta el bloque del if. En caso contrario, el código se omite.
Sintaxis básica:
if (condición && condición) {
// El código se ejecuta si
// ambas condiciones son verdaderas
}
Por ejemplo:
let edad = 25;
let tieneCarnet = true;
if (edad >= 18 && tieneCarnet) {
console.log("Puedes conducir")
}
En este ejemplo, el mensaje se muestra solo si la persona tiene 18 años o más y además posee la licencia de conducir vehículos. Si una de las dos condiciones no se cumple, el mensaje no se muestra.
El operador OR
El operador OR (||) se usa cuando basta con que una de las condiciones sea verdadera. Si una de ellas es truthy, devolverá true y se ejecutará el bloque del if. Si ambas falsy, el motor omitirá el bloque y saltará a la siguiente línea.
Sintaxis básica:
if (condición || condición) {
// El código se ejecuta si
// una condición es verdadera
}
Por ejemplo:
let esAdmin = false;
let esEditor = true;
if (esAdmin || esEditor) {
console.log("Tienes acceso")
}
En este ejemplo, el mensaje se muestra si el usuario es administrador o editor. Si ambas son falsas (valores falsy), el mensaje no se muestra.
El operador NOT
El operador NOT (!) permite negar el valor de una condición con el fin de devolver el valor opuesto. En otras palabras, si la condición es truthy, el resultado será false (falso); si es falsy, el resultado será true (verdadero).
Sintaxis básica:
if (!condición) {
// El código se ejecuta
// si la condición es falsa
}
Por ejemplo:
let edad = 25;
let tieneCarnet = false;
if (edad >= 18 && !tieneCarnet) {
console.log("Eres mayor de edad, pero no tienes carnet")
}
En este ejemplo, primero se evalúa si la persona es mayor de edad y luego si no tiene carnet. Solo si ambas condiciones se cumplen, se ejecuta el bloque.
Agrupación con paréntesis
Los paréntesis son un gran aliado a para agrupar y organizar varias condiciones dentro de una misma instrucción if. JavaScript evalúa primero los paréntesis internos y luego los externos, siguiendo la jerarquía que definamos.
Por ejemplo:
if ((edad >= 18 && edad < 65) || esAdmin) {
console.log("Acceso permitido");
}
En este ejemplo, primero se evalúa si la edad está comprendida entre los 18 y 65 años. Si esta condición es verdadera o bien la persona es administrador, se ejecuta el bloque, mostrando el mensaje.
