Del 5: Løkker

Når man lager programmer må man ofte skrive kode som skal kjøres gjentatte ganger. For eksempel tenk deg at du skal skrive en kode som skriver ut tallene fra 1 til 10. Det kan du gjøre ved å skrive console.log() 10 ganger:

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

//også videre

Dette fungerer, men det finnes bedre måter å skrive kode som skal repeteres. Med en løkke kan man kjøre en kode flere ganger helt til en betingelse er møtt.

Det finnes to typer løkker i JavaScript, en for-løkke og en while-løkke.

For-løkke

Istedenfor å skrive ut tallene fra 1 til 10 manuelt, kan vi bruke en for-løkke med en enkelt linje kode i løkken:

Loading editor...

for (let i = 1; i <= 10; i++){
  console.log(i);
}

Parentesene etter for inneholder tre uttrykk separert med semikolon (;):

En initialisering hvor vi deklarerer variabelen som skal brukes i løkken. Eksempel: let i = 1.
En betingelse som bestemmer hvor lenge løkken skal kjøre. Eksempel: Så lenge i <= 10.
Et matematisk uttrykk som endrer variabelen for hver iterasjon, f.eks. i++ øker i med 1. i-- reduserer tilsvarende i med 1

Selve koden som skal kjøres gjentakende legges i krøllparenteser {}.

Eksempelkode som teller nedover fra 10 til 1:

Loading editor...

for (let x = 10; x >= 1; x--){
  console.log(x);
}

Du kan også bruke operatorer som += eller -= slik som vist nedenfor:

Loading editor...

for (let x = 1; x < 20; x += 3){
  console.log(x);
}

Her øker x med 3 for hver iterasjon av løkken.

Når løkken er over vil JavaScript gå videre til koden du har under løkken:

Loading editor...

for (let x = 1; x < 2; x++){
  console.log(x);
}
console.log("For-løkken er ferdigkjørt");
console.log("Fortsett med resten av koden");

Når skal du bruke for-løkke?

En for-løkke er smart når du vet hvor mange ganger du skal repetere en kode.

For eksempel, si at du lager et program som simulerer flipping av en mynt. Du vil finne ut hvor mange ganger mynten lander på kron etter 10 kast. Da kan du bruke Math.random()-metoden, som returnerer et tilfeldig desimaltall mellom 0 og 1.

Når tallet er under 0.5 fikk du mynt så da øker du mynt-telleren.
Når tallet er over 0.5 fikk du kron så da øker du kron-telleren.

Loading editor...

let mynt = 0;
let kron = 0;
let antallKast = 10

for (i = 1; i <= antallKast; i++){
  let kastResultat = Math.random()
  if (kastResultat < 0.5){ 
      mynt++;
  }
  else{
      kron++;
    }
}
console.log("Kastet mynten", antallKast, "ganger")
console.log("Kastet kron:", kron)

Gå gjennom arrays med for-løkker

En av de vanligste bruksområdene for en for-løkke er å gå gjennom alle elementene i et array.

Loading editor...

let frukter = ["Eple", "Banan", "Appelsin", "Pære"];

for (let i = 0; i < frukter.length; i++) {
  console.log("Frukt:", frukter[i]);
}

Her bruker vi frukter.length for å finne antall elementer i arrayet, og frukter[i] for å få tilgang til hvert enkelt element.

Man kan også bruke for of og forEach, for of vises nedenfor, forEach forklares i neste seksjon.

Loading editor...

let frukter = ["Eple", "Banan", "Appelsin", "Pære"];

for (let frukt of frukter) {
  console.log("Frukt:", frukt);
}

Vi kan også bruke løkker med betingelser for å filtrere elementer. For eksempel skriver vi ut kun fruktene som starter med 'B' ved å bruke string-metoden startsWith():

Loading editor...

let frukter = ["Eple", "Banan", "Appelsin", "Pære"];

for (let i = 0; i < frukter.length; i++) {
  if (frukter[i].startsWith("B")) {
    console.log("Frukt som starter med B:", frukter[i]);
  }
}

While-løkke

En while-løkke gjentar koden så lenge en betingelse er sann (true). Den har følgende form:

Eksempel: telle fra 0 til 4

Loading editor...

let i = 0;

while (i < 5) {
  console.log("Verdien av i: ", i);
  i++;
}

Løkken fortsetter å kjøre så lenge betingelsen i < 5 er true. For hver iterasjon øker vi i med 1. Når i blir 5, blir betingelsen false og løkken stopper.

Pass på: hvis betingelsen aldri blir false, får du en uendelig løkke. Eksempel:

let i = 0;

while (i < 5) {
  console.log("Verdien av i: ", i);
}

Siden i aldri endres, vil løkken aldri stoppe. Husk derfor alltid å endre variabelen som kontrollerer betingelsen.

Når skal du bruke while-løkke?

Regelen er enkel: bruk en while-løkke når du ikke vet hvor mange ganger koden skal kjøre på forhånd.

Vi hadde tidligere et eksempel som telte hvor mange ganger vi får kron eller mynt når vi flipper en mynt 10 ganger. Men hva om spørsmålet hadde vært:

"Finn ut hvor mange ganger du må flippe en mynt før du får kron"

Da vet vi ikke på forhånd hvor mange ganger koden skal kjøres. Her passer en while-løkke perfekt!

Loading editor...

let myntkast = 0;
let erKron = false

while (!erKron) { //kjører så lenge !erKron er true 
  myntkast++; // øker antall myntkast
  erKron = Math.random() < 0.5 // gir True dersom < 0.5
}

console.log("Det tok ", myntkast, "myntkast for å lande på kron.")

Her vil betingelsen erKron = Math.random() < 0.5 simulere et myntkast og returnere true eller false avhengig av om det tilfeldige tallet er over eller under 0.5. true vil bryte løkka, siden betingelsen da blir false

Oppgaver: Løkker

Oppgave 1: Skriv ut tall 1–10

Lag tre løsninger som skriver ut tallene fra 1 til 10 i konsollen: 1. Uten løkker 2. Med en for-løkke 3. Med en while-løkke

Oppgave 2: Tall opp til brukerens tall

Lag en kode som skriver ut alle tall fra 1 til et tall brukeren skriver inn via prompt(). Husk å sjekke at brukeren skriver inn et gyldig tall.

Oppgave 3: Stjernepyramide

Skriv et program som skriver ut en pyramide av stjerner. Brukeren skal skrive inn antall rader. For eksempel: hvis brukeren skriver 4, blir resultatet:

*
**
***
****

Oppgave 4: Hangman (vanskelig utfording)

Lag et Hangman-spill: - Velg et ord som skal gjettes, f.eks. 'Elvebakken' - Brukeren gjetter en bokstav av gangen - Brukeren har 10 liv - Bruk for...of for å sjekke om bokstaven finnes i ordet - Bruk en while-løkke for å telle antall liv.

← Forrige del Neste del →