Las sentencias condicionales en JavaScript permiten ejecutar diferentes bloques de código en función de ciertas condiciones. Son fundamentales para controlar el flujo de un programa y tomar decisiones basadas en diferentes criterios.
Conceptos Clave
- if: Evalúa una condición y ejecuta un bloque de código si la condición es verdadera.
- else: Se utiliza junto con
if
para ejecutar un bloque de código si la condición delif
es falsa. - else if: Permite evaluar múltiples condiciones.
- Operadores de comparación: Utilizados para comparar valores en las condiciones (
==
,===
,!=
,!==
,>
,<
,>=
,<=
). - Operadores lógicos: Permiten combinar múltiples condiciones (
&&
,||
,!
).
Estructura Básica
if
if...else
if (condición) { // Código a ejecutar si la condición es verdadera } else { // Código a ejecutar si la condición es falsa }
if...else if...else
if (condición1) { // Código a ejecutar si la condición1 es verdadera } else if (condición2) { // Código a ejecutar si la condición2 es verdadera } else { // Código a ejecutar si ninguna de las condiciones anteriores es verdadera }
Ejemplos Prácticos
Ejemplo 1: Uso Básico de if
Explicación: Si la variable edad
es mayor o igual a 18, se imprime "Eres mayor de edad." en la consola.
Ejemplo 2: if...else
let edad = 16; if (edad >= 18) { console.log("Eres mayor de edad."); } else { console.log("Eres menor de edad."); }
Explicación: Si la variable edad
es menor que 18, se imprime "Eres menor de edad." en la consola.
Ejemplo 3: if...else if...else
let nota = 85; if (nota >= 90) { console.log("Excelente"); } else if (nota >= 75) { console.log("Bueno"); } else if (nota >= 50) { console.log("Aprobado"); } else { console.log("Reprobado"); }
Explicación: Dependiendo del valor de nota
, se imprime un mensaje diferente en la consola.
Operadores de Comparación y Lógicos
Tabla de Operadores de Comparación
Operador | Descripción | Ejemplo |
---|---|---|
== |
Igual a | 5 == '5' |
=== |
Estrictamente igual a | 5 === 5 |
!= |
No igual a | 5 != '5' |
!== |
Estrictamente no igual a | 5 !== '5' |
> |
Mayor que | 5 > 3 |
< |
Menor que | 3 < 5 |
>= |
Mayor o igual que | 5 >= 5 |
<= |
Menor o igual que | 3 <= 5 |
Tabla de Operadores Lógicos
Operador | Descripción | Ejemplo |
---|---|---|
&& |
Y lógico (AND) | true && false |
` | ` | |
! |
Negación lógica (NOT) | !true |
Ejercicios Prácticos
Ejercicio 1: Verificación de Edad
Escribe un programa que verifique si una persona es mayor de edad (18 años o más) y muestre un mensaje apropiado.
Solución:
let edad = 20; if (edad >= 18) { console.log("Eres mayor de edad."); } else { console.log("Eres menor de edad."); }
Ejercicio 2: Clasificación de Notas
Escribe un programa que clasifique una nota (0-100) en "Excelente", "Bueno", "Aprobado" o "Reprobado".
Solución:
let nota = 72; if (nota >= 90) { console.log("Excelente"); } else if (nota >= 75) { console.log("Bueno"); } else if (nota >= 50) { console.log("Aprobado"); } else { console.log("Reprobado"); }
Errores Comunes y Consejos
-
Uso incorrecto de
==
y===
:==
compara valores sin tener en cuenta el tipo, mientras que===
compara tanto el valor como el tipo. Es recomendable usar===
para evitar errores inesperados.console.log(5 == '5'); // true console.log(5 === '5'); // false
-
Olvidar las llaves
{}
en bloques de código: Aunque no son necesarias para bloques de una sola línea, es una buena práctica usarlas siempre para evitar errores en el futuro.if (edad >= 18) console.log("Eres mayor de edad.");
-
No cubrir todos los casos posibles: Asegúrate de manejar todos los casos posibles en tus sentencias condicionales para evitar comportamientos inesperados.
Conclusión
Las sentencias condicionales son una herramienta esencial en JavaScript para controlar el flujo de ejecución de un programa. Con if
, else if
y else
, puedes tomar decisiones basadas en diferentes condiciones. Asegúrate de entender bien los operadores de comparación y lógicos para escribir condiciones precisas y efectivas.
En el próximo tema, exploraremos los bucles en JavaScript, que te permitirán ejecutar bloques de código repetidamente bajo ciertas condiciones.
JavaScript: De Principiante a Avanzado
Módulo 1: Introducción a JavaScript
- ¿Qué es JavaScript?
- Configuración de tu Entorno de Desarrollo
- Tu Primer Programa en JavaScript
- Sintaxis y Conceptos Básicos de JavaScript
- Variables y Tipos de Datos
- Operadores Básicos
Módulo 2: Estructuras de Control
- Sentencias Condicionales
- Bucles: for, while, do-while
- Sentencias Switch
- Manejo de Errores con try-catch
Módulo 3: Funciones
- Definición y Llamada de Funciones
- Expresiones de Función y Funciones Flecha
- Parámetros y Valores de Retorno
- Ámbito y Closures
- Funciones de Orden Superior
Módulo 4: Objetos y Arrays
- Introducción a los Objetos
- Métodos de Objeto y la Palabra Clave 'this'
- Arrays: Conceptos Básicos y Métodos
- Iteración sobre Arrays
- Desestructuración de Arrays
Módulo 5: Objetos y Funciones Avanzadas
- Prototipos y Herencia
- Clases y Programación Orientada a Objetos
- Módulos e Importación/Exportación
- JavaScript Asíncrono: Callbacks
- Promesas y Async/Await
Módulo 6: El Modelo de Objetos del Documento (DOM)
- Introducción al DOM
- Selección y Manipulación de Elementos del DOM
- Manejo de Eventos
- Creación y Eliminación de Elementos del DOM
- Manejo y Validación de Formularios
Módulo 7: APIs del Navegador y Temas Avanzados
- Almacenamiento Local y de Sesión
- Fetch API y AJAX
- WebSockets
- Service Workers y Aplicaciones Web Progresivas (PWAs)
- Introducción a WebAssembly
Módulo 8: Pruebas y Depuración
- Depuración de JavaScript
- Pruebas Unitarias con Jest
- Pruebas de Integración
- Pruebas de Extremo a Extremo con Cypress
Módulo 9: Rendimiento y Optimización
- Optimización del Rendimiento de JavaScript
- Gestión de Memoria
- Manipulación Eficiente del DOM
- Carga Perezosa y División de Código
Módulo 10: Frameworks y Librerías de JavaScript
- Introducción a React
- Gestión de Estado con Redux
- Conceptos Básicos de Vue.js
- Conceptos Básicos de Angular
- Elegir el Framework Adecuado