Capítol 5

Bucles: while i for

Un bucle és un bloc de codi que es repeteix automàticament. JavaScript en té dos: while, per quan no saps quants cops cal repetir, i for, una forma compacta per a comptadors.

Què és una iteració?

Imagina que has d'imprimir els números de l'1 al 5. Ho podries fer amb cinc console.log() separats, però i si fossin cent números? Una iteració (en anglès, loop) és un bloc de codi que es repeteix mentre es compleixi una condició:

Llegeix-ho en veu alta: «mentre i sigui menor o igual a 5, imprimeix i i augmenta'l en 1». Quan i arriba a 6, la condició és falsa i el bucle s'atura.

Fixa't que i es declara amb let (no const), perquè el seu valor canvia a cada iteració. La sintaxi del while és igual que la del if: parèntesis al voltant de la condició i claus al voltant del bloc.

Operadors curts: ++ i +=

Com que augmentar el comptador (i = i + 1) és tan freqüent, JavaScript ofereix una forma més curta:

  • i++ és el mateix que i = i + 1 (incrementa en 1)
  • i-- és el mateix que i = i - 1 (decrementa en 1)
  • i += 2 és el mateix que i = i + 2 (incrementa en qualsevol valor)
  • i -= 3 és el mateix que i = i - 3

Aquí tens el mateix exemple d'abans, però usant i++:

Funciona exactament igual, però queda més curt. A partir d'ara veuràs i++ a tot arreu.

Comptador i acumulador

El patró «inicialitzar comptador, comprovar-lo, avançar-lo» és el més habitual per repetir un bloc un nombre concret de vegades. Pots avançar el comptador en passos diferents d'1:

Una variació molt útil és l'acumulador: una variable que s'actualitza a cada iteració per anar acumulant un resultat (una suma, un producte…):

Executa el codi i comprova el resultat. Després prova de canviar el límit per calcular la suma fins al 100.

El bucle for

Quan tens un patró clar de comptador (inicialitzar / comprovar / avançar), JavaScript ofereix una forma més compacta: el bucle for. Mira com el mateix bucle es pot escriure de dues maneres equivalents:

// Amb while
let i = 1;
while (i <= 5) {
  console.log(i);
  i++;
}

// Amb for (equivalent)
for (let i = 1; i <= 5; i++) {
  console.log(i);
}

El for agrupa les tres parts (inicialització, condició, actualització) en una sola línia, separades per punt i coma:

Llegeix la línia del for en tres parts:

  1. let i = 1al començament, fes i = 1.
  2. i <= 5repeteix mentre i sigui menor o igual a 5.
  3. i++al final de cada iteració, incrementa i.

El for és l'opció preferida quan saps clarament quantes vegades vols repetir el bucle (per exemple, "fes això 100 vegades"). Pots començar des d'on vulguis i avançar com vulguis:

while controlat per l'usuari

Quan el nombre de repeticions depèn de l'usuari, el while és l'única opció: el for no encaixa perquè no saps quantes iteracions calen.

Per exemple, llegir números fins que l'usuari escrigui 0:

Aquest patró s'anomena sentinella: el valor 0 actua com a senyal de parada. El bucle continua mentre el número no sigui el sentinella.

break i continue

Dins de qualsevol bucle, dues instruccions especials canvien el flux:

  • break — surt del bucle immediatament.
  • continue — salta a la pròxima iteració, sense executar la resta del bloc.

Una manera comuna d'usar break és amb un bucle while (true). Per si sol, aquest bucle no s'atura mai (perquè true sempre és cert), però el break permet sortir-ne quan toqui:

El continue en canvi torna al principi del bucle. Aquí l'usem per imprimir només els nombres parells:

Bucles infinits

Si la condició del while mai es torna falsa, el bucle no s'atura mai per si sol. Això s'anomena un bucle infinit i normalment és un error. La causa més habitual és oblidar avançar el comptador:

Pots executar aquest exemple sense por! El simulador detecta els bucles infinits i els atura automàticament al cap de 5 segons, mostrant un missatge de «Temps excedit». Sense aquesta protecció, el bucle imprimiria 0 infinites vegades.

Per arreglar-ho, només cal afegir i++ dins del bucle:

Errors típics

1. Condició que mai s'arriba a complir pel valor inicial — el bucle no s'executa cap cop:

No és un error de codi, sinó de lògica. i ja comença essent 10, així que la condició i < 5 és falsa des del principi i el bucle ni s'executa. De vegades és el comportament desitjat (no fer res si el comptador ja ha superat el límit), però altres vegades indica una equivocació.

2. Bucle que avança en la direcció equivocada:

Aquest és un bucle infinit perquè i creix enlloc de decréixer, així que mai arribarà a 0. El simulador l'aturarà al cap de 5 segons.

3. Oblidar les claus o els parèntesis — com en l'if, sempre s'escriuen.

Exercici

L'ordinador té un número secret fixat a 7. L'usuari ha d'intentar endevinar-lo: el programa llegeix un número i diu Més gran! si el secret és major que l'intent, Més petit! si és menor, o Encertat! quan s'encerta. Quan s'encerta, el programa acaba.

El programa ha de seguir demanant números fins que l'usuari encerti el 7. Les paraules de la sortida han de ser exactament com s'indica (amb accent i majúscula inicial).

Resum

  • while (condició) { ... } repeteix el bloc mentre la condició sigui certa.
  • for (init; condició; actualització) { ... } és la forma compacta del patró comptador.
  • Usa let (no const) per als comptadors, perquè canvien de valor.
  • i++ incrementa en 1, i-- decrementa, i += n incrementa en n.
  • Un acumulador és una variable que s'actualitza a cada iteració (suma, producte…).
  • break surt del bucle. continue salta a la pròxima iteració.
  • Si la condició mai es torna falsa, el bucle és infinit. El simulador l'atura als 5 segons, però en un programa real bloquejaria tot.
  • Si la condició ja és falsa des del principi, el bloc no s'executa ni un cop.