Looping

Saat menulis program komputer, ada beberapa situasi di mana tindakan yang sama harus dilakukan berkali-kali. Contohnya, kita mungkin ingin menampilkan semua nama pengguna yang terdaftar di aplikasi, atau mungkin hanya menampilkan angka dari 1 sampai 10. Namun, menulis kode secara manual untuk tugas ini tidak efisien atau praktis.

Untuk mengatasi hal ini, kita dapat menggunakan konsep pemrograman yang disebut “looping“. Dengan menggunakan looping, kita dapat menulis kode untuk melakukan tindakan yang sama berkali-kali dengan hanya menulis kode sekali. Ada beberapa jenis loop yang umum digunakan, seperti “for loop“, “while loop” dan masing-masing cocok untuk situasi yang berbeda.

Daripada menulis kode yang sama berkali-kali, kita dapat menggunakan loop sehingga kita dapat membuat kode kita lebih efisien, mudah diubah, dan mudah dipahami oleh orang lain. Selain itu, hal tersebut juga memungkinkan kita untuk menghemat waktu dan usaha dalam menulis dan maintenance kode.

Pada artikel kali ini mari kita akan membahas tentang looping yaitu for loop, for of loop, while and do-while, infinite loop.

For Loop

Salah satu cara yang sering digunakan dalam melakukan proses loop di JavaScript adalah dengan menggunakan “for loop“. Struktur dasar dari “for loop” dapat dilihat sebagai berikut:

for(inisialisasi variabel; test kondisi; perubahan nilai variabel) {
  // do something
}

Berikut ini contoh penerapannya :

for(let i = 0; i < 5; i++) {
  console.log(i);
}


/* output
0
1
2
3
4
*/

Berikut ini penjelasan dari kode-kode di atas: 

• Variabel `i` didefinisikan sebagai 0 pada awal perulangan.
• Perulangan akan terus berjalan selama nilai variabel `i` kurang dari 5.
• Pada setiap iterasi, nilai variabel `i` akan ditampilkan di console menggunakan console.log(i).
• Nilai variabel i akan bertambah 1 setiap kali perulangan dijalankan dengan menggunakan i++.
• Output yang dihasilkan akan menampilkan nilai variabel i pada setiap iterasi, mulai dari 0 hingga 4.

Jika diartikan secara singkat code di atas bisa diucapkan dengan “ Jika `i` kurang dari 5 maka tampilkan nilai `i`.

For of loop

For of loop merupakan cara alternatif untuk melakukan looping. Looping ini hadir pada ECMAScript 2015 (ES6), lebih sederhana serta modern dibandingkan dengan for loop yang biasa digunakan. Sintaks dasar dari for of loop adalah sebagai berikut:

for(arrayItem of myArray) {
  // do something
}

For…of dapat digunakan untuk melakukan looping pada array dengan lebih efisien, karena tidak memerlukan banyak statement. Pada artikel berikutnya akan dibahas penjelasan yang lebih detail tentang array. Namun, sebagai permulaan, kita dapat menganggap array sebagai kumpulan nilai yang tersimpan dalam satu variabel.

Pada setiap proses looping dengan for..of, nilai dari setiap item di dalam array akan diinisialisasi ke dalam variabel baru yang kita tentukan. Sedangkan jumlah proses looping-nya akan disesuaikan dengan ukuran dari array. Berikut ini adalah contoh penggunaan for..of : 

let myArray = ["Luke", "Han", "Chewbacca", "Leia"];


for(const arrayItem of myArray) {
    console.log(arrayItem)
}


/* output
Luke
Han
Chewbacca
Leia
*/

Kode di atas merupakan contoh penggunaan perulangan for…of pada JavaScript untuk mengakses setiap elemen atau nilai dalam sebuah array.

Pertama, kita mendefinisikan sebuah array dengan nama myArray yang berisi empat string: “Luke”, “Han”, “Chewbacca”, dan “Leia”.

Selanjutnya, kita menggunakan perulangan for…of untuk mengiterasi setiap elemen dalam array myArray. Pada setiap iterasi, nilai dari elemen akan disimpan ke dalam variabel arrayItem. Kemudian dalam blok perulangan, kita memanggil fungsi console.log() untuk mencetak nilai dari variabel arrayItem ke dalam konsol.

Setelah program dijalankan, maka output yang dihasilkan adalah “Luke”, “Han”, “Chewbacca”, dan “Leia”, masing-masing pada baris yang berbeda.

While and do-while

Selain perulangan for, di dalam bahasa pemrograman JavaScript juga terdapat perulangan while dan do while. Perulangan while akan menjalankan kode di dalam blok while selama kondisi boolean pada awal perulangan bernilai true. Contoh kode perulangan while dalam JavaScript:

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

Pada contoh di atas, program akan mengevaluasi kondisi ‘i < 5’ pada awal perulangan, jika kondisi tersebut bernilai true maka program akan menjalankan kode di dalam blok while yaitu ‘console.log(i)’ dan ‘i++’. Kemudian program akan kembali mengevaluasi kondisi tersebut pada awal setiap perulangan.

Perulangan do while hampir sama dengan while, namun perbedaannya adalah kondisi boolean dievaluasi pada akhir perulangan, sehingga blok do akan selalu dijalankan setidaknya satu kali. Contoh kode perulangan do while dalam JavaScript:

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

Pada contoh di atas, program akan menjalankan blok do pertama kali, kemudian akan mengevaluasi kondisi ‘i < 5’, jika kondisi tersebut bernilai true maka program akan menjalankan blok do kembali, dan seterusnya hingga kondisi tersebut bernilai false.

Perlu diingat bahwa kedua jenis perulangan ini memiliki kegunaan yang berbeda tergantung pada kasus penggunaannya. Jika kondisi untuk melakukan perulangan tidak diketahui pada awalnya, maka perulangan while atau do while bisa menjadi pilihan yang tepat.

Infinite loops

Ketika menerapkan perulangan pada program, ada satu kondisi yang perlu kita hindari yaitu infinite loop. Infinite loop atau endless loop adalah kondisi dimana program kita stucked di dalam perulangan. Ia akan berjalan terus hingga menyebabkan crash pada aplikasi dan komputer kecuali ada intervensi secara eksternal, seperti mematikan aplikasi.

Kode berikut ini adalah contoh di mana kondisi infinite loop dapat terjadi:

while (true) {
  console.log("Hello, world!");
}

Pada contoh di atas, perulangan while akan terus berjalan selamanya karena kondisinya selalu bernilai true. Oleh karena itu, program akan mencetak “Hello, world!” terus-menerus tanpa henti sampai kita menghentikannya secara manual.

Infinite loop juga dapat terjadi jika kita menggunakan for seperti contoh di bawah: 

for (let i = 1; i > 0; i++) {
  console.log(i);
}

Pada contoh di atas, variabel i diinisialisasi dengan nilai 1, dan kondisi perulangan adalah i > 0. Karena i selalu bertambah satu setiap kali perulangan dijalankan, kondisi perulangan ini akan selalu benar, sehingga perulangan akan berjalan selamanya dan tidak akan pernah berhenti.

Demikian pembahasan kita kali ini tentang looping dalam JavaScript, jangan khawatir kita akan kembali melanjutkan pembahasan tentang JavaScript lainnya pada artikel selanjutnya.

Dan untuk kalian yang berminat belajar lebih lanjut tentang pemrograman javascript dan bahasa pemrograman lainnya, silahkan kunjungi social media Xsis Academy untuk info lebih lanjut mengenai Bootcamp Xsis Academy atau instagram Xsis Academy.

Selain itu, temukan juga video tutorial ngoding dari Tim Trainer Xsis Academy pada channel ETG berikut ini Youtube Equine Technologies Group

——–

Penulis : Aulia Brahmantio Diaz – Webmaster Xsis Mitra Utama