Du har en array med ti elementer og trenger å gjøre noe med hvert av dem. Å skrive samme operasjon ti ganger for hånd bryter med alt som heter effektiv programmering. En for-løkke i JavaScript lar deg gjenta en kodeblokk så mange ganger du vil, med bare to linjer kode.
Fra while til for-løkke
Hvis du allerede kjenner while-løkker, er for-løkken en mer kompakt versjon av det samme prinsippet. En while-løkke krever tre separate deler: en tellervariabel, en logisk test, og en oppdatering av telleren. I en for-løkke samler du alt dette i én linje:
for (let i = 0; i < 10; i++) { }
Inne i parentesene har du tre deler adskilt av semikolon. Først erklærer du tellervariabelen (let i = 0). Deretter angir du betingelsen som må være sann for at løkken skal fortsette (i < 10). Til slutt bestemmer du hvordan telleren endres etter hver runde (i++).
Slik fungerer en for-løkke i JavaScript steg for steg
Når JavaScript møter en for-løkke, skjer følgende: Først opprettes variabelen i med verdien 0. Deretter sjekkes betingelsen. Er i < 10 sann? Ja, 0 er mindre enn 10, så kodeblokken kjøres. Etter at kodeblokken er ferdig, legges 1 til i. Betingelsen sjekkes igjen. Er 1 mindre enn 10? Ja, og kodeblokken kjøres på nytt. Slik fortsetter det helt til i når 10. Da er betingelsen falsk, og løkken stopper.
Tellervariabelen i er ikke bare en teller. Du kan bruke den inne i kodeblokken. Legger du i inn i en utskriftskommando, får du tallene 0 til 9 skrevet ut på skjermen. Denne variabelen er nøkkelen til å koble for-løkker sammen med arrays.
For-løkke og arrays: den vanligste kombinasjonen
Den viktigste bruken av en for-løkke i JavaScript er å gå gjennom en array element for element. Tenk deg at du har en array med frukter og vil skrive ut hver enkelt:
let frukt = ["eple", "paere", "banan", "drue"];
for (let i = 0; i < frukt.length; i++) {
print(frukt[i]);
}
Variabelen i starter på 0, som er indeksen til det første elementet. For hver runde øker i med 1, og frukt[i] henter neste element. Løkken stopper når i når frukt.length, altså når alle elementer er behandlet.
Legg merke til at vi bruker frukt.length i betingelsen i stedet for et fast tall. Det gjør løkken fleksibel. Legger du til eller fjerner elementer fra arrayen, tilpasser løkken seg automatisk uten at du trenger å endre noe.
Hvorfor nullbasert indeks passer perfekt
Mange nybegynnere lurer på hvorfor arrays starter på 0 i stedet for 1. Svaret viser seg tydelig i for-løkker. Når i starter på 0 og løkken kjører så lenge i < frukt.length, treffer tallene perfekt uten at du trenger å justere noe. Med en array på 4 elementer kjører løkken med i lik 0, 1, 2 og 3, som matcher indeksene nøyaktig.
Hadde arrays startet på 1, måtte du enten starte i på 1 og bruke i <= frukt.length, eller starte på 0 og legge til 1 overalt. Nullbasert indeks gjør koden renere.
Endre steglengden i løkken
Du trenger ikke øke telleren med 1 for hver runde. Ved å endre den siste delen i parentesene kan du hoppe flere steg om gangen:
for (let i = 0; i < 10; i += 3) { }
Her øker i med 3 for hver runde: 0, 3, 6, 9. Når i når 12, er betingelsen falsk og løkken stopper. Du kan ikke bruke snarveien i++ for andre verdier enn 1, men i += 3 fungerer for ethvert tall. Du kan også telle nedover med i-- eller i -= 2, så lenge betingelsen er tilpasset.
Lag en gjenbrukbar funksjon med for-løkke
En for-løkke blir ekstra nyttig når du pakker den inn i en funksjon. Her er et eksempel som automatisk skriver ut innholdet i en hvilken som helst array:
function printArray(array) {
for (let i = 0; i < array.length; i++) {
print(array[i]);
}
}
Nå kan du sende inn en array med frukter, en array med tall, eller en array med filmnavn. Funksjonen håndterer alle. Dette er et godt eksempel på hvordan for-løkker og arrays samarbeider for å gjøre koden din fleksibel og gjenbrukbar.
Unngå evighetsløkker
En for-løkke reduserer risikoen for evighetsløkker sammenlignet med while, fordi alle tre delene (initialisering, betingelse, oppdatering) er samlet på én linje. Men det er fortsatt mulig å skrive en betingelse som aldri blir falsk. Hvis du for eksempel glemmer i++-delen, vil i alltid være 0, betingelsen vil alltid være sann, og nettleseren henger seg. Pass derfor alltid på at den siste delen i parentesene faktisk beveger telleren mot et punkt der betingelsen blir falsk.
Neste steg
For-løkker er den mest brukte løkketypen i JavaScript, og sammen med arrays dekker de fleste behov du møter som nybegynner. Vil du forstå løkker på et dypere nivå, kan du lese om while-løkker og når de er et bedre valg. For en komplett oversikt over løkker og iterasjon i JavaScript, se MDN sin guide til loops and iteration.
Denne videoen er hentet fra kurset JavaScript for nybegynnere på Utdannet.no. Instruktør Lars Vidar Nordli bygger opp fra enkle løkker til praktiske prosjekter der du bruker for-løkker til å manipulere HTML-elementer og håndtere brukerinteraksjon med JavaScript.
