Načrtovanje in razvoj spletnih aplikacij

Zanke v JavaScriptu

V programih JavaScript zanke uporabljamo takrat, ko želimo določen stavek ali skupino stavkov izvesti večkrat. Program pri vsaki ponovitvi preverja, ali je pogoj za nadaljnje izvajanje še izpolnjen. Ko pogoj ni več izpolnjen, se izvajanje nadaljuje za zanko.

Pomni: V sodobnem JavaScriptu za prehod po elementih tabele pogosto uporabimo for...of, medtem ko je for...in namenjen predvsem naštevanju lastnosti objekta.

Osnovna pravila

  • Zanka while preveri pogoj pred začetkom vsake ponovitve.
  • Zanka do...while preveri pogoj na koncu, zato se telo zanke izvede vsaj enkrat.
  • Zanka for je pregledna izbira, kadar uporabljamo števec, pogoj in korak.
  • Zanka for...of prehaja po vrednostih elementov iterabilne zbirke.
  • Zanka for...in našteva ključe oziroma lastnosti objekta.
  • S stavkoma break in continue lahko vplivamo na potek izvajanja zanke.

Primerjave

while

Zanka while je najosnovnejša oblika zanke. Pogoj preveri pred vsako ponovitvijo. Če pogoj že na začetku ni izpolnjen, se telo zanke ne izvede niti enkrat.

while (pogoj) {
   stavki;
}
<p id="primer1"></p>
<script>
{
   let stevec = 1;
   let izpis = "";

   while (stevec <= 5) {
      izpis += "Število: " + stevec + "<br>";
      stevec++;
   }

   document.getElementById("primer1").innerHTML = izpis;
}
</script>

do...while

Zanka do...while je podobna zanki while, vendar pogoj preveri šele na koncu. Zato se telo zanke vedno izvede vsaj enkrat.

do {
   stavki;
} while (pogoj);
<p id="primer2"></p>
<script>
{
   let stevec = 6;
   let izpis = "";

   do {
      izpis += "Število: " + stevec + "<br>";
      stevec++;
   } while (stevec <= 5);

   document.getElementById("primer2").innerHTML = izpis;
}
</script>

for

Zanka for je posebej primerna takrat, ko imamo že na začetku določen začetni izraz, pogoj in korak. Pogosto jo uporabljamo pri štetju.

for (začetek; pogoj; korak) {
   stavki;
}
<p id="primer3"></p>
<script>
{
   let izpis = "";

   for (let i = 0; i < 5; i++) {
      izpis += "Vrednost i: " + i + "<br>";
   }

   document.getElementById("primer3").innerHTML = izpis;
}
</script>

for...of

Zanka for...of je namenjena prehodu po vrednostih elementov iterabilne zbirke, na primer tabele ali niza. V sodobni kodi je to pogosto najprimernejša izbira za preprost prehod po elementih.

<p id="primer4"></p>
<script>
{
   const barve = ["rdeča", "zelena", "modra"];
   let izpis = "";

   for (const barva of barve) {
      izpis += barva + "<br>";
   }

   document.getElementById("primer4").innerHTML = izpis;
}
</script>

for...in

Zanka for...in našteva lastnosti objekta. Uporabljamo jo predvsem pri objektih, kadar želimo pregledati njihove ključe.

<p id="primer5"></p>
<script>
{
   const oseba = {
      ime: "Ana",
      priimek: "Novak",
      starost: 19
   };
   let izpis = "";

   for (const lastnost in oseba) {
      izpis += lastnost + ": " + oseba[lastnost] + "<br>";
   }

   document.getElementById("primer5").innerHTML = izpis;
}
</script>

Pozor: Zanke for...in praviloma ne uporabljamo za običajen prehod po tabeli. Pri tabelah je navadno primernejša zanka for...of.

break

Stavek break takoj prekine izvajanje trenutne zanke. Program se nato nadaljuje za zanko.

<p id="primer6"></p>
<script>
{
   let izpis = "";

   for (let i = 1; i <= 10; i++) {
      if (i === 6) {
         break;
      }
      izpis += i + "<br>";
   }

   document.getElementById("primer6").innerHTML = izpis;
}
</script>

continue

Stavek continue prekine samo trenutno ponovitev zanke in sproži naslednjo ponovitev, če je pogoj za nadaljevanje še izpolnjen.

<p id="primer7"></p>
<script>
{
   let izpis = "";

   for (let i = 1; i <= 7; i++) {
      if (i === 4) {
         continue;
      }
      izpis += i + "<br>";
   }

   document.getElementById("primer7").innerHTML = izpis;
}
</script>

Označevanje stavkov

Pri gnezdenih zankah lahko uporabimo označeni stavek, kadar želimo z break ali continue vplivati na zunanjo zanko.

<p id="primer8"></p>
<script>
{
   let izpis = "";

   zunanjaZanka:
   for (let i = 1; i <= 3; i++) {
      for (let j = 1; j <= 3; j++) {
         if (i === 3 && j === 2) {
            break zunanjaZanka;
         }
         izpis += "i = " + i + ", j = " + j + "<br>";
      }
   }

   document.getElementById("primer8").innerHTML = izpis;
}
</script>

Priporočila

  • Pri zankah s števcem praviloma uporabljaj for.
  • Kadar ni vnaprej jasno, kolikokrat se bo zanka izvedla, je pogosto primerna zanka while.
  • Za prehod po elementih tabel in nizov pogosto uporabi for...of.
  • Za pregled lastnosti objekta uporabi for...in.
  • Pri števcih in lokalnih spremenljivkah v zankah uporabljaj let, pri nespremenljivih vrednostih pa const.
  • Stavka break in continue uporabljaj premišljeno, da koda ostane pregledna.

Pomni: Kadar zanka samo prehaja po vseh elementih tabele, je sodobna in pregledna izbira pogosto for...of.

Pogoste napake

  • Pogoj v zanki se ne spreminja, zato nastane neskončna zanka.
  • Pri zapisu zanke do...while manjka podpičje za zaključkom pogoja.
  • Zanka for...in se uporablja za tabelo, čeprav je za ta namen pogosto primernejša zanka for...of.
  • Stavek break je postavljen prezgodaj, zato zanka ne obdela vseh podatkov.
  • Stavek continue povzroči preskok pomembnega dela kode v trenutni ponovitvi.
  • Pri gnezdenih zankah ni jasno, katera zanka se prekine, zato je po potrebi smiselna uporaba označenega stavka.