JavaScript - Petlje


Vrste petlji u JavaScript-u

Petlje se koriste za izvršavanje istog bloka koda iznova i iznova, sve dok je ispunjen određeni uslov. Osnovna ideja koja se nalazi iza petlje je automatizovati zadatke koji se ponavljaju unutar programa kako bi se uštedjelo vrijeme i trud. JavaScript sada podržava pet različitih tipova petlje:

  • while - petlja koja izvršava koda sve dok navedeni uslov bude tačan (true).
  • do / while - jednom preskače blok koda, tada se stanje procjenjuje. Ako je uslov tačan (true), izjava se ponavlja sve dok je navedeni uslov tačan (true).
  • for - prolazi kroz blok koda, dok brojač ne postigne zadani broj.
  • for / in - petlje koja prolazi kroz svojstva objekta.
  • for / of - petlje nad podnošljivim objektima poput nizova, stringova itd.

U nastavku ćemo detaljno razmotriti svaku od tih ovih petlji.



While petlja

Ovo je najjednostavnija izjava for petlju koju pruža JavaScript. While petlja prolazi kroz blok koda sve dok se navedeni uslov procijeni kao tačan (true). Čim stanje ne uspije, petlja se zaustavlja. Generička sintaksa while petlje je:

while(condition) {
    // Kod koji se treba izvršiti
}

Sljedeći primjer defiše petlju koja će se nastaviti izvoditi sve dok je varijabla manja ili jednaka 5. Svakom promjenom povećava se za 1 svaki put kad se petlja pokrene:

