Belajar Javascript : Perulangan Pada Javascript

Perulangan / Looping merupakan sebuah konsep yang penting dalam pemrograman, kita akan sangat sering jumpai penggunaan perulangan ketika membuat sebuah program yang kompleks, khusunya menggunakan Javascript.

Bayangkan ketika kita ingin mencetak angka dari 1 sampai 100 menggunakan console.log tentu hal ini akan memakan banyak waktu bukan??? untuk itu perulangan hadir.

Perulangan memungkinkan eksekusi berulang dari serangkaian instruksi berdasarkan instruksi atau kondisi tertentu. Di dalam Javascript, terdapat beberapa jenis perulangan yang bisa kita gunakan sesuai dengan kebutuhan kita. Sehingga kita tidak perlu menulis hal yang sama berkali-kali

Secara umum perulangan terbagi menjadi dua yaitu, Counted Loop dan Uncounted Loop. Dari namanya dapat diartikan bahwa Counted Loop merupakan perulangan yang sudah diketahui / terhitung banyak perulangan yang diinginkan, sedangkan Uncounted Loop adalah perulangan yang belum diketahui jumlah perulangan yang ingin dilakukan.

Yuk mari kita lihat masing-masing perulangan yang ada pada Javascript.

1. Perulangan For

Perulangan for termasuk ke dalam counted loop, for digunakan ketika kita mengetahui jumlah perulangan yang ingin kita lakukan.

Struktur dasar dari penggunaan for seperti berikut:

for(inisiasi variabel; kondisi; perubahan nilai variabel) {
  // blok kode yang ingin diulang
}

Mari kita lihat contohnya:

for(let i = 1; i < 11; i++) {
  console.log(`Angka: ${i}`)
}

Output dari program di atas akan menampilkan angka dari 1 sampai dengan 10.

Angka 1
Angka 2
Angka 3
Angka 4
Angka 5
Angka 6
Angka 7
Angka 8
Angka 9
Angka 10

Kita tidak perlu menulis console.log sebanyak 10 kali, cukup gunakan sintaks console.log di dalam for loop. Mari kita bedah kode di atas.

1. Variabel i sebagai index perulangan. Pada kode di atas kita menginisiasi nilai dari i dimulai dari 1.
2. Operator pembanding, yang akan melakukan pengecekan apakah perulangan sudah mencapai batas yang diinginkan atau belum. Jika sudah maka perulangan akan dihentikan, pada kasus di atas kita ingin nilai dari i kurang dari 11.
3. Increment/decrement, pada tahap ini kita melakukan perubahan terhadap nilai dari i baik itu penambahan atau pengurangan. Pada kasus diatas kita menambah nilai i dengan 1 setiap akhir dari perulangan hingga mencapai kondisi pada point 2.

Mudahnya, potongan kode di atas dapat kita arti kan dengan bahasa "selama nilai i adalah 1 dan nilai i kurang dari 11 maka tampilkan nilai i"

2. Perulangan For...Of

for...of sendiri mulai diperkenalkan pada ECMAScript 2015 (ES6). Perulangan menggunakan for of jauh lebih sederhana dan mudah dibandingkan dengan for loop biasa.

Penggunaannya tidak membutuhkan banyak statement untuk melakukan perulangan pada array. Bentuk dari for of seperti berikut:

for (item of arrayElement) {
  // blok kode yang ingin dijalankan
}

Mari kita lihat contoh penggunaannya:

const numbers = [1,2,3,4,5,6,7,8,9,10]

for (const number of numbers) {
  console.log(`Angka: ${number}`)
}

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

Jauh lebih mudah bukan???

Dengan menggunakan for...of setiap kali melakukan looping maka nilai dari array akan di inisiasikan pada variabel yang telah kita tentukan, pada contoh di atas nilai akan di inisiasikan ke dalam variabel number. Selain itu, jumlah perulangan yang ingin dilakukan juga akan menyesuaikan dengan ukuran / panjang dari array tersebut.

3. Perulangan For In

For in bisa dikatakan serupa dengan for of tetapi tak sama. Apa yang membuat keduanya berbeda???

Sebelum itu mari kita lihat contoh penggunaan for...in terlebih dahulu agar lebih mudah kita melihat perbedaannya, penggunaan sintaks pada perulangan for...in sama seperti pada for...of.

const numbers = [1,2,3,4,5,6,7,8,9,10]

for (const number in numbers) {
  console.log(number)
}

Jika kita jalankan kode di atas maka akan menampilkan angka 0 sampai 9. Kenapa??? Padahal kan isi array kita adalah angka 1 sampai 10...

Inisiasi variable yang dilakukan pada for in tidak sama seperti pada for of. Jika pada for of setiap perulangan akan menginisiasi setiap nilai di dalam array ke dalam variabel maka pada for in setiap perulangan akan menginisiasi nilai index dari tiap element yang ada di dalam array. Hal tersebut yang menyebabkan mengapa nilai yang ditampilkan adalah 0 sampai 9, karena 0 adalah index pertama dari array yang kita miliki. Kita akan melihat tentang array di artikel selanjutnya.

