for Loop JavaScript

Loop artinya adalah menjalankan code yang sama secara berulang-ulang. Satu kali loop artinya satu kali menjalankan kumpulan code. Dua kali loop artinya menjalankan dua kali kumpulan code, dan seterusnya.

Ada dua variasi for loop:

  • for loop
  • for…in loop

for loop

for loop berguna untuk menjalankan sekumpulan code secara berulang-ulang dengan jumlah pengulangan code berdasarkan conditional statement.

Syntax

for (statement 1; statement 2; statement 3) {
   code block;
};

Parameter

Parameter Penjelasan
statement 1 Nilai awal dari counter variable. Counter variable ini digunakan sebagai bagian dari [statement 2].
statement 2 Conditional statement yang menentukan apakah loop akan dilanjutkan atau tidak (true atau false).
statement 3 Penambah counter variable.

Catatan

  • [code block] adalah kumpulan code yang akan dieksekusi setiap kali loop.
  • Jika conditional statement tidak pernah [false] maka for loop akan terus menjalankan loop yang akan mengakibatkan browsermu menjadi error.

Contoh for loop

Berikut ini adalah contoh dari for loop:

Code JavaScript 1:

<script>
var i;
for (i = 0; i < 5; i++) {
   document.write("Nilai i = " + i + "<br />");
};
</script>

Hasil code JavaScript 1:

Nilai i = 0
Nilai i = 1
Nilai i = 2
Nilai i = 3
Nilai i = 4

Code for di atas bisa dijelaskan sebagai berikut ini:

  • Variable bernama [i] di atas adalah [counter variable].
  • Code ini [i = 0] adalah [statement 1]. Code tersebut artinya nilai awal dari variable bernama [i] adalah 0.
  • Code ini [i < 5] adalah [statement 2]. Disebut juga sebagai [conditional statement]. Selama [statement 2] ini menghasilkan [true] maka loop akan dilakukan dan [code block] yang berada di dalam code for loop akan dieksekusi.
  • Code [i < 5] artinya selama nilai dari variable [i] lebih kecil dari 5 maka [code block] akan dieksekusi.
  • Code ini [i++] adalah [statement 3]. Code tersebut artinya setiap kali terjadi loop maka nilai dari variable [i] akan ditambah 1.

Code for loop di atas bekerja berdasarkan urutan sebagai berikut:

  1. Menjalankan for loop.
  2. [statement 1] dievaluasi.
  3. [statement 2] dievaluasi. Karena [statement 2] menghasilkan [true] maka [loop 1] dimulai.
  4. [code block] dijalankan.
  5. [statement 3] dijalankan. [loop 1] selesai.
  6. [statement 2] dievaluasi. Karena [statement 2] masih menghasilkan [true] maka [loop 2] dimulai.
  7. [code block] dijalankan.
  8. [statement 3] dijalankan. [loop 2] selesai.

Loop akan terus berulang sampai [statement 2] menghasilkan [false].

Penjelasan statement parameter

Counter variable [i] pada [statement 1] tidak harus dimulai dengan angka [0]. Counter variable bisa diisi dengan bebagai jenis angka. Bisa positif bisa negatif. Lihat contoh berikut ini:

Code JavaScript 2:

<script>
var i;
for (i = 2; i < 5; i++) {
   document.write("Nilai i = " + i + "<br />");
};
</script>

Hasil code JavaScript 2:

Nilai i = 2
Nilai i = 3
Nilai i = 4

Pada code di atas, counter variable pada parameter [statement 1] diisi dengan angka [2].

Parameter [statement 1] boleh ditulis sebelum code for loop. Lihat contoh dibawah ini:

Code JavaScript 3:

<script>
var i = 0;
for (; i < 5; i++) {
   document.write("Nilai i = " + i + "<br />");
};
</script>

Hasil code JavaScript 3:

Nilai i = 0
Nilai i = 1
Nilai i = 2
Nilai i = 3
Nilai i = 4

Pada code di atas kita mengosongkan parameter [statement 1] pada foor loop. Walaupun begitu, parameter [statement 1] sebenarnya sudah ditulis sebelum code for loop yaitu pada code [var i = 0;].

Parameter [statement 2] boleh dikosongkan. Tetapi jika [statement 2] dikosongkan maka akan terjadi pengulangan loop secara terus menerus. Hasilnya adalah browsermu akan error.

Jika ingin mengosongkan [statement 2], code for loop harus dilengkapi dengan [break] keyword. Artinya hanya akan terjadi satu kali loop. Lihat contoh di bawah ini:

Code JavaScript 4:

<script>
var i;
for (i = 0;  ; i++) {
   document.write("Nilai i = " + i + "<br />");
   break;
};
</script>

Hasil code JavaScript 4:

Nilai i = 0

Parameter [statement 3] tidak harus berisi [increment operator]. Bisa berisi decrement operator [i--], bisa kelipatan 10 [i*10] atau bisa code apa saja.

Code JavaScript 5:

<script>
var i;
for (i = 0; i < 10; i = i + 2) {
   document.write("Nilai i = " + i + "<br />");
};
</script>

Hasil code JavaScript 5:

Nilai i = 0
Nilai i = 2
Nilai i = 4
Nilai i = 6
Nilai i = 8

