JavaScript : Loops

Berbagai Jenis Loop dalam JavaScript

Loop digunakan untuk mengeksekusi blok kode yang sama berulang kali, sampai kondisi tertentu terpenuhi. Ide dasar di balik sebuah loop adalah untuk mengotomatiskan tugas yang berulang dalam suatu program untuk menghemat waktu dan usaha. JavaScript sekarang mendukung lima jenis loop:

  • while – loop melalui blok kode sampai kondisi dievaluasi true.
  • do… while – loop melalui blok kode sekali; kemudian kondisinya dievaluasi. Jika kondisinya benar, pernyataan diulang selama kondisi yang ditentukan benar.
  • for – loop melalui blok kode sampai penghitung mencapai angka yang ditentukan.
  • for…in – loop melalui properti dari suatu objek.
  • for…of – loop atas objek yang dapat diubah seperti array, string, dll.
While Loop

While loop akan me-loop melalui blok kode sampai kondisi yang ditentukan bernilai true. Segera setelah fail, loop akan dihentikan. Sintaksis generik dari while loop adalah:

while(condition) {
    // Code to be executed
}

Contoh berikut mendefinisikan loop yang akan terus berjalan selama variabel i kurang dari atau sama dengan 5. Variabel i akan meningkat sebesar 1 setiap kali loop berjalan:

var i = 1;
while(i <= 5) {    
    document.write("<p>The number is " + i + "</p>");
    i++;
}

Catatan: Pastikan bahwa kondisi yang ditentukan dalam loop kalian akhirnya false. Jika tidak, loop tidak akan pernah berhenti berulang-ulang yang dikenal sebagai loop tak terbatas. Kesalahan yang umum terjadi yaitu lupa menambah variabel penghitung (variabel i dalam kasus kita).

Do…While Loop

Do-while loop adalah varian dari while loop, yang mengevaluasi kondisi pada akhir setiap loop yang berulang-ulang. Dengan do-while loop blok kode dieksekusi sekali, dan kemudian kondisinya dievaluasi, jika kondisinya true, maka pernyataan akan diulangi selama kondisi yang ditentukan dievaluasi adalah true. Sintaksis generik dari do-while loop adalah:

do {
    // Code to be executed
}
while(condition);

Kode JavaScript dalam contoh berikut mendefinisikan loop yang dimulai dengan i = 1. Ini kemudian akan mencetak output dan meningkatkan nilai variabel i dengan 1. Setelah itu kondisinya akan dievaluasi, dan loop akan terus berjalan selama variabel i kurang dari, atau sama dengan 5.

var i = 1;
do {
    document.write("<p>The number is " + i + "</p>");
    i++;
}
while(i <= 5);
Perbedaan Antara While dan Do…While Loop

While loop berbeda dari loop do-while dalam satu kondisi – dengan while loop, kondisi yang akan dievaluasi diuji pada awal pada setiap loop yang berulang, jadi jika expression kondisional bernilai false, loop tidak akan pernah dieksekusi.

Dengan loop do-while, di sisi lain, loop akan selalu dieksekusi sekali bahkan jika ekspresi kondisional bernilai false, karena tidak seperti loop while, kondisi dievaluasi pada akhir loop yang berulang-ulang dibandingkan di awalnya.

Loop for

For loop mengulangi blok kode sampai kondisi tertentu terpenuhi. Ini biasanya digunakan untuk mengeksekusi blok kode untuk beberapa kali. Sintaksnya adalah:

for(initialization; condition; increment) {
    // Code to be executed
}

Parameter pernyataan loop for memiliki arti sebagai berikut:

  • Initialization – digunakan untuk menginisialisasi variabel counter, dan dievaluasi sekali tanpa syarat sebelum eksekusi pertama dari body loop.
  • Condition – dievaluasi pada awal setiap iterasi. Jika bernilai true, pernyataan loop dijalankan. Jika bernilai false, eksekusi dari loop berakhir.
  • Increment – memperbarui loop counter dengan nilai baru setiap kali loop berjalan.

Contoh berikut mendefinisikan loop yang dimulai dengan i = 1. Loop akan berlanjut sampai nilai variabel i kurang dari atau sama dengan 5. Variabel i akan meningkat sebesar 1 setiap kali loop berjalan:

for(var i=1; i<=5; i++) {
    document.write("<p>The number is " + i + "</p>");
}

Loop for sangat berguna untuk iterasi pada array. Contoh berikut akan menunjukkan kepada kalian cara mencetak setiap item atau elemen dari array JavaScript.

// An array with some elements
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Loop through all the elements in the array 
for(var i=0; i<fruits.length; i++) {
    document.write("<p>" + fruits[i] + "</p>");
}
Loop for…in

Loop for-in adalah tipe khusus dari loop yang berulang di atas properti objek, atau elemen array. Sintaksis generik dari for-in loop adalah:

for(variable in object) {
    // Code to be executed
}

Variabel loop counter dalam for-in loop adalah string, bukan angka. Ini berisi nama properti saat ini atau indeks elemen array saat ini.

Contoh berikut akan menunjukkan kepada kalian bagaimana untuk mengulang semua properti objek JavaScript.

// An object with some properties 
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
 
// Loop through all the properties in the object  
for(var prop in person) {  
    document.write("<p>" + prop + " = " + person[prop] + "</p>"); 
}

Demikian pula, kalian dapat mengulangi elemen array, seperti ini:

// An array with some elements
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Loop through all the elements in the array 
for(var i in fruits) {  
    document.write("<p>" + fruits[i] + "</p>");
}
For…of Loop ES6

ES6 memperkenalkan for-of loop baru yang memungkinkan kita untuk beralih di atas array atau objek yang dapat diulang lainnya (mis. String) dengan sangat mudah. Juga, kode di dalam loop dieksekusi untuk setiap elemen dari objek yang berulang.

Contoh berikut ini akan menunjukkan kepada kalian bagaimana untuk me-loop melalui array dan string menggunakan loop ini.

// Iterating over array
let letters = ["a", "b", "c", "d", "e", "f"];

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

// Iterating over string
let greet = "Hello World!";

for(let character of greet) {
    console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!