Loopar och slingor

Som man förstår av namnet går loopar runt på något vis. I den här betydelsen har man ett antal kodrader som repeteras, eller går i en loop, ett visst antal gånger. I programmering brukar man kalla detta för iteration, vilket enbart är ett finare ord för upprepning.

Det finns flera olika typer av loopar att tillgå i JavaScript. Vi börjar med att gå igenom den vanligaste och mest användbara loop-typen; while-loopen.

while-loop

while-loopen är den enklaste loop-typen. Den är både enkel att förstå och den är så generell att man egentligen skulle kunna klara sig med enbart denna typ av loop. Så om du enbart orkar komma ihåg en enda loop-typ är detta rätt val…

I grunden ser en while-loop ut så här:

while ( liv > 0 )
{
  <Denna kod upprepas tills antal liv blir noll eller mindre >
}
<Här fortsätter programmet när liv blir noll eller mindre>

På vanlig svenska skulle man säga; gör det här medan antal liv är större än noll. Så länge testvillkoret (kallas även för sanningsvillkoret) som man skickar till while är sant, kommer koden att upprepas. Men om villkoret är falskt, avslutas loopen och fortsätter att köra koden som finns direkt efter loopen.

Om villkoret efter while är falskt redan när programmet når koden för första gången, kommer koden inuti loopen aldrig köras. Om vi fortsätter med exemplet ovan och om antalet liv redan är noll, skulle programmet fortsätta att köra koden som kommer direkt efter while-satsen.

Det finns en till variant av while-loopen. Skillnaden är att man sätter villkoret sist och påbörjar loopen med kommandot do.

do
{ 
  <Denna kod upprepas till antal liv når 0 >
} while ( liv < 1 );

Den stora skillnaden mellan do-varianterna är var man testar om villkoret är sant. Sätter man while-kommandot först, kommer villkoret att testas innan koden i loopen körs en enda gång. Vilket betyder att om villkoret är falskt redan från början, körs koden i loopen aldrig. Sätter man däremot while-kommandot sist, kommer koden i loopen att köras minst en gång.

Egentligen är for-loopar mer lämpade för om man vill räkna, men vi kan göra det med hjälp av while också. Så här skulle man kunna göra;

var a = 1;
while ( a < 5 )
{
  <Denna kod upprepas till antal a når 5 >

  a = a + 1
}

Ofta sätter man ett startvärde eller ett grundvillkor strax innan man börjar sin loop, till exempel;

var running = true;

while ( running ) {
  <Denna kod upprepas till running blir false >
}

Inuti loop-koden har man sedan någonting som gör att running blir satt till false och då avslutas loopen nästa runda.

for-loopar

for-loopar passar bäst när man redan från början vet att man ska göra något ett visst antal gånger eller räkna igenom en viss talföljd.

En for-loop ser i grunden ut så här

for( var i=0; i < 10; i++ )
{
  <Denna kod upprepas tio gånger>
}

Man kan bryta ner for-satsen i tre delar:

1. var i=0 Den så kallade initialiseringen. I det här fallet så skapar vi en variabel som vi ska använda för att räkna med och sätter den till noll. Loop-variabeln för oftast för loopindex. Vid for-loopens start sätts loopindex till startvärdet noll (det är det som kallas för initialisering), men man kunde förstås sätta den till vad som helst. Initialiseringen sker enbart vid uppstarten av loopen och den körs inte under de efterföljande varven. Man kan göra vad som helst vid initialiseringen, inte bara skapa variabler. Om man så vill kan man lämna initialiseringen helt tom.
2. i < 10 Detta är testvillkoret som avgör om man är klar med loopen eller ej. Denna koll körs varje loopvarv och det görs innan koden i loopen körs. Vi kan med andra ord köra koden noll eller flera gånger (till och med ett ”oändligt” antal gånger om vi så vill). Här kan man använda alla de booleska sanningsvillkoren om man så vill.
3. i++ Slut-satsen, denna körs varje gång man kört klart ett loopvarv. I det här fallet ökar vi variabeln med ett (++ är ett snabbare, kortare sätt att skriva i = i + 1). Efter att denna sats körts, går for-loopen tillbaka till början och genomför testvillkoret igen, programmet går alltså tillbaka till steg 2.

Observera att loopen i exemplet kommer att köras tio gånger och kommer att räkna ifrån noll upp till nio.

Om man behöver kan man nästla loopar, dvs lägga loopar inuti andra loopar. T.ex;

for( var i=0; i < 10; i++ )
{
  for( var j=0; j < 10; j++ )
  {
    <Denna kod upprepas tio * tio gånger (dvs, hundra gånger)>
  }
}

Kontrollkommandon för loopar

continue

Det finns även några kommandon som kan användas inuti loopar för att styra hur loopen beter sig. Det första av dessa är continue. Om programmet befinner sig inuti en loop och kommer till en continue-instruktion, hoppar programmet över all efterföljande kod och går direkt till loop-satsens villkorssats.

Ett litet exempel:

for( var i=0; i < 10; i++ )
{
  if( isEven( i ) ) {
    continue;
  }
  <Denna kod körs bara när i är udda>
}

Varje gång i är ett jämt tal hoppar programmet över koden efter if:en. Det var alltså ett krångligt sätt att skriva något som vi lika gärna kunnat lösa genom att byta ut vår i++ till i += 2 (vilket är ett snabbare sätt att skriva i = i + 2.

break

Ett annat sätt att styra loopflödet är att använda sig av break. När programmet når en sådan instruktion avslutas nuvarande loop direkt och programmet fortsätter att köra den kod som följer efter loopen. Ett exempel på detta:

while( true )
{
  if( pressedKey == ”q” ) {
    break;
  }
  <massvis med annan kod…>
}
<När man når break, hoppar koden direkt hit>

Hej

See the Pen yNYxxz by Patrik Grip-Jansson (@PGJ) on CodePen.