var i = 1;
while(i <= 5) {    
    document.write("<p>Broj je " + i + "</p>");
    i++;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript While petlja</title>
</head>
<body>
    <script>
    var i = 1;
    while(i <= 5) {    
        document.write("<p>Broj je: " + i + "</p>");
        i++;
    }
    </script>
</body>
</html>


do/while petlja

Petlja do/while je varijanta petlje while, koja procjenjuje stanje na kraju svake iteracije petlje. S petljom do/while blok koda izvršava se jednom, a zatim se uslov procjenjuje, ako je uslov istinit (true), izjava se ponavlja sve dok je navedeni uslov koji je procijenjen tačan (true). Generička sintaksa "do-while" petlje je:

do {
    // Kod koji se treba izvršiti
}
while(condition);

JavaScript kod u sljedećem primjeru defiše petlju koja počinje s i=1, zatim će ispisati izlaz i povećati vrijednost varijable i za 1. Nakon toga se uslov procjenjuje, a petlja će se nastaviti izvoditi sve dok je varijabla i manja ili jednaka 5.

var i = 1;
do {
    document.write("<p>Broj je " + i + "</p>");
    i++;
}
while(i <= 5);
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Do-While petlja</title>
</head>
<body>
    <script>
    var i = 1;
    do {
        document.write("<p>Broj je " + i + "</p>");
        i++;
    }
    while(i <= 5);
    </script>
</body>
</html>


Razlika između while i do/while petlja

While petlja se razlikuje od petlje do-while na jedan važan način - s while petljom, uslova koji se procjenjuje i testira se na početku svake iteracije petlje, tako da ako se uslovi izraza procijeni na lažno (false), petlja se nikada neće izvršiti. S druge strane, petlja do-while će se uvijek jednom izvršiti, čak i ako se uslovi izraz procjeni na lažnu (false), jer se za razliku od petlje while, uslov se procjenjuje na kraju iteracije petlje, a ne na početku.



For petlja

Petlja for ponavlja blok koda sve dok je ispunjen određeni uslov. Obično se koristi za izvršavanje bloka koda određenog broja puta. Njegova sintaksa je:

for(initialization; condition; increment) {
    // Kod koji treba da se izvrši
}

Parametri izjave for petlje imaju sljedeće značenje:

  • inicijalizacija (eng. initialization) - koristi se za inicijalizaciju brojača i procjenjuje se jednom bezuslovno prije prvog izvršenja tijela petlje.
  • stanje (eng.condition) - ocjenjuje se na početku svake iteracije. Ako se ocijeni istinitim (true), izvršavaju se izjave u petlji. Ako ocijeni kao lažno, izvršavanje petlje se završava.
  • povećavanje (eng. increment) - ažurira brojač petlje s novom vrijednošću svaki put kad se petlja pokrene.

Sljedeći primjer definiše petlju koja počinje s i=1. Petlja se nastaviti sve dok vrijednost varijable i ne bude manja ili jednaka 5. Mjenja se i povećava za 1 svaki put kada se petlja pokrene:

for(var i=1; i<=5; i++) {
    document.write("<p>Broj je " + i + "</p>");
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript For petlja</title>
</head>
<body>
    <script>
    for(var i=1; i<=5; i++) {
        document.write("<p>Broj je " + i + "</p>");
    }
    </script>
</body>
</html>

Petlja for je posebno korisna za iteriranje preko niza. Sljedeći će vam primjer pokazati kako ispisati svaku stavku ili element JavaScript niza.

// Niz sa nekim elementima
var fruits = ["Jabuka", "Banana", "Mango", "Narandža", "Šljiva"];
 
// Loop through all the elements in the array 
for(var i=0; i<fruits.length; i++) {
    document.write("<p>" + fruits[i] + "</p>");
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Ispisivanje stavki niza</title>
</head>
<body>
    <script>
    // Niz sa nekim elementima
    var fruits = ["Jabuka", "Banana", "Mango", "Narandža", "Papaja"];
     
    // Prelistavanje svih elemente niza
    for(var i=0; i<fruits.length; i++) {
        document.write("<p>" + fruits[i] + "</p>");
    }
    </script>
</body>
</html>


For/in petlja

Petlja for/in je posebna vrsta petlje koja iteratira nad svojstvima objekta ili elementima niza. Generička sintaksa petlje je:

for(variable in object) {
    // Kod koji se treba izvršiti
}

Brojač petlje, tj. varijabla u ulaznoj petlji je niz, a ne broj. Sadrži ime trenutnog svojstva ili indeks trenutnog elementa niza. Sljedeći primjer će vam pokazati kako prolaziti kroz sva svojstva JavaScript objekta.

// Objekat s nekim svojstvima
var person = {"name": "Miloš", "surname": "Mihaljica", "age": "29"};
 
// Pregledavanje svih svojstava u objektu  
for(var prop in person) {  
    document.write("<p>" + prop + " = " + person[prop] + "</p>"); 
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Iteriranje preko niza pomoću petlje</title>
</head>
<body>
    <script>
    // Objekt sa nekim svojstvima
    var person = {"name": "Miloš", "surname": "Mihaljica", "age": "29"};
     
    // Prelistavanje svih svojstva objekta
    for(var prop in person) {  
        document.write("<p>" + prop + " = " + person[prop] + "</p>"); 
    }
    </script>
</body>
</html>

Slično tome, možete prolaziti kroz elemente niza, kao što je prikazano u primjeru:

// Niz s nekim elementima
var fruits = ["Jabuka", "Banana", "Mango", "Narandža", "Lubenica"];
 
// Pregledaj sve elemente u nizu
for(var i in fruits) {  
    document.write("<p>" + fruits[i] + "</p>");
}



for/of petlja ES6

ES6 uvodi novu for-of petlju koja nam omogućava vrlo lako ponavljanje nizova ili drugih iterabilnih objekata (npr. stringova). Takođe kod unutar petlje se izvršava za svaki element objekta koji se može ponoviti. Sljedeći primjer će vam pokazati kako prolaziti kroz nizove i stringove pomoću ove petlje.

// Iteracija preko niza
let letters = ["a", "b", "c", "d", "e", "f"];

for(let letter of letters) {
    console.log(letter); // a,b,c,d,e,f
}

// Iteracija preko stringa
let greet = "Hello World!";

for(let character of greet) {
    console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript ES6 for...of petlja</title>
</head>
<body>
    <script>
    // Iteriracija preko niza
    let letters = ["a", "b", "c", "d", "e", "f"];
    
    for(let letter of letters) {
        document.write(letter + "<br>"); // a,b,c,d,e,f
    }
    document.write("<hr>");
    
    // Iteracija preko stringa
    let greet = "Hello World!";
    
    for(let character of greet) {
        document.write(character + "<br>"); // H,e,l,l,o, ,W,o,r,l,d,!
    }
    </script>
</body>
</html>