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

Estrada Web Group
Estrada Web Group
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.

Compartir artículo:

Más artículos geniales

Cómo usar la declaración if...else de JavaScript

Cómo usar la declaración if...else de JavaScript

Resumen: en este tutorial, aprenderás a usar la declaración if...else de JavaScript para ejecutar un bloque basado en una condición.

Ver artículo completo
Cambiar el valor seleccionado en un combobox o select con javascript y jquery

Cambiar el valor seleccionado en un combobox o select con javascript y jquery

En html existe un control llamado select y algunos lo llaman combobox, el cual nos ayuda a crear una lista desplegable con opciones para que nuestros usuarios puedan seleccionar de esta lista una opción.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla