Cómo usar la declaración if else if en JavaScript

Resumen: en este tutorial, aprenderás a usar la declaración if...else...if en JavaScript para verificar múltiples condiciones y ejecutar el bloque correspondiente si una condición es verdadera.

Introducción a la declaración if else if en JavaScript

Las declaraciones if…else aceptan una sola condición y ejecutan el bloque if o else en consecuencia según la condición.

Para comprobar varias condiciones y ejecutar el bloque correspondiente si una condición es verdadera, utiliza la declaración if...else...if como esta:

if (condition1) {
  // ...
} else if (condition2) {
  // ...
} else if (condition3) {
  //...
} else {
  //...
}

En esta sintaxis, la sentencia if...else...if tiene tres condiciones. En teoría, puedes tener tantas condiciones como desees.

La sentencia if...else...if comprueba las condiciones de arriba abajo y ejecuta el bloque correspondiente si la condición es verdadera.

La declaración if...else...if deja de evaluar las condiciones restantes tan pronto como una condición es verdadera. Por ejemplo, si la condition2 es verdadera, la instrucción if...else...if no evaluará la condition3.

Si todas las condiciones son falsas, la instrucción if...else...if ejecuta el bloque en la rama else.

JavaScript if else if ejemplos

Tomemos algunos ejemplos del uso de la sentencia if...else...if.

1) Un simple ejemplo de sentencia if…else…if de JavaScript

El siguiente ejemplo usa la instrucción if...else...if para obtener el nombre del mes de un número de mes:

let month = 6;
let monthName;

if (month == 1) {
  monthName = 'Jan';
} else if (month == 2) {
  monthName = 'Feb';
} else if (month == 3) {
  monthName = 'Mar';
} else if (month == 4) {
  monthName = 'Apr';
} else if (month == 5) {
  monthName = 'May';
} else if (month == 6) {
  monthName = 'Jun';
} else if (month == 7) {
  monthName = 'Jul';
} else if (month == 8) {
  monthName = 'Aug';
} else if (month == 9) {
  monthName = 'Sep';
} else if (month == 10) {
  monthName = 'Oct';
} else if (month == 11) {
  monthName = 'Nov';
} else if (month == 12) {
  monthName = 'Dec';
} else {
  monthName = 'Invalid month';
}
console.log(monthName);

Resultado:

'Jun'

En este ejemplo, comparamos el mes con 12 números del 1 al 12 y asignamos el nombre del mes correspondiente a la variable monthName.

Dado que el mes es 6, la expresión month==6 se evalúa como verdadera. Por lo tanto, la sentencia if...else...if asigna la cadena literal 'Jun' a la variable monthName. Por lo tanto, ves a Jun en la consola.

Si cambias el mes a un número que no está entre 1 y 12, verás 'Invalid month' en la consola porque se ejecutará la cláusula else.

2) Uso de la declaración if... else... if en JavaScript para calcular el índice de masa corporal

El siguiente ejemplo calcula el índice de masa corporal (IMC) de una persona. Utiliza la instrucción if...else...if para determinar el estado del peso en función del IMC:

let weight = 70; // kg
let height = 1.72; // meter

// calculate the body mass index (BMI)
let bmi = weight / (height * height);

let weightStatus;

if (bmi < 18.5) {
  weightStatus = 'Underweight';
} else if (bmi >= 18.5 && bmi <= 24.9) {
  weightStatus = 'Healthy Weight';
} else if (bmi >= 25 && bmi <= 29.9) {
  weightStatus = 'Overweight';
} else {
  weightStatus = 'Obesity';
}

console.log(weightStatus);

Resultado:

'Healthy Weight'

Cómo funciona.

• Primero, declara dos variables que contengan el peso en kilogramos y la altura en metros. En una aplicación del mundo real, obtendrás estos valores de un formulario web.
• En segundo lugar, calcula el índice de masa corporal dividiendo el peso por el cuadrado de la altura.
• En tercer lugar, determine el estado del peso en función del IMC utilizando la instrucción if...else...if.
• Finalmente, envíe el estado del peso a la consola.

Resumen

Usa la declaración if...else...if de JavaScript para verificar múltiples condiciones y ejecutar el bloque correspondiente si una condición es verdadera.