S03L01 - If else en JavaScript

html

Dominando la Toma de Decisiones en JavaScript: Una Guía Integral sobre las Sentencias If-Else
Tabla de Contenidos

Introducción ………………………………………………………………. 1
Entendiendo las Sentencias If-Else …………………… 2
Condiciones Else-If ………………………………………………….. 5
Trabajando con Operadores Lógicos ……………………… 8
Ejemplos Prácticos …………………………………………………… 12
Mejores Prácticas ………………………………………………………...... 16
Conclusión ………………………………………………………………….. 20


Introducción
Bienvenido a "Dominando la Toma de Decisiones en JavaScript," tu recurso de referencia para entender y utilizar eficazmente las sentencias condicionales en JavaScript. La toma de decisiones es un concepto fundamental en la programación, que permite a los desarrolladores ejecutar diferentes bloques de código basados en condiciones específicas. Este eBook profundiza en las complejidades de las sentencias if-else, empoderando a principiantes y a aquellos con conocimientos básicos para escribir código más dinámico y reactivo.
Por Qué Importa la Toma de Decisiones

Flujo de Control: Dirige la trayectoria de ejecución del programa basado en condiciones.
Flexibilidad: Permite manejar diversas situaciones e inputs.
Eficiencia: Optimiza el código ejecutando solo los bloques necesarios.

Pros y Contras de las Sentencias If-Else


Pros
Contras


Simple y fácil de entender
Pueden volverse engorrosas con múltiples condiciones


Mejora la legibilidad del código
Las sentencias if-else anidadas pueden reducir la mantenibilidad


Flexible para diversas situaciones
Puede conducir a errores lógicos si no se manejan adecuadamente


Cuándo y Dónde Usar Sentencias If-Else

Validación de Entrada de Usuario: Asegurar que los datos cumplan con criterios específicos.
Activadores de Funcionalidades: Habilitar o deshabilitar características basadas en condiciones.
Desarrollo de Juegos: Gestionar estados del juego e interacciones del usuario.


Entendiendo las Sentencias If-Else
¿Qué Son las Sentencias If-Else?
Las sentencias if-else son la piedra angular de la toma de decisiones en JavaScript. Permiten la ejecución de bloques de código específicos basados en si una condición evalúa a true o false.
Sintaxis Básica




		
		
			
			
Java
			
			
if (condition) {
    // Código para ejecutar si la condición es true
} else {
    // Código para ejecutar si la condición es false
}

			
				
					
				
					1
2
3
4
5
6
7
				
						 
if (condition) {
    // Código para ejecutar si la condición es true
} else {
    // Código para ejecutar si la condición es false
}
 
					
				
			
		


Conceptos Clave

Condición: Una expresión booleana que evalúa a true o false.
Bloque de Código: Las sentencias que se ejecutan basado en el resultado de la condición.

Ejemplo Explicado
Consideremos un ejemplo básico para ilustrar cómo funcionan las sentencias if-else.




		
		
			
			
Java
			
			
const name = "Chand";

if (name === "Chand") {
    console.log("My name is Chand.");
} else {
    console.log("My name is not Chand.");
}

			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						 
const name = "Chand";
 
if (name === "Chand") {
    console.log("My name is Chand.");
} else {
    console.log("My name is not Chand.");
}
 
					
				
			
		


Explicación:

Condición: Verifica si la variable name es igual a "Chand".
Si Es True: Registra "My name is Chand."
Si Es False: Registra "My name is not Chand."

Escenarios de Salida


Valor del Nombre
Salida


"Chand"
My name is Chand.


"chand"
My name is not Chand.


"Alex"
My name is not Chand.



Condiciones Else-If
Ampliando la Toma de Decisiones con Else-If
Mientras que las sentencias if-else simples manejan dos escenarios, else-if permite que múltiples condiciones sean evaluadas secuencialmente.
Estructura de Sintaxis




		
		
			
			
Java
			
			
if (condition1) {
    // Código si condition1 es true
} else if (condition2) {
    // Código si condition2 es true
} else {
    // Código si ninguna de las condiciones anteriores es true
}

			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						 