4. Perulangan While

Berbeda dengan perulangan for yang termasuk ke dalam counted loop, perulangan menggunakan while termasuk ke dalam uncounted loop, tetapi while juga dapat berupa counted loop tergantung kebutuhan kita.

Sebagai perulangan uncounted loop, perulangan while akan menjalankan semua blok kode di dalamnya selama kondisi yang diberikan bernilai benar (true), tanpa harus tahu berapa banyak perulangan yang akan dilakukan.

Mari kita lihat contohnya:

let i = 1;
while (i < 11) {
  console.log(`Angka: ${i}`)
  i++
}

Dari contoh di atas dapat kita lihat bahwa perulangan menggunakan while tidak tergantung dengan variabel iterasi seperti ada for loop. Meskipun while dapat melakukan perulangan yang sama seperti for, akan tetapi while lebih cocok digunakan ketika kita tidak tahu persis berapa banyak perulangan yang ingin dilakukan.

5. Perulangan Do/While

Sama hal yang dengan perulangan for...in yang serupa dengan for...of, begitu juga dengan perulangan do/while. Do/while mirip dengan perulangan while tetapi memiliki perbedaan.

Do/while akan menjalankan blok kode di dalamnya setidaknya satu kali sebelum mengecek kondisi perulangan. Pada while kondisi perulangan akan di cek sebelum blok kode di dalamnya dijalankan, sedangkan pada do/while akan mengecek kondisi setelah blok kode di dalamnya dijalankan. Hal tersebut yang menyebabkan do/while akan mengeksekusi blok kode di dalamnya setidaknya satu kali.

let i = 1;
do {
  console.log(`Angka: ${i}`)
  i++
} while (i < 11)

Contoh di atas akan mencetak angka 1 sampai 10 seperti pada contoh-contoh sebelumnya. Mari kita lihat contoh lainnya:

let i = 1;
do {
  console.log(`Angka: ${i}`)
  i++
} while (i > 11)

/**
 * Output:
 * Angka: 1
 * */

Dapat dilihat dari contoh di atas walaupun kondisi perulangan tidak terpenuhi, yakni i harus lebih besar dari 11, sedangkan nilai i adalah 1. Tetapi blok kode di dalamnya akan tetap dijalankan satu kali.

6. Infinite Loop

Infinite loop adalah hal yang harus kita hindari ketika membuat perulangan. Infinite loop adalah kondisi yang terjadi ketika kita stucked di dalam perulangan, artinya perulangan terus berjalan dan tidak pernah berakhir hingga menyebabkan program yang kita buat crash.

Bagaimana infinite loop bisa terjadi??? Infinite loop terjadi karena adanya kesalahan kita yang menyebabkan kondisi perulangan selalu bernilai benar (true) yang mengakibatkan perulangan tidak pernah berhenti.

Mari kita lihat contoh infinite loop:

let i = 1;
while (true) {
  console.log(`Angka: ${i}`)
  i++
}

Perhatian: jangan coba-coba menjalankan kode di atas, karena akan terus mencetak angka tanpa henti.

Contoh kode di atas akan menyebabkan kondisi infinite loop karena kita membuat kondisi perulangan selalu bernilai true. Berikut contoh lainnya:

let i = 1;
while (i < 5) {
  console.log(`Angka: ${i}`)
}

Perhatian: jangan coba-coba menjalankan kode di atas, karena akan terus mencetak angka 1 tanpa henti.

Kode di atas akan terus mencetak Angka: 1 tanpa henti, kenapa???

Karena kita tidak pernah mengubah nilai dari i. Nilai i akan selalu 1 setiap kali perulangan dilakukan yang menyebabkan kodisi i < 5 selalu bernilai true.

for (let i = 1; i < 11; i=1) {
  console.log(`Angka: ${i}`)
}

Perhatian: jangan coba-coba menjalankan kode di atas, karena akan terus mencetak angka 1 tanpa henti.

Kode di atas juga akan menyebabkan infinite loop karena kita selalu membuat variabel i bernilai 1 setiap akhir perulangan yang menyebabkan kondisi i < 11 akan selalu bernilai true.

Kesimpulan

Perulangan merupakan hal dasar yang penting dan wajib diketahui oleh programmer karena perulangan sangat sering digunakan dalam pembuatan program atau aplikasi dari yang sederhana hingga kompleks. Tetapi harus berhati-hati dan waspada terhadap infinite loop, karena hal tersebut akan membuat program atau aplikasi yang kita kembangkan akan menjadi crash dan tidak bisa digunakan.

Ada beberapa perulangan yang dapat kita gunakan sesuai kebutuhan program kita, jika kita tahu persis berapa banyak perulangan yang ingin kita lakukan kita dapat menggunakan for loop, tetapi jika kita tidak tahu berapa banyaknya perulangan yang akan kita lakukan kita dapat menggunakan while.

Sampai jumpa di artikel-artikel selanjutnya... 😄