El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Al final de la lliçó anterior va aparèixer una incomoditat concreta: dins del bucle que recorria el backlog calia repetir una vegada i una altra la mateixa cadena d'else if per convertir prioritat en un pes numèric. Aquest patró —una sola variable comparada contra una llista de valors fixos— és tan freqüent que JavaScript té una construcció dedicada: el switch. En aquesta lliçó n'aprendràs la sintaxi, entendràs per què compara amb === i quines conseqüències té, distingiràs el fall-through deliberat de l'accidental, veuràs per què de vegades un case necessita claus i coneixeràs les dues alternatives amb què competeix: la cadena else if de sempre i l'objecte de consulta, que serà la teva eina preferida a partir del Mòdul 4.

Contingut

Quan un switch millora una cadena d'else if
Sintaxi del switch
Com compara: la igualtat estricta
default: el cas per defecte
break i el fall-through accidental
Fall-through deliberat: agrupar casos
Àmbit de les variables dins d'un case
El patró switch (true) i per què evitar-lo
switch vs if/else if vs objecte de consulta
Cas pràctic: etiqueta visible de l'estat
Cas pràctic: prioritat a color i a pes
Errors Habituals i Consells
Exercicis
Conclusió

Quan un `switch` millora una cadena d'`else if`

Recupera el fragment que es repetia a la lliçó 02-02:

let pes;
if (prioritats[i] === 'alta') {
  pes = 3;
} else if (prioritats[i] === 'mitjana') {
  pes = 2;
} else if (prioritats[i] === 'baixa') {
  pes = 1;
} else {
  pes = 0;
}

Hi ha alguna cosa mecànica en aquest codi: la part esquerra de la comparació és sempre la mateixa i l'operador també. L'única cosa que canvia és el valor de la dreta. Aquesta repetició és el que el switch elimina: s'escriu l'expressió una vegada i tot seguit només la llista de valors.

Un switch és l'eina adequada quan es compleixen aquestes tres condicions:

Es compara una sola expressió.
Es compara per igualtat exacta contra valors concrets, no per rangs ni per condicions compostes.
Hi ha tres o més casos. Amb dos, un if/else és més curt i més clar.

Si en falla alguna, la resposta correcta continua sent un if/else if.

Sintaxi del `switch`

const prioritat = 'mitjana';
let pes;

switch (prioritat) {
  case 'alta':
    pes = 3;
    break;
  case 'mitjana':
    pes = 2;
    break;
  case 'baixa':
    pes = 1;
    break;
  default:
    pes = 0;
    console.error(`Prioritat desconeguda: "${prioritat}"`);
}

console.log(`Pes: ${pes}`);   // Pes: 2

Les peces:

Element	Funció
`switch (expressió)`	Avalua l'expressió una sola vegada i en desa el valor
`case valor:`	Etiqueta un punt d'entrada; si coincideix, l'execució salta aquí
`break`	Surt del `switch` i continua després de la clau de tancament
`default:`	Punt d'entrada quan cap `case` no ha coincidit

I el detall que ho explica tot: case no és una condició, és una etiqueta de salt. El switch no avalua cas per cas com un if/else if; busca el punt per on entrar i, a partir d'aquí, executa cap avall fins a trobar un break o arribar al final del bloc. Entendre això fa que tota la resta de la lliçó resulti evident.

flowchart TD
    A["switch (prioritat)"] --> B{"=== 'alta'?"}
    B -->|sí| C["pes = 3"] --> Z["break → sortir"]
    B -->|no| D{"=== 'mitjana'?"}
    D -->|sí| E["pes = 2"] --> Z
    D -->|no| F{"=== 'baixa'?"}
    F -->|sí| G["pes = 1"] --> Z
    F -->|no| H["default: pes = 0"] --> Z
    Z --> I["Continua el programa"]

Nota sobre l'estil: el bloc sencer va entre claus i els case no porten claus pròpies per defecte. La indentació habitual col·loca els case un nivell dins del switch i el seu cos un nivell més endins.

Com compara: la igualtat estricta

El switch compara el valor de l'expressió amb cada case fent servir ===, la igualtat estricta que vas establir com a norma a Conversió de Tipus i Comparacions. No hi ha conversió de tipus de cap mena.

La conseqüència pràctica és important quan les dades arriben d'un formulari, on tot és text:

const horesDelFormulari = '12';   // ← string, ve d'un <input>

switch (horesDelFormulari) {
  case 12:
    console.log('Dotze hores');
    break;
  default:
    console.log('No coincideix amb cap cas');   // ← s'executa aquesta
}

'12' === 12 és false, així que entra per default. La solució és la mateixa que ja coneixes: convertir explícitament abans de comparar.

switch (Number(horesDelFormulari)) {
  case 12:
    console.log('Dotze hores');   // ✓ ara sí
    break;
}

Que faci servir === és una bona notícia: elimina les sorpreses de la conversió implícita. Però n'hereta també l'única raresa:

const valor = NaN;

switch (valor) {
  case NaN:
    console.log('Mai no arriba aquí');
    break;
  default:
    console.log('NaN no és igual ni a si mateix');   // ← s'executa aquesta
}

NaN === NaN és false, així que case NaN és inabastable. Per detectar un NaN encara cal Number.isNaN() dins d'un if.

I per la mateixa raó, un switch sobre objectes o arrays compara referències, no continguts, cosa que gairebé mai no és el que vols. A la pràctica, el switch és una eina per a valors primitius: cadenes i nombres.

`default`: el cas per defecte

default s'executa quan cap case no coincideix. És l'equivalent de l'else final d'una cadena, i aplica la mateixa norma de la lliçó 02-01: inclou-lo sempre, encara que només sigui per registrar que ha arribat un valor inesperat.

default:
  pes = 0;
  console.error(`Prioritat desconeguda: "${prioritat}"`);

Dues particularitats:

No ha d'anar per força al final. És legal posar-lo al mig, i llavors sí que necessita break per no continuar cap als case següents. És legal, però desconcertant per a qui llegeix: posa'l sempre al final.

L'últim bloc pot ometre el break. Si default és l'últim, no hi ha res a sota on caure. Tot i així, molts equips exigeixen escriure'l igualment: el dia que algú hi afegeixi un case al darrere, el break ja hi serà. És un costum barat que evita un error car.

`break` i el fall-through accidental

Com que el switch executa cap avall des del punt d'entrada, oblidar un break fa que l'execució es vessi al cas següent. A això se'n diu fall-through.

// ✗ Falta el break a 'alta'
const prioritat = 'alta';
let pes;

switch (prioritat) {
  case 'alta':
    pes = 3;
  case 'mitjana':
    pes = 2;
    break;
  case 'baixa':
    pes = 1;
    break;
}

console.log(pes);   // 2 ← no pas 3!

La traça: entra per case 'alta', assigna pes = 3, no troba cap break, continua cap avall, entra al cos de 'mitjana' sense comprovar res, assigna pes = 2 i allà sí que surt. El resultat és silenciosament incorrecte.

Aquest error és especialment traïdor perquè no produeix cap avís: JavaScript considera el fall-through una característica, no una fallada. L'eina que sí que t'avisa és un linter com ESLint, amb la seva regla no-fallthrough, que veuràs a Qualitat de Codi.

Mentrestant, la protecció és un costum: escriu el break immediatament després d'obrir el case, abans d'omplir-ne el cos.

Fall-through deliberat: agrupar casos

El mateix mecanisme, fet servir a propòsit, és la millor característica del switch: diversos case seguits, sense cos entre ells, comparteixen el mateix bloc.

A Nómada Tasques hi ha una pregunta que apareix constantment: aquesta tasca continua oberta?

const estat = 'en-curs';
let continuaOberta;

switch (estat) {
  case 'pendent':
  case 'en-curs':
    continuaOberta = true;
    break;
  case 'feta':
    continuaOberta = false;
    break;
  default:
    continuaOberta = false;
    console.error(`Estat no reconegut: "${estat}"`);
}

console.log(continuaOberta);   // true

case 'pendent': no té cos propi, així que l'execució cau directament al cos de case 'en-curs':. Es llegeix de manera molt natural: "si és pendent o en curs, aleshores...".

Quan el fall-through sí que porta codi al cas intermedi, la intenció deixa de ser evident i cal declarar-la amb un comentari. És la convenció universal:

switch (nivellAvis) {
  case 'crític':
    console.error('Avisar la Marta per telèfon');
    // fall through — un avís crític també envia correu
  case 'important':
    console.warn('Enviar un correu al responsable');
    break;
  case 'informatiu':
    console.log('Només apareix al tauler');
    break;
}

Amb 'crític' s'executen les dues primeres accions. Sense el comentari // fall through, qualsevol que revisi el codi ho prendria per un break oblidat i ho "arreglaria", trencant la funcionalitat. Tot fall-through amb codi intermedi ha de portar aquest comentari.

Àmbit de les variables dins d'un `case`

Aquí hi ha una subtilesa que sorprèn molta gent: tots els case d'un switch comparteixen un únic àmbit de bloc, el del switch mateix. No hi ha un àmbit per cas.

Això provoca un error real:

// ✗ SyntaxError: Identifier 'etiqueta' has already been declared
switch (estat) {
  case 'pendent':
    const etiqueta = 'Per començar';
    console.log(etiqueta);
    break;
  case 'en-curs':
    const etiqueta = 'En marxa';   // ✗ el mateix nom, el mateix àmbit
    console.log(etiqueta);
    break;
}

I un altre de més subtil, que no falla en escriure sinó en executar:

// ✗ ReferenceError: Cannot access 'pes' before initialization
switch (prioritat) {
  case 'mitjana':
    console.log(pes);          // la declaració de sota existeix, però encara no està inicialitzada
    break;
  case 'alta':
    const pes = 3;
    break;
}

És la zona morta temporal de let i const que vas veure a Variables i Tipus de Dades, aplicada al bloc complet del switch.

La solució és donar a cada cas les seves pròpies claus:

switch (estat) {
  case 'pendent': {
    const etiqueta = 'Per començar';
    console.log(etiqueta);
    break;
  }
  case 'en-curs': {
    const etiqueta = 'En marxa';   // ✓ àmbit propi, sense conflicte
    console.log(etiqueta);
    break;
  }
}

Fixa't en on va el break: dins de les claus. Les claus delimiten l'àmbit, no el cas.

Norma pràctica: si un case declara variables, posa-li claus. Si només assigna a variables ja declarades fora —que és l'ús més comú—, no en calen.

El patró `switch (true)` i per què evitar-lo

switch compara per igualtat, així que en principi no serveix per a rangs. Existeix un truc per forçar-lo: posar true com a expressió i condicions completes a cada case.

// △ Funciona, però no ho escriguis
const horesEstimades = 12;
let carrega;

switch (true) {
  case horesEstimades <= 0 || horesEstimades > 40:
    carrega = 'invàlida';
    break;
  case horesEstimades <= 4:
    carrega = 'lleugera';
    break;
  case horesEstimades <= 15:
    carrega = 'mitjana';
    break;
  default:
    carrega = 'pesada';
}

console.log(carrega);   // mitjana

El mecanisme és coherent: l'expressió val true, cada case s'avalua i produeix true o false, i s'entra pel primer el valor del qual sigui true.

I, tanmateix, hi ha tres raons sòlides per no fer-lo servir:

Menteix sobre el que fa. Un lector espera que switch (x) compari valors de x; aquí switch (true) no compara res útil i cal llegir tots els case per entendre la lògica.
És exactament un if/else if amb pitjor sintaxi. Compara la versió equivalent: mateixes condicions, mateix ordre, mateix resultat, quatre caràcters menys de soroll per cas i cap break per oblidar.
És fràgil. Un break oblidat en aquesta versió no salta a un altre cas equivalent, sinó que executa una assignació la condició de la qual era falsa.

// ✓ La versió correcta
if (horesEstimades <= 0 || horesEstimades > 40) {
  carrega = 'invàlida';
} else if (horesEstimades <= 4) {
  carrega = 'lleugera';
} else if (horesEstimades <= 15) {
  carrega = 'mitjana';
} else {
  carrega = 'pesada';
}

La regla completa: switch per a valors exactes, if/else if per a rangs i condicions compostes. No hi ha excepcions que valguin la pena.

`switch` vs `if/else if` vs objecte de consulta

Hi ha una tercera manera de resoldre aquestes conversions, i és la que dominarà la resta del curs: un objecte de consulta (lookup), una taula que associa cada valor d'entrada amb el seu resultat.

Els objectes s'estudien a fons a Introducció als Objectes; aquí n'hi ha prou amb la idea: s'escriuen entre claus com a parells clau: valor i es consulten amb claudàtors.

const PESOS = { alta: 3, mitjana: 2, baixa: 1 };

const prioritat = 'mitjana';
const pes = PESOS[prioritat] ?? 0;

console.log(pes);   // 2

Quatre línies es converteixen en dues, i el ?? que vas aprendre a Operadors Bàsics cobreix el cas per defecte: si prioritat no és a la taula, PESOS[prioritat] dona undefined i ?? el substitueix per 0.

La comparació completa:

Criteri	`if / else if`	`switch`	Objecte de consulta
Comparar una variable amb valors exactes	△ Verbós	✓ Ideal	✓ Ideal
Rangs i condicions compostes	✓ L'única opció	✗ Només amb el truc `switch(true)`	✗ No serveix
Executar accions diferents per cas	✓ Sí	✓ Sí	△ Necessita funcions (Mòdul 3)
Agrupar diversos valors en un mateix cas	△ Amb `\|\|`	✓ Fall-through deliberat	△ Repetir la clau
Afegir un cas nou	Editar codi	Editar codi	Afegir una línia de dades
Risc d'oblidar alguna cosa	Oblidar l'`else`	Oblidar el `break`	Cap
Valor per defecte	`else`	`default`	`??`
Llegibilitat amb 10+ casos	✗ Dolenta	△ Acceptable	✓ Excel·lent

La conclusió pràctica que aplicaràs a partir d'ara:

Mapar un valor a un altre valor (estat → etiqueta, prioritat → color): objecte de consulta.
Executar accions diferents segons un valor: switch.
Decidir per rangs o condicions compostes: if / else if.

Que l'objecte de consulta guanyi en tantes caselles no converteix el switch en inútil: apareix constantment en codi real —especialment en reductors de Redux, que veuràs al Mòdul 10— i has de saber llegir-lo i escriure'l amb solvència.

Cas pràctic: etiqueta visible de l'estat

Els valors interns del projecte ('pendent', 'en-curs', 'feta') estan pensats per al codi, no per a la Marta. La interfície necessita textos presentables, i aquí el switch fa més que una simple traducció: tria també la icona i el nivell d'avís de la consola.

const estats = ['en-curs', 'pendent', 'pendent', 'feta', 'en-curs', 'pendent'];
const titols = [
  'Redissenyar la sala polivalent',
  'Cartelleria del taller de serigrafia',
  'Actualitzar el web de reserves',
  'Inventari de tintes de serigrafia',
  'Guia sobre enquadernació per a residents',
  'Pressupost de la fusteria'
];

for (let i = 0; i < estats.length; i++) {
  let etiqueta;
  let icona;

  switch (estats[i]) {
    case 'pendent':
      etiqueta = 'Per començar';
      icona = '○';
      break;
    case 'en-curs':
      etiqueta = 'En marxa';
      icona = '◐';
      break;
    case 'feta':
      etiqueta = 'Completada';
      icona = '●';
      break;
    default:
      etiqueta = 'Estat desconegut';
      icona = '?';
      console.error(`Tasca ${i + 1}: estat no vàlid "${estats[i]}"`);
  }

  console.log(`${icona} ${titols[i]} — ${etiqueta}`);
}

Sortida:

◐ Redissenyar la sala polivalent — En marxa
○ Cartelleria del taller de serigrafia — Per començar
○ Actualitzar el web de reserves — Per començar
● Inventari de tintes de serigrafia — Completada
◐ Guia sobre enquadernació per a residents — En marxa
○ Pressupost de la fusteria — Per començar

Comprova que es compleixen les tres condicions de la secció 1: una sola expressió (estats[i]), igualtat exacta i tres casos. El switch està ben emprat. I nota que let etiqueta; i let icona; es declaren dins del bucle però fora del switch: dins del bucle perquè canvien a cada volta, fora del switch perquè cal fer-les servir després que acabi.

Cas pràctic: prioritat a color i a pes

La regla R10 demana destacar visualment les tasques. Cada prioritat té un color a la interfície i un pes numèric per ordenar el tauler, i un mateix switch pot assignar les dues coses alhora a cada branca: és un avantatge davant de l'objecte de consulta, que necessitaria una taula per camp.

const prioritats = ['alta', 'mitjana', 'alta', 'baixa', 'mitjana', 'alta'];
const hores = [12, 6, 14, 3, 8, 5];

let esforcTotal = 0;

for (let i = 0; i < prioritats.length; i++) {
  let color;
  let pes;

  switch (prioritats[i]) {
    case 'alta':
      color = '#c0392b';   // vermell
      pes = 3;
      break;
    case 'mitjana':
      color = '#e67e22';   // taronja
      pes = 2;
      break;
    case 'baixa':
      color = '#27ae60';   // verd
      pes = 1;
      break;
    default:
      color = '#7f8c8d';   // gris
      pes = 0;
      console.error(`Prioritat no vàlida: "${prioritats[i]}"`);
  }

  esforcTotal += pes * hores[i];
  console.log(`${prioritats[i].padEnd(8)} ${color}  pes ${pes}  esforç ${pes * hores[i]}`);
}

console.log(`Esforç ponderat del backlog: ${esforcTotal}`);

Sortida:

alta     #c0392b  pes 3  esforç 36
mitjana  #e67e22  pes 2  esforç 12
alta     #c0392b  pes 3  esforç 42
baixa    #27ae60  pes 1  esforç 3
mitjana  #e67e22  pes 2  esforç 16
alta     #c0392b  pes 3  esforç 15
Esforç ponderat del backlog: 124

padEnd(8) omple el text amb espais fins a arribar a 8 caràcters, perquè les columnes quedin alineades a la consola.

Ara, la mateixa lògica amb objectes de consulta, perquè vegis cap on va el curs:

const COLORS = { alta: '#c0392b', mitjana: '#e67e22', baixa: '#27ae60' };
const PESOS  = { alta: 3, mitjana: 2, baixa: 1 };

for (let i = 0; i < prioritats.length; i++) {
  const color = COLORS[prioritats[i]] ?? '#7f8c8d';
  const pes   = PESOS[prioritats[i]] ?? 0;
  console.log(`${prioritats[i].padEnd(8)} ${color}  pes ${pes}`);
}

Vint línies es converteixen en quatre, i afegir una prioritat 'urgent' seria afegir un parell a cada taula en lloc d'un case a cada switch. Quan les dades de configuració se separen de la lògica que les fa servir, el codi encongeix. Aquesta idea recorre la resta del curs.

Errors Habituals i Consells

Oblidar el break. L'error número u del switch. Es manifesta com un valor final incorrecte, sense missatge d'error. Escriu-lo sempre tot just obrir el case.

Refiar-se de la conversió de tipus. switch fa servir ===. Si l'expressió pot venir com a text d'un formulari, converteix-la abans: switch (Number(camp)).

Posar condicions als case. case hores > 10: compara el valor de l'expressió amb el booleà resultant, que gairebé mai no és el que vols. Per a rangs, if/else if.

Declarar const o let en diversos case sense claus. Provoca SyntaxError per redeclaració o ReferenceError per la zona morta temporal. Posa claus als casos que declarin variables.

Ometre el default. Sense ell, un valor inesperat deixa les variables en undefined i la fallada emergeix més tard, en un altre lloc. Inclou-lo sempre, encara que només registri l'error.

Fer servir switch amb dos casos. if/else és més curt i més llegible. El switch comença a compensar a partir de tres.

Fer servir switch amb objectes o arrays. Compara referències, no contingut: dos arrays amb els mateixos elements no coincideixen mai. El switch és per a primitius.

Consell: ordena els case per freqüència o alfabèticament. No afecta el rendiment —el motor optimitza el salt—, però facilita localitzar un cas concret i detectar si en falta algun.

Consell: quan un switch superi els deu casos o només mapi valors, passa'l a objecte de consulta. És l'evolució natural, i amb el que veuràs al Mòdul 4 la podràs fer sense esforç.

Exercicis

Exercici 1 — Dies de marge per prioritat

Taller Nómada defineix un marge recomanat d'avís segons la prioritat: 'alta' avisa amb 3 dies d'antelació, 'mitjana' amb 7 i 'baixa' amb 14. Escriu un switch que, a partir de prioritat, assigni diesAvis, i fes servir un default que assigni 7 dies i registri un error. Prova-ho amb 'alta', 'baixa' i 'urgentíssima'.

Exercici 2 — Agrupar estats amb fall-through

Escriu un switch sobre estat que assigni dues variables: alTauler (booleà: si la tasca s'ha de continuar mostrant al tauler actiu) i missatge. Els estats 'pendent' i 'en-curs' comparteixen el mateix tractament (alTauler = true), mentre que 'feta' surt del tauler. Aprofita el fall-through deliberat per no repetir codi i recorre amb un bucle l'array ['en-curs', 'pendent', 'feta', 'arxivada'] comprovant també el default.

Exercici 3 — Del switch a l'objecte de consulta

Aquest switch converteix el codi d'un taller en el seu nom complet. Reescriu-lo fent servir un objecte de consulta i ??, i explica en quins casos la versió amb switch continuaria sent preferible.

let nomTaller;
switch (codi) {
  case 'SER': nomTaller = 'Serigrafia'; break;
  case 'ENC': nomTaller = 'Enquadernació'; break;
  case 'FUS': nomTaller = 'Fusteria'; break;
  case 'COW': nomTaller = 'Coworking'; break;
  default:    nomTaller = 'Sense classificar';
}

Solucions

Exercici 1

const prioritat = 'alta';
let diesAvis;

switch (prioritat) {
  case 'alta':
    diesAvis = 3;
    break;
  case 'mitjana':
    diesAvis = 7;
    break;
  case 'baixa':
    diesAvis = 14;
    break;
  default:
    diesAvis = 7;
    console.error(`Prioritat no reconeguda: "${prioritat}". S'aplica el marge estàndard.`);
}

console.log(`Avisar amb ${diesAvis} dia/es d'antelació.`);
// Avisar amb 3 dia/es d'antelació.

Amb 'baixa' dona 14 dies. Amb 'urgentíssima' entra a default, registra l'error i aplica 7 dies: el programa no s'atura i pren una decisió raonable, que és just el que ha de fer un default ben escrit. Un default que deixés diesAvis sense assignar propagaria un undefined fins a un càlcul posterior, on l'error apareixeria sense cap pista del seu origen.

Exercici 2

const estatsDeProva = ['en-curs', 'pendent', 'feta', 'arxivada'];

for (let i = 0; i < estatsDeProva.length; i++) {
  const estat = estatsDeProva[i];
  let alTauler;
  let missatge;

  switch (estat) {
    case 'pendent':
    case 'en-curs':
      alTauler = true;
      missatge = 'Continua al tauler actiu';
      break;
    case 'feta':
      alTauler = false;
      missatge = 'Moguda a la llista històrica';
      break;
    default:
      alTauler = false;
      missatge = 'Estat no reconegut: queda oculta per seguretat';
      console.error(`Estat invàlid: "${estat}"`);
  }

  console.log(`${estat.padEnd(10)} → alTauler=${alTauler} · ${missatge}`);
}

Sortida:

en-curs    → alTauler=true · Continua al tauler actiu
pendent    → alTauler=true · Continua al tauler actiu
feta       → alTauler=false · Moguda a la llista històrica
arxivada   → alTauler=false · Estat no reconegut: queda oculta per seguretat

El fall-through deliberat és a case 'pendent':, que no té cos i cau al de 'en-curs'. És l'ús net de la característica: dues etiquetes, un sol bloc, zero duplicació. L'alternativa amb if seria if (estat === 'pendent' || estat === 'en-curs'), igual de vàlida però amb la variable repetida.

Fixa't també en la decisió del default: davant d'un estat desconegut ocultem la tasca en lloc de mostrar-la. És la política conservadora que ja vas aplicar a la validació de transicions de la lliçó 02-01: davant del dubte, rebutjar.

Exercici 3

const TALLERS = {
  SER: 'Serigrafia',
  ENC: 'Enquadernació',
  FUS: 'Fusteria',
  COW: 'Coworking'
};

const codi = 'ENC';
const nomTaller = TALLERS[codi] ?? 'Sense classificar';

console.log(nomTaller);   // Enquadernació

Onze línies es converteixen en tres més la taula, i afegir un taller nou és afegir una línia de dades, no una branca de codi. La taula TALLERS a més es pot reutilitzar: per pintar un desplegable al formulari o per validar que un codi existeix (TALLERS[codi] === undefined).

Quan continuaria sent preferible el switch:

Quan cada cas executa accions diferents i no només retorna un valor: obrir una finestra, registrar un avís, actualitzar tres variables alhora. Un objecte pot desar funcions per a això, però és una tècnica del Mòdul 3 endavant.
Quan alguns casos han de compartir bloc mitjançant fall-through, com a l'exercici 2.
Quan les claus no són cadenes ni nombres simples, encara que a la pràctica això és rar.

En resum: l'objecte de consulta guanya quan la resposta és una dada; el switch guanya quan la resposta és un comportament.

Conclusió

Ja coneixes la tercera estructura de selecció de JavaScript. Saps que un switch avalua la seva expressió una vegada, la compara amb cada case mitjançant === sense cap conversió, i que els case no són condicions sinó etiquetes de salt: l'execució entra per la que coincideix i baixa fins al primer break. D'aquesta mecànica se'n deriven les dues cares del fall-through —l'accidental, que assigna valors equivocats en silenci, i el deliberat, que agrupa diversos valors en un mateix bloc i cal documentar amb un comentari— i també la necessitat de posar claus als case que declaren variables, perquè tot el switch comparteix un únic àmbit.

Saps quan fer-lo servir: una sola expressió, valors exactes, tres o més casos. I quan no: per a rangs, if/else if, perquè el truc switch (true) només disfressa un if d'una altra cosa. Has vist a més la tercera via —l'objecte de consulta amb ?? per al cas per defecte—, que redueix a dues línies qualsevol conversió de valor a valor i que serà la teva opció per defecte tan bon punt dominis els objectes.

Aplicat al projecte, ja tradueixes els estats interns a etiquetes presentables per a la Marta i converteixes la prioritat en color i en pes per ordenar el tauler.

Queda pendent la incomoditat que arrossegues des de la lliçó anterior: els bucles continuen recorrent les sis tasques senceres encara que la resposta ja es conegui a la primera, i encara no saps creuar dues llistes —els tres responsables contra les sis tasques— sense escriure comptadors a mà. Totes dues coses es resolen a Control del Flux: break, continue i Bucles Imbricats, on aprendràs a interrompre un bucle en el moment exacte, a saltar-te les iteracions que no interessen i a construir la matriu completa del tauler de Taller Nómada.

Sentències Switch

Contingut

Quan un `switch` millora una cadena d'`else if`

Sintaxi del `switch`

Com compara: la igualtat estricta

`default`: el cas per defecte

`break` i el fall-through accidental

Fall-through deliberat: agrupar casos

Àmbit de les variables dins d'un `case`

El patró `switch (true)` i per què evitar-lo

`switch` vs `if/else if` vs objecte de consulta

Cas pràctic: etiqueta visible de l'estat

Cas pràctic: prioritat a color i a pes

Errors Habituals i Consells

Exercicis

Solucions

Conclusió

Curs de JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final

Sentències Switch

Contingut

Quan un switch millora una cadena d'else if

Sintaxi del switch

Com compara: la igualtat estricta

default: el cas per defecte

break i el fall-through accidental

Fall-through deliberat: agrupar casos

Àmbit de les variables dins d'un case

El patró switch (true) i per què evitar-lo

switch vs if/else if vs objecte de consulta

Cas pràctic: etiqueta visible de l'estat

Cas pràctic: prioritat a color i a pes

Errors Habituals i Consells

Exercicis

Solucions

Conclusió

Curs de JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final

Quan un `switch` millora una cadena d'`else if`

Sintaxi del `switch`

`default`: el cas per defecte

`break` i el fall-through accidental

Àmbit de les variables dins d'un `case`

El patró `switch (true)` i per què evitar-lo

`switch` vs `if/else if` vs objecte de consulta