Cómo funciona switch 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:0012:08

Cómo funciona switch en JavaScript

Curso de Fundamentos de JavaScript

Clase 14 de 55

Clase 14 / 55

Recursos

La estructura switch en JavaScript te permite evaluar una misma variable contra varios escenarios posibles y ejecutar el bloque de código que coincida. Es ideal cuando tienes muchas opciones discretas que validar, como buscar un producto en una tienda o filtrar respuestas según una categoría.

¿Qué es switch en JavaScript y cuándo conviene usarlo?

A diferencia de if y else if, donde puedes comparar con mayor que, menor que o distinto de, switch solo evalúa una expresión contra valores específicos y ejecuta el caso que coincida [00:13]. Piensa en switch como una lista de escenarios cerrados: si tu expresión es igual a uno de ellos, ese bloque se ejecuta; si no, entra el bloque por defecto.

¿Cuándo usar switch en lugar de if else? Cuando tienes múltiples valores fijos a comparar contra una misma variable. Si solo necesitas dos o tres condiciones con operadores como mayor o menor, if else es más claro.

¿Cómo se escribe la estructura básica de un switch?

La sintaxis tiene tres partes esenciales: la expresión a evaluar, los case con sus valores, y el default como salida final [01:20].

switch (expresión): abres paréntesis y dentro pones la variable o valor que quieres validar.
case valor:: cada caso compara la expresión con un valor específico, seguido de dos puntos.
break: rompe el ciclo para que no siga evaluando los siguientes casos.
default: se ejecuta cuando ninguno de los casos anteriores coincide, funciona como el else del if.

La lógica es secuencial: switch recorre cada case preguntando si la expresión coincide. Si encuentra una coincidencia, ejecuta ese código y el break corta la cadena. Si no coincide ninguno, llega al default.

¿Por qué es importante el break en cada case?

Sin el break, JavaScript seguiría ejecutando los siguientes casos aunque ya hubiera encontrado una coincidencia. El break le dice a switch: ya encontré lo que buscaba, detente aquí. Es la forma de cerrar correctamente un caso y evitar que el código se desborde a otros bloques.

¿Cómo aplicar switch a un ejemplo real con productos de una tienda?

Imagina que entras a un mercado buscando frutas y quieres saber el precio según la fruta que pidas. Esa búsqueda se traduce muy bien a switch [04:00].

Primero declaras tu variable con let expresion = "papayas". Esa es la fruta que estás buscando. Luego, dentro del switch, pasas expresion como la variable a evaluar y abres los casos:

case "naranjas": regresa un console.log con "las naranjas cuestan 20 pesos el kilo" y cierra con break.
case "manzanas": regresa "las manzanas cuestan 43 pesos el kilo" y cierra con break.
case "plátanos": regresa "el plátano está en 30 pesos el kilo" y cierra con break.
case "mangos": case "papayas":: comparten el mismo bloque y regresan "los mangos y las papayas cuestan 25 pesos el kilo".
default: regresa un mensaje dinámico como "Lo siento, no contamos con " + expresion.

Al ejecutar con expresion = "papayas", la consola devuelve el precio compartido de mangos y papayas. Si cambias la variable a "uvas", que no existe en ningún caso, entra el default y devuelve: "Lo siento, no contamos con uvas. ¿Hay algo más que desees?" [09:30].

¿Cómo agrupar varios case que comparten el mismo código?

Cuando dos o más valores deben ejecutar el mismo bloque, puedes encadenarlos sin repetir código. Solo escribes los case uno tras otro con sus dos puntos y, debajo, el console.log común seguido de un único break. Así evitas duplicar líneas para productos que tienen el mismo precio o respuesta [07:45].

¿Qué pasa si olvido los dos puntos después de un case? JavaScript lanza un error de sintaxis. Los dos puntos son obligatorios para cerrar la declaración del valor antes del bloque de código.

¿Por qué switch usa comparación estricta y qué significa eso?

