Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:44

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Curso de Fundamentos de JavaScript

Clase 12 de 55

Clase 12 / 55

Recursos

Dominar las estructuras condicionales en JavaScript es el primer paso para que tu código tome decisiones de forma inteligente. Cuando ya sabes crear variables, constantes y funciones, el siguiente reto es determinar qué parte del código se ejecuta dependiendo de una condición específica. Aquí es donde entran en acción las estructuras de control.

¿Qué es la estructura if y cómo funciona?

La palabra reservada if significa literalmente "si" en español. Su lógica es directa: si pasa esto, entonces ejecuta esto [0:42]. La sintaxis básica requiere tres elementos:

La palabra if seguida de paréntesis.
Dentro de los paréntesis, una condición que se evalúa.
Dentro de llaves (brackets), el bloque de código que se ejecuta si la condición es verdadera.

javascript let nombre = "Diego";

if (nombre === "Diego") { console.log("Hola, Diego"); }

En este ejemplo se utiliza el operador de asignación (=) para darle un valor a la variable nombre [3:10]. Después, dentro del if, se emplea el operador de igualdad estricta (===) para comparar si el valor almacenado coincide con "Diego". Si la condición se cumple, el console.log imprime el mensaje en la consola del navegador [4:30].

¿Qué sucede cuando la condición no se cumple?

Si cambias el valor de la variable a otro nombre, por ejemplo "Nico", la condición nombre === "Diego" ya no es verdadera y no se ejecuta ningún código [5:12]. Para manejar ese escenario existe else, que actúa como la instrucción default: el bloque que se ejecuta cuando ninguna condición previa se cumplió.

javascript let nombre = "Nico";

if (nombre === "Diego") { console.log("Hola, Diego"); } else { console.log("Nombre no encontrado"); }

Es una buena práctica incluir siempre un else que ofrezca una respuesta por defecto. Así evitas que tu programa quede en silencio cuando los datos no coinciden con lo esperado [5:55].

¿Cómo agregar múltiples condiciones con else if?

Cuando necesitas evaluar más de un caso, la estructura crece con else if [2:15]. Esto te permite encadenar varias condiciones antes de llegar al bloque default.

javascript let nombre = "Nico";

if (nombre === "Diego") { console.log("Hola, Diego"); } else if (nombre === "Nico") { console.log("Hola, Nico"); } else { console.log("Nombre no encontrado"); }

El flujo funciona así:

Primero evalúa si nombre es "Diego".
Si no lo es, evalúa la segunda condición: si nombre es "Nico" [7:20].
Si ninguna condición se cumple, ejecuta el bloque else.

Un error común es escribir else if sin definir la condición dentro de los paréntesis. JavaScript lanzará un error indicando la línea exacta del problema [6:40]. Siempre verifica que cada else if contenga una expresión válida entre paréntesis.

¿Qué papel juegan los operadores en las condiciones?

Los operadores son los símbolos que hacen posible cada validación [1:10]. En los ejemplos anteriores aparecen dos fundamentales:

Operador de asignación (=): asigna un valor a una variable.
Operador de igualdad estricta (===): compara tanto el valor como el tipo de dato.

Sin operadores, las estructuras de control no podrían determinar si una condición es verdadera o falsa. Son la pieza que conecta la variable con el valor que deseas comparar.

¿Cómo probar tu código en el navegador?

Para verificar los resultados puedes utilizar un servidor local desde Visual Studio Code mediante un plugin como Live Server [3:45]. Al guardar el archivo, los cambios se reflejan automáticamente en la consola del navegador. Abre el inspector de elementos, dirígete a la pestaña de consola y ahí verás la salida de cada console.log junto con el número de línea correspondiente [4:50].

Esta forma de trabajar te permite iterar rápidamente: cambias el valor de la variable, guardas y observas al instante qué bloque de código se ejecutó.

Si quieres practicar, intenta agregar más condiciones con else if para saludar a diferentes nombres y comparte en los comentarios cuántas condiciones lograste encadenar.

Augusto Eduardo Bonalumi

Hace 2 años

También se pueden escribir condiciones en una línea del siguiente modo:

7 == 7 ? 'verdadero' : 'falso'

César Cubarrubia

Hace 2 años

Para los que no entendienden lo que escribió el compañero. Se le denomina "operación ternaria". Siendo esta una manera más corta de escribir una condición.

En donde " 7 == 7 " es la condición, " ? 'verdadero' " es lo que devuelve si se cumple la condición. Y " : 'falso' " cuando no se cumple la condición

Se recomienda usarla solo para casos concretos en donde la condición sea simple y se devuelvan dos valores, para evitar la anidación de ternarias. Más por el hecho de que el código se vea limpio y sea más legible para los demás.

Espero les sirva :)

Carbajal Resendiz Oswaldo Moises

Hace 2 años

lo que agrego el compañero una condicional mediante el operador ternario o condicional, si no mal recuerdo solo se ocupa para devolver true o false.

let greeting = isBirthday ? "Feliz cumpleaños Sra. Smith. ¡Esperamos que tenga un gran día!" : "Buenos días señora Smith.";

Comentarios (57)57 comentarios

Juan Pablo Avila

Rodrigo Aguilar

Arnol Daniel Degollado Garrocho

Ivan Daniel Cuevas

Endy Torres

José Carlos Mejía Ospino

Jonathan Lozano Alcalá

Rafael Sanhueza

Hugo Alvarez

Hace un año

Diego Andrés Lopez Rodriguez

Cristhian Melo

luis jara

Jean Grober

Juan Miguel Jimenez

Elias Echaabi

Jose daniel Arteaga villamizar

Gabriel Rojas

Hace 4 meses

Seba Cardoso

Hace 3 meses

Andrés Pastrana

angel2 black2

Jorge Ivan Martinez Guerra

Leonardo Guevara

Hans Arango

Paola Lorena Fraticola

Jess Key

Hace 10 meses

Juan David Maldonado Gómez

SARA ACUÑA BENAVIDES

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript