Modul 3-1. For Loops

Pendahuluan

Halo teman-teman semua selamat datang kembali di Javascript Course dari nusantech academy. Sebelum teman-teman melanjutkan membaca materi ini, diharapkan teman-teman sudah mengerti tentang materi pada modul sebelumnya, yaitu tentang javascript dasar. Sebuah proses loop atau perulangan digunakan untuk mengeksekusi kode program secara berulang dalam jumlah perulangan tertentu. Ada dua jenis perulangan dalam javascript, yaitu for loop dan while loop.

For Loops

Pada materi ini kita akan membahas tentang for loops dalam bahasa pemrograman javascript.

Syntax

For loop memiliki syntax:

for([initialization]; [condition]; [final-expression]) {
// kode program yang akan dieksekusi
}

Initialization atau inisialisasi adalah  bagian dari for loop yang digunakan untuk mendeklarasikan variabel sebelum proses looping/perulangan dimulai. Biasanya pada bagian ini dideklarasikan variabel counter untuk proses perulangan tersebut. Bagian inisialisasi ini bersifat optional, variabel yang ingin kita deklarasikan bisa dilakukan di luar for loop.

Condition atau kondisi adalah bagian yang digunakan untuk membuat pernyataan kondisi untuk menjalankan kode program yang ada dalam for loop tersebut. Jika statement atau pernyataan tersebut bernilai true, maka kode program yang ada di dalam for loop akan dieksekusi tapi proses perulangan akan dihentikan ketika pernyataan kondisi tersebut bernilai false. Bagian kondisi ini juga bersifat optional, pernyataan kondisi bisa dilakukan di dalam for loop dengan menggunakan if/else statement dan keyword break. Jika keyword tersebut tidak digunakan, kemungkinan for loop yang kita buat akan menjadi infinite loop. Hal ini bisa menimbulkan error atau membuat browser menjadi crash.

Final expression adalah bagian yang dievaluasi pada akhir dari setiap perulangan. Biasanya pada bagian ini digunakan untuk mengupdate variabel counter. Sama seperti bagian lainnya, bagian final expression ini juga bersifat opsional. Kita bisa mengupdate variabel counter di kode program di dalam for loop yang telah kita buat.

Sebagai contoh, misalnya kita ingin melakukan perulangan dari angka 0 sampai angka 10.

for (let i=0; i <= 10; i++){
 console.log("Ini perulangan ke " + i);
}

Variabel i adalah nilai awal counter yang kita set di nilai 0. Di bagian condition, kita set perulangan akan berjalan ketika nilai i kurang dari atau sama dengan 10 dan di bagian final expression, nilai counter variabel i akan ditambah 1 setiap akhir dari proses perulangannya. Lalu di dalam for loop tersebut kita kita memanggil metode console.log() untuk membuktikan perulangan yang kita buat adalah perulangan dari angka 0 sampai angka 10.

Javascript juga menyediakan versi lain dari for loop, yaitu for/in loop dan for/of loop. 

For/in loop

For/in loop adalah versi for loop yang lebih simpel untuk melakukan perulangan terhadap sebuah object. Syntax dari for/in loop:

for (variableName in Object){
// kode program yang akan dieksekusi
}

Di setiap perulangan, satu per satu dari key dalam object akan didefinisikan ke dalam variabel variableName dalam for/in loop. Proses perulangan berjalan sampai semua pasangan key-value di dalam object selesai diproses. Untuk lebih jelasnya kita akan coba sebuah for/in loop dalam sebuah contoh di bawah ini.

let dataDiri = {firstName: "Ammar", lastName: "Budiyanto", age: 24, address: "Jakarta"}
 
for(data in dataDiri){
 console.log(data, dataDiri[data])
}

For/of loop

Berbeda dengan for/in loop, for/of loop adalah versi for loop yang lebih simpel untuk melakukan perulangan terhadap struktur data yang bisa diiterasi seperti tipe data string dan array. Syntax for/of loop:

for (variable of dataIterable) {
// kode program yang akan dieksekusi
}

Hampir sama dengan for/in loop, di setiap perulangan, satu per satu dari nilai atau properti dari dataIterable akan didefinisikan ke dalam variable dalam for/of loop. Variable tersebut bisa dideklarasikan dengan const, let ataupun var. Proses perulangan berjalan sampai semua nilai atau properti dalam dataIterable selesai diproses. 

Contoh penggunaan for/of loop pada array:

const dataBuah = ["Jambu", "Apel", "Jeruk", "Melon", "Kurma"]
 
for (let buah of dataBuah) {
 console.log(buah)
}

Contoh penggunaan for/of loop pada string:

const namaKota = "DKI JAKARTA"
 
for (let x of namaKota) {
 console.log(x)
}

Penutup

Jadi untuk mereview materi yang telah kita bahas, untuk melakukan proses perulangan dalam bahasa pemrograman javascript kita bisa menggunakan for loop atau while loop. For loop memiliki tiga statement yang bersifat optional, yaitu inisialisasi, kondisi dan final expression. Inisialisasi biasanya digunakan untuk mendeklarasikan variabel. Bagian kondisi adalah bagian untuk pernyataan kondisi untuk menjalankan proses perulangan tersebut dan terakhir bagian final expression yang biasa digunakan untuk mengupdate variabel counter yang telah dideklarasikan pada bagian inisialisasi. Di dalam javascript terdapat dua jenis for loop yang telah disederhanakan, yaitu for/in loop untuk proses perulangan object dan for/of loop untuk proses perulangan pada struktur data yang bisa di iterasi.

Baik teman-teman, saya rasa cukup untuk materi for loops ini. Tetap semangat mengikuti Javascript Course dari Nusantech Academy.

Thank you and see you next time!

Quiz Time:

Hasil dari perulangan di bawah adalah:

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

a. Angka genap dari 1 sampai 15

b. Angka ganjil dari 1 sampai 15

c. Angka 1 sampai 15

d. Error

Hasil dari perulangan di bawah adalah:

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

a. Angka 0 sampai 100

b. Angka kelipatan 5 dalam rentang 5 sampai 100

c. Angka kelipatan 10 dalam rentang 10 sampai 100

d. Error