Pada code di atas, [statement 3] diisi dengan penambahan angka 2 setiap kali loop.

[statement 3] juga boleh dikosongkan atau dipindahkan ke dalam [block code] di dalam code for loop. Lihat contoh di bawah ini:

Code JavaScript 6:

<script>
var i;
for (i = 0; i < 5; ) {
   document.write("Nilai i = " + i + "<br />");
   i++;
};
</script>

Hasil code JavaScript 6:

Nilai i = 0
Nilai i = 1
Nilai i = 2
Nilai i = 3
Nilai i = 4

for…in loop

for…in loop bisa digunakan terhadap sebuah object atau sebuah array.

for…in loop buat object

Bila for…in loop digunakan terhadap sebuah object maka for…in loop berguna untuk menjalankan sekumpulan code secara berulang-ulang dengan jumlah pengulangan sebanyak jumlah property yang ada dalam object tersebut.

Syntax

for (variable in object) {
   code block;
};

Parameter

Parameter Penjelasan
variable nama variable.
object nama object yang akan digunakan.

Catatan

  • Kamu bisa menggunakan nama variable apapun yang kamu mau untuk parameter [variable]. Nama dari variable disini tidaklah penting, yang penting adalah value dari variable tersebut.
  • Nama dari setiap property akan dimasukkan ke dalam [variable] setiap kali loop. Pada loop 1, [variable] akan berisi nama property pada urutan pertama. Pada loop 2, [variable] akan berisi nama property pada urutan kedua, dan seterusnya. [variable] kemudian bisa digunakan dalam [code block].
  • code block adalah kumpulan code yang akan dieksekusi setiap kali loop.

Contoh

Berikut ini adalah contoh for…in loop yang digunakan terhadap object:

Code JavaScript 7:

<script>
nama_object = {a : "Anggur" , b : "Belimbing", c : "Cokelat"};

var nama_variable;
for (nama_variable in nama_object) {
   document.write(nama_variable + ": " + nama_object[nama_variable] + "<br />");
};
</script>

Hasil code JavaScript 7:

a: Anggur
b: Belimbing
c: Cokelat

Code di atas bisa dijelaskan sebagai berikut:

Pertama kita membuat sebuah object dengan code sebagai berikut:

nama_object = {a : "Anggur" , b : "Belimbing", c : "Cokelat"};

Karena object di atas memiliki tiga property maka for…in loop akan melakukan tiga kali loop.

Pada loop 1, [nama_variable] berisi nama property pada urutan pertama yaitu [a]. Pada loop 2, [nama_variable] berisi nama property pada urutan kedua yaitu [b]. Pada loop 3, [nama_variable] berisi nama property pada urutan ketiga yaitu [c].

Property value bisa dipanggil dengan syntax: namaObject[namaProperty]. Pada code di atas [nama_variable] berisi nama property sehingga property value bisa dipanggil dengan code nama_object[nama_variable].

for…in loop buat array

Bila for…in loop digunakan terhadap sebuah array maka for…in loop berguna untuk menjalankan sekumpulan code secara berulang-ulang dengan jumlah pengulangan sebanyak jumlah value dalam array tersebut.

Syntax

for (variable in array) {
   code block;
};

Parameter

Parameter Penjelasan
variable nama variable.
array nama array yang akan digunakan.

Catatan

  • Kamu bisa menggunakan nama variable apapun yang kamu mau untuk parameter [variable]. Nama dari variable disini tidaklah penting, yang penting adalah value dari variable tersebut.
  • Posisi value didalam array akan dimasukkan ke dalam variable ini setiap kali loop. Posisi value di dalam array disebut sebagai [key].
  • Pada loop 1, variable ini akan berisi angka [0]. Pada loop 2, variable ini akan berisi angka [1], dan seterusnya. Variable ini kemudian bisa digunakan dalam [code block].
  • Urutan posisi value dalam array dimulai dari angka [0] dan bukannya [1].
  • code block adalah kumpulan code yang akan dieksekusi setiap kali loop.

Contoh

Berikut ini adalah contoh for…in loop yang digunakan terhadap array:

Code JavaScript 8:

<script>
var nama_array = ["Batagor", "Gado-gado", "Nasi goreng"];

var nama_variable;
for (nama_variable in nama_array) {
   document.write(nama_variable + ": " + nama_array[nama_variable] + "<br />");
};
</script>

Hasil code JavaScript 8:

0: Batagor
1: Gado-gado
2: Nasi goreng

Code di atas bisa dijelaskan sebagai berikut:

Pertama kita membuat sebuah array dengan code sebagai berikut:

var nama_array = ["Batagor", "Gado-gado", "Nasi goreng"];

Karena array di atas memiliki tiga value maka for…in loop akan melakukan tiga kali loop.

Pada loop 1, [nama_variable] berisi posisi value pertama di dalam array yaitu [0]. Pada loop 2, [nama_variable] berisi posisi value kedua di dalam array yaitu [1]. Pada loop 3, [nama_variable] berisi posisi value ketiga di dalam array yaitu [2].

Value di dalam array bisa dipanggil dengan syntax: nama_array[key]. Pada code di atas [nama_variable] berisi [key] sehingga value di dalam array bisa dipanggil dengan code nama_array[nama_variable].

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>