Javascript Looping

 

Apa itu Loop?

Loop dalam Bahasa Indonesia artinya putaran. Dalam JavaScript, maksudnya adalah perulangan. Jadi, loop adalah sekumpulan kode yang akan dijalankan berulang kali sampai batas yang ditentukan.

Sebagai contoh, coba tampilkan angka 1 sampai dengan 10 di console. Solusi seperti apakah yang kalian pikirkan? Apakah seperti ini?

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);

/*
Output:
1
2
3
4
5
6
7
8
9
10
*/

Coba bayangkan jika kalian disuruh untuk menampilkan angka 1 sampai 1000 pada console dengan cara di atas, mungkin jari kalian sudah pegal-pegal.

Nah untuk menghindari itu, kita bisa menggunakan JavaScript Loop.

Ada 5 jenis loop di JavaScript, yaitu:

• for
• for...in
• for...of
• while
• do...while

Semua loop di atas pada dasarnya sama saja (terkecuali untuk for..in dan for...of ada sedikit perbedaan), jadi terserah kalian saja ingin memakai yang mana. Hanya saja, yang sering digunakan pada umumnya adalah for dan while loop.

Kita akan bahas satu-persatu di topik selanjutnya.

For Loop

Syntax yang digunakan ketika menggunakan for loop adalah sebagai berikut:

for (pernyataan1; pernyataan2; pernyataan3) {
  // kode yang akan dijalankan ketika pernyataan2 benar (true)
}

Penjelasan kode di atas:

• pernyataan1 digunakan untuk menentukan nilai awal berjalannya loop.
• pernyataan2 digunakan untuk mendefinisikan kondisi berjalannya sebuah loop. Apabila nilai kondisinya false, maka loop akan berakhir.
• pernyataan3 digunakan untuk menambah atau mengurangi nilai awal pada pernyataan1 setiap kali loop dijalankan.

Contoh Penggunaan

Kita akan menampilkan angka 1 sampai dengan 10 di console. Caranya adalah:

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

/*
Output:
1
2
3
4
5
6
7
8
9
10
*/

Penjelasan contoh di atas:

• let i = 1 adalah pernyataan1. Kode tersebut berarti kita mendeklarasikan sebuah variabel baru bernama i dengan nilai awal 1. Jadi, pada contoh di atas, loop akan dimulai dari angka 1.
• i <= 10 adalah pernyataan2. Kode tersebut menentukan kondisi apakah loop bisa dijalankan. Loop akan terus berjalan apabila nilai variabel i masih di bawah atau sama dengan 10. Pada contoh di atas, perulangan yang dimaksud adalah menampilkan nilai variabel i pada console.
• i++ adalah pernyataan3. Kode tersebut berarti, setiap melakukan satu perulangan, maka tambahkan nilai i dengan angka 1.

📝 Catatan:

Masih ingat kan fungsi operator ++? Cek topik Operator Aritmatika.

For/In Loop

Berbeda dengan for loop dari topik sebelumnya, for...in digunakan untuk mengulang setiap properti dari sebuah objek.

Syntax yang digunakan ketika menggunakan for...in loop adalah sebagai berikut:

for (propertiObjek in namaObjek) {
  // kode yang akan dijalankan
}

Penjelasan kode di atas:

• for (propertiObjek in namaObjek) berarti untuk setiap propertiObjek di namaObjek, maka jalankan kode di dalam {}. Variabel propertiObjek bisa diganti dengan nama variabel apapun.

Contoh Penggunaan

Seandainya kita memiliki sebuah objek buku, dan kita mau menampilkan masing-masing nama properti dan nilainya di console. Caranya adalah:

const buku = {
   judul: "Harry Potter and The Philosopher's Stone",
   pengarang: "J. K. Rowling",
   tahun: 1997
};
for (x in buku) {
  console.log(x, ':', buku[x]);
}

/*
Output:
judul : Harry Potter and The Philosopher's Stone
pengarang : J. K. Rowling
tahun: 1997
*/

Penjelasan contoh di atas:

• for (x in buku) menyatakan untuk setiap properti x yang ada di variabel buku maka jalankan console.log(x, ':', buku[x]);.

For/Of Loop

Berbeda dengan for loop dari topik sebelumnya, for...of digunakan untuk mengulang setiap element dari objek yang bisa diulang (contoh array atau string).

Syntax yang digunakan ketika menggunakan for...of loop adalah sebagai berikut:

for (let element of namaVariabel) {
  // kode yang akan dijalankan
}

Penjelasan kode di atas:

• for (let element of namaVariabel) berarti untuk setiap element di namaVariabel, maka jalankan kode di dalam {}. Variabel element bisa diganti dengan nama variabel apapun.

Contoh Penggunaan

Seandainya kita memiliki sebuah array yang berisi judul buku, dan kita mau menampilkan setiap element-nya di console. Caranya adalah:

const buku = ["Game of Thrones: A Song of Ice and Fire",  
   "Harry Potter and The Philosopher's Stone", 
   "Lord of The Rings: The Fellowship of The Ring"
];

for (let x of buku) {
  console.log(x);
}

/*
Output:
Game of Thrones: A Song of Ice and Fire
Harry Potter and The Philosopher's Stone
Lord of The Rings: The Fellowship of The Ring
*/

Penjelasan contoh di atas:

• for (let x of buku) menyatakan untuk setiap element x yang ada di variabel buku maka jalankan console.log(x);.

While Loop

Syntax dalam menggunakan while loop adalah sebagai berikut:

while (kondisi) {
  // kode yang akan dijalankan ketika kondisi benar (true)
}

Penjelasan kode di atas:

• while (kondisi) berarti ketika kondisi yang ditentukan benar (true), maka jalankan semua kode yang ada di dalam {}.

Contoh Penggunaan

Kita akan menampilkan angka 1 sampai dengan 10 di console dengan while loop, caranya adalah:

let i = 1;

while (i <= 10) {
  console.log(i);
  i++;
}

/*
Output:
1
2
3
4
5
6
7
8
9
10
*/

Penjelasan kode di atas:

• let i = 1; berarti kita mendeklarasikan variabel i dengan nilai awal 1.
• while (i <= 10) berarti ketika variabel i bernilai kurang dari atau sama dengan 10, maka jalankan semua kode di dalam {}. Pada contoh di atas, program akan menampilkan nilai variabel i pada console dan kemudian menambahkan nilai variabel i dengan angka 1. Setelah itu, program akan mengevaluasi apakah kondisi i <= 10 masih true. Bila iya, maka kode akan terus dijalankan sampai kondisi false.

Do While Loop

Syntax dalam penggunaan do...while loop adalah:

do {
  // kode yang akan dijalankan ketika kondisi benar (true)
} while (kondisi);

Contoh Penggunaan

Kita akan menampilkan angka 1 sampai dengan 10 di console dengan do...while loop, caranya adalah:

let i = 1;

do {
  console.log(i);
  i++;
} while (i <= 10);

/*
Output:
1
2
3
4
5
6
7
8
9
10
*/

Penjelasan kode di atas:

• let i = 1; berarti kita mendeklarasikan variabel i dengan nilai awal 1.
• do { console.log(i); i++; } menentukan kode yang akan dijalankan ketika kondisi benar (true). Pada contoh di atas, program akan menampilkan nilai variabel i pada console dan kemudian menambahkan nilai variabel i dengan angka 1.
• while (i <= 10) menentukan kondisi dari kode blok do {...}, yaitu apabila variabel i bernilai kurang dari atau sama dengan 10, maka jalankan semua kode di dalam do {...}.