Seperti disebutkan di awal bahwa sebagian besar proses dalam sebuah aplikasi adalah proses yang terus berulang (Repetitive Task).

Kita menghandle repetitive task ini dengan menggunakan konsep loop dan function.

Loop dalam pemrograman adalah instruksi yang terus berulang hingga mencapai kondisi tertentu.

Jika kita ingin menampilkan value dari setiap element dari sebuah array, kita bisa menulis code sebagai berikut:

Copy
1let array = [1, 2, 3];
2
3console.log(array[0]);
4console.log(array[1]);
5console.log(array[2]);

Namun bagaimana jika jumlah element berjumlah ratusan atau bahkan ribuan ?

Dengan loop, menampilkan element array sebagaimana di atas menjadi hal yang mudah.

Ada 3 macam loop yang sering digunakan dan ditemui hampir di semua bahasa pemograman termasuk JavaScript.

For Loop

Syntax

Copy
1for ([initialExpression]; [condition]; [incrementExpression]) statement;

Menampilkan semua item pada sebuah array menggunakan for loop.

Copy
1let array = [1, 2, 3, 4, 5];
2
3// method .length pada array digunakan untuk menghitung total element
4for (let index = 0; index < array.length; index++) { 
5  console.log(array[index]);
6}

Alur code di atas:

While

Pada while loop, perulangan terus dilakukan selama kondisi awal bernilai true.

Syntax while Loop.

Copy
1while (condition) statement;

Contoh:

Copy
1let array = [1, 2, 3, 4, 5];
2let index = 0;
3
4while (index < array.length) {  // cek jika value index kurang dari total jumlah element array
5  console.log(array[index]);
6  index++; // tingkatkan value index (increment) untuk loop selanjutnya
7}

Code di atas dibaca "tampilkan setiap item array selama value index kurang dari total jumlah item array".

Statement index < array.length bernilai true ketika value index kurang dari total jumlah item array.

Alur / flow:

Do While

Sedangkan untuk do while, perulangan terus dilakukan sampai kondisi bernilai false.

Syntax

Copy
1do
2  statement
3while (condition);

Contoh:

Copy
1let array = [1, 2, 3, 4, 5];
2let index = 0;
3
4do { 
5  console.log(array[index]);
6  index++;
7} while (index < array.length);

Code di atas dibaca "tampilkan setiap item array sampai value index lebih dari total jumlah item array".

Statement index < array.length bernilai false ketika value index lebih dari total jumlah item array.

Alur / flow:

Ada lebih dari 3 jenis loop di javascript, selain 3 yang sudah dibahas masih ada for..in dan for...of.

Array JavaScript juga memiliki method yang berfungsi sama dengan for loop seperti array.foreach(), array.every() dll

Pembahasan tentang loop khusus pada JavaScript dibahas pada pembahasan JavaScript-1.

Break

Bagaimana jika kita ingin keluar dari sebuah loop sebelum proses loop selesai ?

Jawabannya adalah dengan menggunakan keyword break.

Contoh:

Copy
1let array = [1, 2, 3, 4, 5];
2let index = 0;
3
4while (index < array.length) {
5  // keluar dari loop jika value sama dengan 3
6  if (array[index] === 3) {
7    break; 
8  }
9  console.log(array[index]);
10  index++;
11}

Alur / flow:

Continue

Sedangkan keyword continue digunakan jika kita ingin melewati satu proses loop

Contoh

Copy
1let array = [1, 2, 3, 4, 5];
2
3for (let index = 0; index < array.length; index++) {
4  /* lanjutkan loop jika value sama dengan 3 
5  tanpa eksekusi perintah selanjutnya */
6  if (array[index] === 3) {
7    continue; 
8  }
9
10  console.log(array[index]);
11}

Pada code di atas output akhir adalah:

Copy
11
22
34
45

Alur / flow: