Cara menggunakan looping data array javascript

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:

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

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

Menampilkan semua item pada sebuah array menggunakan for loop.

1let array = [1, 2, 3, 4, 5];
2
3



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.

1while (condition) statement;

Contoh:

1let array = [1, 2, 3, 4, 5];
2let index = 0;
3
4while (index < array.length) {  
5  console.log(array[index]);
6  index++; 
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

1do
2  statement
3while (condition);

Contoh:

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:

1let array = [1, 2, 3, 4, 5];
2let index = 0;
3
4while (index < array.length) {
5  
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

1let array = [1, 2, 3, 4, 5];
2
3for (let index = 0; index < array.length; index++) {
4  
5
6  if (array[index] === 3) {
7    continue; 
8  }
9
10  console.log(array[index]);
11}

Pada code di atas output akhir adalah:

Alur / flow: