Sentencias de bloque y condicionales en JavaScript

Sentencias de bloque y condicionales en JavaScript

Javascript tiene un conjunto de sentencias muy específicas para el manejo de flujo, que pueden ser usadas para brindar más interactividad en la lógica de tus desarrollos.

Hablemos de la más básica, la sentencia de bloque.

Básicamente, se encarga de agrupar las sentencias. El bloque se define con un par de llaves “{ }”, uno que abre y otro que cierra el conjunto de sentencias:

{
	sentencia_1;
	sentencia_2
	.
	.
	.
	sentencia_N;
}

Este: { A + B = C; } es un bloque de sentencias, que contiene una única sentencia.

Nota muy importante: Antes de la versión ECMAScript 6, JavaScript no tenía scope a nivel de bloque. Es decir, las variables que se agregan a un bloque, pertenecen a ese bloque; ya sea un script o función. Esto implica, que los bloques en sí no introducen un nuevo scope.

Los bloques “standalone” son válidos, pero no deberían usarse en JavaScript, pues no se comportan como los bloques en C o Java.

Ejemplo:

var x = 1;
var y = 2;{
    var x = 2;
    var y = 4;
}
console.log(x); // Imprime 2
console.log(y); // Imprime 4

Sentencias condicionales

Aquí empieza lo bueno de la programación :)

En todos los lenguajes de programación, las sentencias condicionales nunca van a faltar en tu código. Por este motivo son pieza fundamental para edificar la lógica de nuestro programa y nos ayuda a dar un resultado dependiendo, si se cumple una condición A o una condición B.

En Javascript, existen dos tipos de sentencias condicionales: if … else y switch

if... else

A través de esta condición se puede ejecutar unas líneas de código si la condición lógica es verdadera o falsa. La sintaxis es la siguiente

if (condicion) {
	sentencia_1;
	sentencia_2;
} else {
sentencia_3;
sentencia_4;
}

Si, la condición lógica: if (condicion) es verdadera, el intérprete de Javascript ejecutará las líneas de código: sentencia_1 y sentencia_2.

De lo contrario, si la condición lógica no es verdadera, el intérprete deberá ejecutará las líneas de código sentencia_3 y sentencia_4 que se encuentran a partir del else {

Sin embargo, aún existe una variedad con el uso de la sentencia if...else y tiene que ver con el else if (condicion)

No siempre la lógica no resolverá si cumple o no una única condición. Hay ciertos momentos en los que debemos evaluar dos o más condiciones lógicas, para que nuestro código arroje el resultado deseado dependiendo de dicha condición.

Entonces else if ( condicion ), existe para evaluar más de una condición dentro de un mismo contexto, esto brinda más posibilidades de resultado dependiendo de las condiciones evaluadas por el intérprete del código.

if (condicion_a) {
	sentencia_1;
	sentencia_2;
} else if (condicion_b) {
	sentencia_3;
sentencia_4;
} else {
sentencia_5;
sentencia_6;
}

Nota: Nunca usar asignación simple a la hora de evaluar una expresión condicional.

Si deseas hacer una asignación simple dentro de una expresión condicional, recomiendo que la encierres en un par de paréntesis así:

if (( x = 1 )) {
sentencia_1;
sentencia_2;
}

Valores falsos

Ahora bien, una sentencia condicional evalúa un valor para ejecutar un script. Teniendo en cuenta esto, les muestro a continuación los siguientes valores que se evaluarán indiscutiblemente como falso.

Si te sientes algo perdido, te recomiendo leer este artículo que realicé sobre estructuras y tipos de datos

  • 0
  • cadena vacía (“”)
  • NaN
  • null
  • undefined
  • false

El resto de tipos de valores serán evaluados como verdaderos en una sentencia condicional.

Nota: Por favor, no confundas el valor primitivo boolean true y false, con el valor del objeto boolean true y false. El valor boolean primitivo es algo muy distinto a un objeto boolean.

Ejemplo de sentencia condicional if...else

// El formato de hora es militar

if ( hora < 12 ) {
console.log(“Buenos días campeón”);
} else if ( hora < 18 ) {
	console.log(“Buenas tardes, ¿Qué tal el almuerzo?”);
} else {
	console.log(“buenas noches”);
}

Sentencia condicional switch

Anteriormente expliqué que con la ayuda de else...if ( condicion ) se puede evaluar dos o más sentencias condicionales y ejecutar un conjunto de sentencias incluidas dentro del bloque que contiene determinada condición.

Ahora bien, existen situaciones en las que se necesita evaluar un gran número de sentencias condicionales que, por casos de optimización, ya no sería eficiente hacer uso de else if ( condicion ).

Imagínate cómo sería evaluar 10 sentencias condicionales haciendo uso de else...if

Ejemplo:

if ( condicion_1 ) {
sentencia_1;
sentencia_2;
} else if ( condicion_2 ) {
	sentencia_3;
sentencia_4;
} else if ( condicion_3 ) {
sentencia_5;
sentencia_6;
} else if ( condicion_4 ) {
sentencia_7;
sentencia_8;
} else if ( condicion_5 ) {
sentencia_9;
sentencia_10;
} else if ( condicion_6 ) {
sentencia_11;
sentencia_12;
} else if ( condicion_7 ) {
sentencia_13;
sentencia_14;
} else if ( condicion_8 ) {
sentencia_15;
sentencia_16;
} else if ( condicion_9 ) {
sentencia_17;
sentencia_18;
} else {
sentencia_19;
sentencia_20;
}

Y a pesar de que esta no es una mala práctica, hay situaciones que debemos optimizar nuestro código para que este sea más legible y fácil de modificar. Por eso existe Switch.

Además Switch nos proporciona una manera más sofisticada para evaluar una expresión e intentar encajar el valor de dicha expresión en una etiqueta de caso; que en situación tal, de que esta sea verdadera, ejecutará las sentencias de código asociadas a esa etiqueta.

Sintaxis de la sentencia condicional Switch

switch ( expresion ) {
case etiqueta_1:
sentencia_1;
sentencia_2;
break;
	case etiqueta_2:
		sentencia_3;
		sentencia_4;
		break;
	.
	.	
	case etiqueta_n:
		sentencia_n;
		sentencia_n;
		break;
}

Pero… ¿Cómo funciona switch?

  • El programa busca la cláusula case con una etiqueta que coincida con el valor de la expresión.
  • Si ambos coinciden, se ejecutan las sentencias asociadas a esa cláusula case específica.
  • Si no se encuentran etiquetas que coincidan, el programa busca la cláusula opcional default y ejecuta las sentencias asociadas a ella.
  • Si no se encuentra la cláusula default, el programa se seguirá ejecutando por la siguiente sentencia hasta llegar al final de switch.

Se entiende, que la última cláusula, es la denominada por defecto de la sentencia condicional. Sin embargo no siempre deberá ser así.

Llegó el momento de hablar de la sentencia Break;

¿qué pasa con la sentencia break; que está en el código?

break; es la responsable de finalizar la sentencia condicional switch una vez y se ejecutan todas las sentencias asociadas a la etiqueta case que la contiene. Es como una puerta de salida una vez el código a logrado su objetivo.

Cuando no escribimos la sentencia break; el código seguirá su ejecución a través de la siguiente etiqueta case y evaluará si cumple con los criterios para ejecutar las sentencias que contiene y así sucesivamente hasta llegar al final de la sentencia condicional switch.

Por lo tanto, nunca olvides usar la sentencia break;, pues con esto el programa no seguirá leyendo todas las líneas de código que contiene el switch y se saldrá en el momento que le indiquemos para que siga leyendo el código relevante para nuestro programa.

Así lograrás que tu código cumpla los objetivos con el menor uso de recursos de hardware posible. Una primicia que no deberá faltar en tus buenas prácticas de trabajo.

Ejemplo de switch

// Con este ejemplo, deseamos obtener el día actual e imprimirlo en un Console.log
// new Date().getDay() Es el objeto que obtiene el día.

switch (new Date().getDay()) {
    case 0:
        day = "Domingo";
        console.log( "hoy es: " + day );
        break;
    case 1:
        day = "Lunes";
        console.log( "hoy es: " + day );
        break;
    case 2:
        day = "Martes";
        console.log( "hoy es: " + day );
        break;
    case 3:
        day = "Miércoles";
        console.log( "hoy es: " + day );
        break;
    case 4:
        day = "Jueves";
        console.log( "hoy es: " + day );
        break;
    case 5:
        day = "Viernes";
        console.log( "hoy es: " + day );
        break;
    case 6:
        day = "Sábado";
        console.log( "hoy es: " + day );
}

Suscríbete a nuestro boletín mensual

* indicates required

Powered by Mailchimp