Un detalle clave que diferencia a switch de if es que internamente usa el operador de comparación estricto, equivalente al triple igual === [10:30]. Esto significa que valida tanto el valor como el tipo de dato.

Si tu expresión es el número 5 y un case tiene el string "5", no van a coincidir, porque uno es número y otro es texto. Por eso switch no admite operadores como mayor que, menor que o distinto: solo verifica igualdad estricta entre la expresión y cada valor.

Esta característica hace que switch sea predecible y rápido para escenarios cerrados, pero te obliga a pensar en los tipos de datos que estás comparando. Si trabajas con entradas de usuario, conviene normalizarlas antes de meterlas al switch.

¿Ya probaste reescribir alguno de tus if else largos como switch? Cuéntame en los comentarios qué caso de uso se te ocurrió primero.

Platzi Team

Hace 2 años

Condicion Switch

La condición switch en JavaScript es una estructura de control que permite ejecutar diferentes bloques de código según el valor de una expresión.

Es especialmente útil cuando necesitas manejar múltiples casos basados en el valor de una variable, proporcionando una alternativa más limpia y legible a múltiples declaraciones if-else.

Sintaxis de switch

La sintaxis básica de switch es la siguiente:

switch(expresión) { case valor1: // Código a ejecutar si expresión === valor1 break; case valor2: // Código a ejecutar si expresión === valor2 break; case valor3: // Código a ejecutar si expresión === valor3 break; default: // Código a ejecutar si ninguna de las cases coincide }

expresión: La expresión que se evalúa y se compara con los valores de cada case.
case: Cada case contiene un valor a comparar con la expresión. Si coinciden, se ejecuta el bloque de código asociado.
break: Detiene la ejecución del switch después de ejecutar el bloque correspondiente. Sin break, el flujo continuará con el siguiente case (esto se llama "fall-through").
default: Opcional. Es el bloque que se ejecuta si ninguna de las case coincide con la expresión.

Ejemplo con break y fall-through

let numero = 2;

switch (numero) { case 1: console.log("Número es 1"); // No hay break, así que el flujo continúa case 2: console.log("Número es 2"); break; case 3: console.log("Número es 3"); break; default: console.log("Número no está en el rango 1-3"); }

En este caso, si numero es 2, se imprimirá "Número es 2" y luego se detendrá porque hay un break. Si se omite el break en el case 1, la ejecución continuará hasta el siguiente case, imprimiendo "Número es 2".

Consideraciones Adicionales
- Uso de break: Es crucial usar break para evitar el "fall-through" accidental.
- default: Siempre es buena práctica incluir un default para manejar casos inesperados.
- Expresiones Complejas: Puedes usar expresiones complejas, pero ten en cuenta que pueden afectar la legibilidad.

Smith F

Hace 2 años

casi no son entendibles los códigos porque no tienen saltos de línea ni tabulación

Eugenia Maldonado

Hace un año

Excelente resumen!

Comentarios (48)48 comentarios

Hans Arango

Alejandro Sánchez Yalí

Daniela Angulo Ruiz

Hace 10 meses

Jorge López

Andres Massuttier

David Aldana

Joaquin Ignacio Pinto Reynolds

Oscar Javier Prado Ramos

Juan Miguel Jimenez

Calvin Rafael Bobadilla Fernandez

Hugo Montoya Diaz

Leonardo Jurado

Camila Jhovanna Arato Cisneros

David Rangel

Juan Francisco

Fernando Emilio Díaz López

Enrique Alejandro Terrazas Huamaní

Reynaldo Francisco Moreno Briceño

Seba Cardoso

Hace 3 meses

Daniel Vergel

Hace 4 meses

Jesus Alberto Sanchez Castro

Hace 6 meses

Alejandro García

Hace 5 meses

Roberto Carlos Moreira España

Hace 8 meses

José Oswaldo Alfaro Morales

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

Cómo funciona switch en JavaScript