Sentencia switch en JavaScript

Introducción a la sentencia switch

En JavaScript, la sentencia switch ejecuta uno de varios bloques de código según el valor de una única expresión. Cuando te encuentras escribiendo una larga cadena de sentencias if / else if que comparan la misma variable contra distintos valores, un switch suele ser una forma más limpia y legible de expresar la misma lógica.

Este capítulo cubre la sintaxis completa, cómo funcionan juntos case, break y default, el fall-through intencional frente al accidental, la comparación estricta (===) que usa switch, cómo delimitar el ámbito de las variables dentro de un case, y cuándo switch es — y no es — la opción correcta.

Cómo funciona switch

Un switch evalúa su expresión una sola vez y luego compara el resultado con cada valor de case de arriba a abajo usando comparación estricta (===). El primer case que coincida se convierte en el punto de entrada: la ejecución comienza ahí y continúa con las sentencias siguientes hasta que encuentra un break, un return o el final del switch. Si ningún case coincide, se ejecuta el bloque default opcional.

Sintaxis y estructura de la sentencia switch

El esqueleto de una sentencia switch tiene este aspecto:

switch(expression) {
  case value1:
    //Statements executed when the
    //result of expression matches value1
    break;
  case value2:
    //Statements for value2
    break;
  default:
    //Statements executed if no case matches
}

Algunas reglas que conviene recordar:

• La expresión se evalúa una sola vez, al principio.
• Las etiquetas case deben ir seguidas de dos puntos (:), no de una llave.
• break finaliza el switch; sin él, la ejecución cae al siguiente case (véase Fall-Through más abajo).
• default es opcional y no tiene que ir al final, aunque por convención se coloca al final.

Ejemplo básico de switch

Fall-Through: Agrupación vs. Accidental

Cuando un case no tiene break, la ejecución "cae" al siguiente case. Este es un único mecanismo con dos resultados muy distintos — uno útil, el otro un error clásico.

Agrupación intencional (fall-through correcto)

Al apilar etiquetas case vacías, puedes ejecutar el mismo código para varios valores. Esta es la forma idiomática de manejar "cualquiera de estas entradas debe hacer lo mismo".

Como 'apple' coincide con la primera etiqueta y dicha etiqueta no tiene cuerpo, la ejecución fluye hacia el console.log('Red fruit') compartido y se detiene en break.

Fall-Through accidental (el error)

Si olvidas un break, todos los cases posteriores a la coincidencia también se ejecutan hasta el siguiente break o el final del switch. Aquí fruit es 'apple', pero se imprimen las cuatro líneas:

Añadir break; después de cada console.log limitaría la salida a solo Apple is red.. La regla general: termina cada case con break (o return) a menos que estés deliberadamente agrupando cases.

Ámbito de bloque dentro de un case

Todas las cláusulas case comparten un único ámbito de bloque — el cuerpo del switch. Esto significa que un let o const declarado en un case es visible en los demás y puede provocar el error "Cannot access before initialization". Envuelve el cuerpo de un case entre llaves propias { ... } para darle un ámbito privado:

Sin las llaves, declarar const result en ambos cases lanzaría un error de sintaxis por la declaración duplicada en el ámbito compartido.

Comparación estricta (===) en switch

El switch de JavaScript compara la expresión con cada valor de case usando igualdad estricta (===) — no se aplica coerción de tipos. Por tanto, el tipo también debe coincidir, no solo el valor. Para más información sobre las diferencias entre === y ==, consulta Operadores de comparación.

En este ejemplo, el string '0' no coincide con el número 0, por lo que se ejecuta default:

Si necesitas hacer coincidir independientemente del tipo, convierte la expresión primero, por ejemplo switch (Number(x)).

switch vs. if/else

Ambos pueden expresar la misma lógica de ramificación, así que elige en función de la forma de la condición:

• Prefiere switch cuando compares un valor contra muchas opciones discretas y constantes (un código de estado, un nombre de comando, una opción de menú). Se lee con claridad y la intención es obvia.
• Prefiere if / else if cuando las condiciones son rangos o expresiones booleanas (age >= 18, score > 90 && passed), implican variables distintas o necesitan la flexibilidad que la comparación estricta === no puede proporcionar.
• Para mapear una clave a un único valor, una búsqueda en un objeto simple (const labels = { add: 'Addition' }) suele ser más corta que cualquiera de los dos. Consulta Operadores lógicos para combinar condiciones con el estilo if.

Conclusión

La sentencia switch en JavaScript es una herramienta versátil para manejar múltiples condiciones. Comprender su uso correcto y sus matices puede mejorar considerablemente la legibilidad y la eficiencia de tu código.

Práctica