Sentencias condicionales en JavaScript: como usar if y if else en JS

En vez de realizar acciones lineales, un programa a menudo tiene que cambiar la manera de ejecutar el código cuando se cumplen ciertas condiciones. Por ejemplo, un juego continúa siempre y cuando el jugador tenga al menos una vida. Si esta condición no se cumple, el juego termina. Para lograr que los programas se comporten de forma deseada, los desarrolladores de juegos usan sentencias condicionales en JavaScript. En este artículo, te contamos qué son y cómo funcionan las sentencias condicionales if, if…elsey switch.

¿Qué son las sentencias if y if…else en JavaScript?

Fuente: Unsplash

Las sentencias if y if…else son estructuras de control de flujo usadas en JavaScript. El flujo de código condicional permite elegir la siguiente instrucción dependiendo de la respuesta o el resultado. Gracias a las sentencias if y if…else, el programa toma una decisión de cómo ejecutar el código si se cumple o no una condición necesaria.

La sentencia if sencilla tiene la siguiente sintaxis:

if (condición) {
// bloque de código a ejecutar si la condición es verdadera
}

If evalúa la condición dentro del paréntesis () como una expresión booleana: verdadera o falsa. Estas expresiones se obtienen usando los operadores de comparación ==, ===, >, <, >=, <=, !==, !=. Si la condición es verdadera (true), se ejecuta el código dentro de las llaves {}. Si la condición resulta falsa (false), el bloque de código se omite.

Si quieres que tu programa tenga una opción adicional de acción, agrega la palabra clave else para ejecutar otro bloque de código si la condición es falsa. La sintaxis de la sentencia será:

if (condición) {
// bloque de código a ejecutar si la condición es verdadera
} else {
// bloque de código a ejecutar si la condición es falsa
}

Si hay más de dos variantes, puedes usar una sentencia else if anidada para especificar una nueva condición si la primera condición es falsa.

if (condición 1) {
// bloque de código a ejecutar si la condición 1 es verdadera
} else if (condición 2) {
// bloque de código a ejecutar si la condición 1 es falsa y la condición 2 es verdadera
} else {
// bloque de código a ejecutar si la condición 1 es falsa y la condición 2 es falsa
}

¿Cuándo usar la sentencia switch?

Fuente: Unsplash

La sentencia switch es una alternativa a múltiples sentencias condicionales anidadas. Úsala para comparar algún valor con varias opciones (cases) a la vez y ejecutar el fragmento de código correspondiente. Cuando el programa llegue a la indicación break, sale de la sentencia switch. Si no se encuentra ninguna coincidencia, se ejecuta la cláusula predeterminada (default).

La sentencia switch tiene la siguiente sintaxis:

switch(expresión) {
case valor1:
// bloque de código 1
break;
case valor2:
// bloque de código 2
break;
default:
// bloque de código 3
}

Los operadores y las sentencias if…else en JavaScript

Para crear condiciones compuestas, también puedes usar los siguientes operadores:

• El operador lógico Y (&&) retorna true si ambas condiciones son verdaderas y se ejecuta el bloque de código if. De lo contrario, el operador retorna false y se ejecuta el código else.
• El operador lógico O (||) ejecuta el código dentro de la sentencia if si una o ambas condiciones son verdaderas.
• El operador lógico NO (!) retorna el valor contrario: si un valor es verdadero, lo hará falso y viceversa.
• El operador condicional o ternario (?:) está compuesto de tres partes y permite recibir un valor dependiendo de la condición: (condición) ? valor1 : valor2. Si la condición es verdadera, se retorna el valor entre el signo interrogativo ? y dos puntos :. En el caso de ser falsa se procede al valor después de :.

Aunque las variantes con operadores a primera vista aparecen más cortas, no abuses de ellas. Las sentencias if…else son más obvias y más legibles.

Ejemplos

Ahora juguemos con un ejemplo de código. Usamos el método prompt() que muestra un cuadro de diálogo con un mensaje. El retorno depende de la entrada del usuario.

Puedes copiar este código y ejecutarlo aquí. Selecciona la pestaña JavaScript, pega el código, presiona Run y diviértete.

let contraseña = prompt ('Habla amigo y entra');
if (contraseña === 'amigo') {
alert ('Hola');
} else {
alert('No te conozco');
throw "stop";
}
// ¿Lograste entrar? Decide por dónde sigues:
let ruta = prompt ('Escoge una de tres rutas');
switch (ruta) {
case '1':
alert ('Te has perdido en el Bosque Negro');
throw "stop";
case '2':
alert ('Has llegado a la Montaña del Dragón');
break;
case '3':
alert (' Te ha comido un troll');
throw "stop";
default:
alert ('Mejor regresa a casa');
throw "stop";
}
// Ahora toma una decisión seria:
let escape = prompt ('¡Ojo! El Dragón se despierta. ¿Correr o esconderse? ')
if (escape === 'esconderse') {
alert ('El Dragón se ha ido');
} else if (escape === 'correr') {
alert ('Regresa a casa ya');
} else {
alert('El Dragón te ha quemado');
}
// Por fin veremos es resultado final:
result = (escape === 'esconderse') ? alert('¡Has encontrado el tesoro!') : alert ('¡Intenta otra vez!');

Si sueñas con desarrollar tu propio videojuego, lo puedes hacer con JavaScript. Es uno de los mejores lenguajes de programación para empezar a desarrollar juegos de navegador, al igual que aplicaciones móviles y de escritorio. En EBAC te recomendamos inscribirte en el curso online de Profesión: Diseñador Full Stack. Conocerás todos los detalles de cómo se elaboran apps, aprenderás los fundamentos de JavaScript y su sintaxis básica, trabajarás con las bibliotecas y los frameworks más populares. El curso está compuesto de videolecciones y actividades prácticas que puedes hacer a tu ritmo, desde cualquier lugar y con feedback personalizado de los tutores. Tu proyecto final será crear un sitio web y una aplicación web desde cero. Al finalizar el curso, recibirás un certificado de EBAC y acceso a la plataforma de por vida.