Novedades ES6

Estructuras condicionales simples en JavaScript.

En cualquier lenguaje de programación, el código necesita realizar decisiones y llevar a cabo diferentes acciones acordes dependiendo de distintas entradas. Por ejemplo, en un juego, si el el numero de vidas del jugador es 0, entonces se termina el juego. En una aplicación del clima, si se observa en la mañana, se despliega una gráfica del amanecer; muestra estrellas y una luna si es de noche. En este artículo, exploraremos cómo las llamadas declaraciones condicionales funcionan en JavaScript

No todos los problemas pueden resolverse empleando estructuras secuenciales. Cuando hay que tomar una decisión aparecen las estructuras condicionales.
En nuestra vida diaria se nos presentan situaciones donde debemos decidir.
¿Elijo la carrera A o la carrera B ?
¿Me pongo este pantalón ?
¿Entro al sitio A o al sitio B ?
Para ir al trabajo, ¿elijo el camino A o el camino B ?
Al cursar una carrera, ¿elijo el turno mañana, tarde o noche ?

condicional en javascripot
Por supuesto que en un problema se combinan estructuras secuenciales y condicionales.
Cuando se presenta la elección tenemos la opción de realizar una actividad o no realizarla.
En una estructura CONDICIONAL SIMPLE por el camino del verdadero hay actividades y por el camino del falso no hay actividades. Por el camino del verdadero pueden existir varias operaciones, entradas y salidas, inclusive ya veremos que puede haber otras estructuras condicionales. 

Ejemplo: Realizar la carga de una nota de un alumno.

Mostrar un mensaje que aprobó si tiene una nota mayor o igual a 4:

<html>
<head>
</head>
<body>
<script language="javascript">
var nombre;
var nota;
nombre=prompt('Ingrese nombre:','');
nota=prompt('Ingrese su nota:','');
if (nota>=4)
{

document.write(nombre+' esta aprobado con un '+nota);
}
</script>
</body>
</html>

Aparece la instrucción if en el lenguaje JavaScript. La condición debe ir entre paréntesis. Si la condición se verifica verdadera se ejecuta todas las instrucciones que se encuentran encerradas entre las llaves de apertura y cerrado seguidas al if.
Para disponer condiciones en un if podemos utilizar alguno de los siguientes operadores relacionales:

    Operador     Descripción
    >     mayor
    >=     mayor o igual
    <     menor
    <=     menor o igual
    !=     distinto

Siempre debemos tener en cuenta que en la condición del if deben intervenir una variable un operador relacional y otra variable o valor fijo.
Otra cosa que hemos incorporado es el operador + para cadenas de caracteres:

document.write(nombre+' esta aprobado con un '+nota);
Con esto hacemos más corto la cantidad de líneas de nuestro programa, recordemos que veníamos haciéndolo de la siguiente forma:

document.write(nombre);
document.write(' esta aprobado con un ');

document.write(nota);

Operador condicional ?:


El operador condicional ?: remplaza en algunos casos a estructuras if/else sencillas con el objetivo de escribir un código más compacto o corto.

Veamos primero un ejemplo resuelto con el if y luego modificado para emplear el operador condicional ?:

Problema

Cargar dos valores por teclado, luego almacenar en una variable el mayor de los dos valores ingresados.


<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var v1=prompt('Ingrese primer valor:','');
  var v2=prompt('Ingrese segundo valor:','');
  v1=parseInt(v1);
  v2=parseInt(v2);
  var mayor;
  if (v1>v2)
    mayor=v1;
  else
    mayor=v2;
  document.write('El mayor de los dos valores es:'+mayor);
</script>
  
</body>
</html>

Ahora el mismo problema pero empleando el operador codicional ?:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var v1=prompt('Ingrese primer valor:','');
  var v2=prompt('Ingrese segundo valor:','');
  v1=parseInt(v1);
  v2=parseInt(v2);
  var mayor;
  v1>v2 ? mayor=v1 : mayor=v2;
  document.write('El mayor de los dos valores es:'+mayor);
</script>
  
</body>
</html>

El operador ternario en el ejemplo lo podemos identificar en la siguiente línea:

  v1>v2 ? mayor=v1 : mayor=v2;

El operador ternario tiene la siguiente sintaxis:

  condición ? instrucción 1 : instrucción 2;

La condición es lo primero que indicamos a la izquierda del carácter "?". La condición siempre debe generar un resultado de tipo boolean (true/false)

Si la condición se verifica verdadera se ejecuta la instrucción 1, que es la que se encuentra a la izquierda del carácter ":", en cambio si la condición se verifica false se ejecuta la instrucción 2.