if (condition1) {
    // Código si condition1 es true
} else if (condition2) {
    // Código si condition2 es true
} else {
    // Código si ninguna de las condiciones anteriores es true
}
 
					
				
			
		


Ejemplo Práctico




		
		
			
			
Java
			
			
let year = 2022;

if (year === 2023) {
    console.log("The year is 2023.");
} else if (year > 2023) {
    console.log("The year is after 2023.");
} else {
    console.log("The year is before 2023.");
}

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						 
let year = 2022;
 
if (year === 2023) {
    console.log("The year is 2023.");
} else if (year > 2023) {
    console.log("The year is after 2023.");
} else {
    console.log("The year is before 2023.");
}
 
					
				
			
		


Explicación:

Primera Condición: Verifica si year es exactamente 2023.
Segunda Condición: Verifica si year es mayor que 2023.
Else: Captura todos los otros casos, implicando que year es menor que 2023.

Escenarios de Salida


Valor del Año
Salida


2023
The year is 2023.


2024
The year is after 2023.


2022
The year is before 2023.


Tabla Comparativa: If-Else vs. Else-If


Característica
If-Else
Else-If


Número de Condiciones
Dos
Múltiples


Uso
Decisiones binarias simples
Rutas condicionales múltiples


Legibilidad
Alta para condiciones simples
Mantiene la legibilidad con múltiples pasos



Trabajando con Operadores Lógicos
Mejorando las Condiciones con Operadores Lógicos
Los operadores lógicos permiten la combinación de múltiples condiciones, proporcionando un mayor control sobre la toma de decisiones.
Operadores Lógicos Comunes

AND (&&): Ambas condiciones deben ser true.
OR (||): Al menos una condición debe ser true.
NOT (!): Invierte el valor booleano de una condición.

Ejemplo de Uso




		
		
			
			
Java
			
			
const age = 25;
const hasLicense = true;

if (age >= 18 && hasLicense) {
    console.log("You are eligible to drive.");
} else {
    console.log("You are not eligible to drive.");
}

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
				
						 
const age = 25;
const hasLicense = true;
 
if (age >= 18 && hasLicense) {
    console.log("You are eligible to drive.");
} else {
    console.log("You are not eligible to drive.");
}
 
					
				
			
		


Explicación:

Condición: Verifica si age es 18 o mayor and si hasLicense es true.
Si Es True: Registra la elegibilidad para conducir.
Si Es False: Registra la inelegibilidad.

Condiciones Anidadas




		
		
			
			
Java
			
			
const temperature = 30;
const isRaining = false;

if (temperature > 25) {
    if (!isRaining) {
        console.log("It's a sunny day.");
    } else {
        console.log("It's warm and raining.");
    }
} else {
    console.log("It's cold outside.");
}

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
				
						 
const temperature = 30;
const isRaining = false;
 
if (temperature > 25) {
    if (!isRaining) {
        console.log("It's a sunny day.");
    } else {
        console.log("It's warm and raining.");
    }
} else {
    console.log("It's cold outside.");
}
 
					
				
			
		


Explicación:

Primera Condición: Verifica si temperature es superior a 25.
Condición Anidada: Dentro de la primera condición, verifica si no está lloviendo.
Salidas: Dependiendo de la combinación de temperatura y lluvia.

Tabla de Verdad para Operadores Lógicos


Condición A
Condición B
A && B
A || B
!A


true
true
true
true
false


true
false
false
true
false


false
true
false
true
true


false
false
false
false
true



Ejemplos Prácticos
Ejemplo 1: Inscripción de Estudiantes
Escenario: Determinar si un estudiante es elegible para la inscripción basado en la edad y el estado de registro.




		
		
			
			
Java
			
			
const age = 19;
const isRegistered = true;

if (age >= 18 && isRegistered) {
    console.log("Student is eligible for enrollment.");
} else if (age >= 18 && !isRegistered) {
    console.log("Student needs to complete registration.");
} else {
    console.log("Student is not eligible due to age.");
}

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
				
						 
const age = 19;
const isRegistered = true;
 
if (age >= 18 && isRegistered) {
    console.log("Student is eligible for enrollment.");
} else if (age >= 18 && !isRegistered) {
    console.log("Student needs to complete registration.");
} else {
    console.log("Student is not eligible due to age.");
}
 
					
				
			
		


