Decisions: if, else if, else

Comparacions

Abans de decidir, un programa ha de comparar valors. Les comparacions retornen sempre true (cert) o false (fals):

Aquests són tots els operadors de comparació que faràs servir:

• === — igual a (atenció: tres signes d'igual, no un ni dos)
• !== — diferent de
• < — menor que
• > — major que
• <= — menor o igual
• >= — major o igual

Fixa't bé: = assigna un valor a una variable, i === compara dos valors. Confondre'ls és un dels errors més freqüents.

El if simple

Amb if pots fer que un bloc de codi s'executi només si una condició és certa:

Tres coses imprescindibles: la condició va sempre entre parèntesis (...), el bloc de codi a executar va entre claus {...}, i el contingut de les claus va indentat (2 espais) per llegibilitat.

Prova de canviar const nota = 8 per const nota = 3 i torna a executar — el programa no imprimeix res, perquè la condició no s'ha complert.

if / else

Si vols fer una cosa quan la condició és certa i una altra quan és falsa, afegeix else:

El else no porta cap condició — s'executa quan el if no s'ha complert. Canvia la nota i comprova que el programa sempre imprimeix exactament una de les dues línies.

if / else if / else

Quan hi ha més de dues possibilitats, afegeixes tants else if (literalment: «si no, si…») com calgui. JavaScript comprova les condicions de dalt a baix i executa el primer bloc que es compleix:

L'ordre importa molt. Si posessis primer nota >= 5, un 9 imprimiria «Aprovat» perquè la primera condició ja seria certa. JavaScript s'atura en el primer if/else if que es compleix i no mira els de sota.

Prova valors com 4, 5, 7, 9 i 10:

Condicions compostes: &&, ||, !

Pots combinar dues comparacions en una sola condició:

L'operador && (que es llegeix «i») exigeix que les dues condicions siguin certes. L'operador || («o») n'exigeix almenys una:

L'operador ! («no») inverteix una condició: !true és false, i viceversa. S'usa per fer el codi més llegible quan la condició negativa és la natural:

Una nota sobre el teclat: & es troba sovint sobre el 6, i | (barra vertical) sobre l'1 o al costat de la Z, depèn del teclat. Fixa't que cal posar dos per a la condició (&&, ||); amb un sol símbol té un altre significat (bit a bit) que no fem servir aquí.

Errors típics

Tres errors molt freqüents amb decisions:

1. Oblidar els parèntesis al voltant de la condició

2. Usar = enlloc de === per comparar

El segon és especialment subtil: el codi no peta, però fa una cosa diferent de la que esperaves. nota = 5 assigna el valor 5 a la variable, i com que 5 és un valor «cert» (no és 0), la condició sempre seria certa. Aquí ha donat error perquè la variable és const i no es pot reassignar, però en un altre cas el bug passaria desapercebut. Sempre === per comparar.

3. Oblidar les claus { ... }

Tècnicament, JavaScript permet escriure un if sense claus si només hi ha una instrucció. Però és una font enorme de bugs. Mira aquest exemple sospitós:

Sembla que les dues línies depenen del if, però en realitat només la primera hi depèn. La segona s'executa sempre, encara que la nota sigui un 3! Per evitar aquest error, posa sempre claus, encara que el bloc tingui una sola línia.

Una última cosa: pot ser que vegis codi amb == i != (dos signes enlloc de tres). Existeixen, però fan una cosa estranya: comparen amb conversió automàtica de tipus. Per exemple, 0 == "0" dona true (perquè JavaScript converteix l'string a nombre per comparar). Això genera bugs subtils. Fes servir sempre === i !==.

Resum

• if (condició) { ... } executa un bloc si la condició és certa.
• else { ... } s'executa quan cap if/else if anterior s'ha complert.
• else if (condició) { ... } permet encadenar més de dues branques; JavaScript s'atura en la primera certa.
• Les comparacions (===, !==, <, >, <=, >=) retornen true o false.
• && / || / ! combinen o inverteixen condicions.
• Sempre parèntesis al voltant de la condició i claus al voltant del bloc.
• Sempre === per comparar, mai = ni ==.