Salida:




		
		
			
			
Java
			
			
Student is eligible for enrollment.

			
				
					
				
					1
2
3
				
						 
Student is eligible for enrollment.
 
					
				
			
		


Explicación Paso a Paso:

Primera Condición: age >= 18 && isRegistered

19 >= 18 → true
isRegistered → true
Ambos son true → Ejecuta el primer bloque.


Else If: No se evalúa ya que se cumple la primera condición.
Else: No se ejecuta.

Ejemplo 2: Comparación de Números
Escenario: Comparar un número para determinar su relación con cero.




		
		
			
			
Java
			
			
const number = -5;

if (number > 0) {
    console.log("The number is positive.");
} else if (number < 0) {
    console.log("The number is negative.");
} else {
    console.log("The number is zero.");
}

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						 
const number = -5;
 
if (number > 0) {
    console.log("The number is positive.");
} else if (number < 0) {
    console.log("The number is negative.");
} else {
    console.log("The number is zero.");
}
 
					
				
			
		


Salida:




		
		
			
			
Java
			
			
The number is negative.

			
				
					
				
					1
2
3
				
						 
The number is negative.
 
					
				
			
		


Explicación Paso a Paso:

Primera Condición: number > 0

-5 > 0 → false


Else If: number < 0

-5 < 0 → true
Ejecuta el segundo bloque.


Else: No se ejecuta.

Diagrama: Diagrama de Flujo de la Sentencia If-Else




		
		
			
			
Java
			
			
flowchart TD
    A[Start] --> B{Condition?}
    B -- Yes --> C[Execute If Block]
    B -- No --> D{Else If Condition?}
    D -- Yes --> E[Execute Else If Block]
    D -- No --> F[Execute Else Block]
    C --> G[End]
    E --> G
    F --> G

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						 
flowchart TD
    A[Start] --> B{Condition?}
    B -- Yes --> C[Execute If Block]
    B -- No --> D{Else If Condition?}
    D -- Yes --> E[Execute Else If Block]
    D -- No --> F[Execute Else Block]
    C --> G[End]
    E --> G
    F --> G
 
					
				
			
		



Conclusión
En esta guía, hemos explorado los aspectos esenciales de las sentencias if-else en JavaScript, una herramienta fundamental para la toma de decisiones en la programación. Al dominar estas estructuras, puedes crear aplicaciones más dinámicas y reactivas, manejar múltiples escenarios de manera eficiente y mejorar tu competencia general en codificación.
Conclusiones Clave

Conceptos Básicos de If-Else: Comprender la estructura y el propósito de las sentencias if-else.
Extensiones de Else-If: Implementar múltiples condiciones sin problema.
Operadores Lógicos: Combinar condiciones para una toma de decisiones más compleja.
Aplicaciones Prácticas: Aplicar conceptos a través de ejemplos del mundo real.
Mejores Prácticas: Escribir código condicional limpio, legible y mantenible.

Continúa practicando estos conceptos, experimenta con diferentes escenarios e integra las sentencias if-else en tus proyectos para construir aplicaciones JavaScript robustas.
Nota: Este artículo es generado por IA.
Condición A	Condición B	A && B	A \|\| B	!A
true	true	true	true	false
true	false	false	true	false
false	true	false	true	true
false	false	false	false	true
Pros	Contras
Simple y fácil de entender	Pueden volverse engorrosas con múltiples condiciones
Mejora la legibilidad del código	Las sentencias if-else anidadas pueden reducir la mantenibilidad
Flexible para diversas situaciones	Puede conducir a errores lógicos si no se manejan adecuadamente
Valor del Nombre	Salida
"Chand"	My name is Chand.
"chand"	My name is not Chand.
"Alex"	My name is not Chand.
Valor del Año	Salida
2023	The year is 2023.
2024	The year is after 2023.
2022	The year is before 2023.
Característica	If-Else	Else-If
Número de Condiciones	Dos	Múltiples
Uso	Decisiones binarias simples	Rutas condicionales múltiples
Legibilidad	Alta para condiciones simples	Mantiene la legibilidad con múltiples pasos