Perulangan JavaScript: Mengulang Aksi pada Datamu

Bayangkan kamu punya daftar berisi 100 produk yang harus ditampilkan. Tentu kamu nggak akan mengetik 100 baris kode satu per satu. Yang kamu lakukan adalah menulis kode penampilannya sekali saja, lalu bilang ke komputer: “kerjakan ini untuk setiap item di daftar.” Nah, itulah yang disebut perulangan (loop) — cara untuk menjalankan blok kode yang sama berkali-kali, dan kebetulan inilah salah satu hal yang paling dikuasai komputer.

Perulangan itu pasangan yang pas banget buat array yang baru kamu pelajari. Sebagian besar waktu, perulangan adalah cara kamu menyusuri isi array dan mengerjakan sesuatu untuk tiap itemnya. Yuk, kita kenalan dengan jenis-jenis utamanya.

For loop

Perulangan yang paling klasik adalah for loop. Sekilas memang kelihatan rame dan bikin pusing, tapi sebenarnya isinya cuma tiga bagian kecil yang mengatur berapa kali kodenya dijalankan:

for (let i = 0; i < 5; i++) {
  console.log(i);
}
// mencetak: 0  1  2  3  4

Ketiga bagian di dalam kurung, yang dipisahkan oleh titik koma, adalah:

1. Awal: let i = 0 — siapkan variabel penghitung, mulai dari angka 0.
2. Kondisi: i < 5 — selama ini masih benar, perulangan terus jalan.
3. Langkah: i++ — tiap selesai satu putaran, penghitungnya ditambah 1.

Jadi di putaran pertama i bernilai 0, lalu 1, 2, 3, 4 — dan perulangannya berhenti begitu i menyentuh angka 5 (karena 5 < 5 itu salah). Nama i sendiri singkatan dari “index”, dan ini memang nama yang lazim dipakai untuk penghitung perulangan. Tinggal ubah angka-angkanya, dan kamu bisa menentukan persis berapa kali perulangan itu dijalankan.

Menelusuri array dengan for

Di sinilah perulangan dan array benar-benar bersatu. Karena index array selalu mulai dari 0 dan berhenti di length - 1, for loop jadi pasangan yang pas banget untuk mendatangi setiap item satu per satu:

const buah = ["apel", "pisang", "ceri"];

for (let i = 0; i < buah.length; i++) {
  console.log(buah[i]);
}
// mencetak: apel  pisang  ceri

Penghitung i jalan dari 0, 1, lalu 2 — dan buah[i] mengambil tiap item secara bergantian. Dengan memakai buah.length sebagai kondisi, perulangannya otomatis menyesuaikan diri dengan ukuran array, mau isinya cuma 3 item atau sampai 3000 sekalipun. Inilah pola paling mendasar untuk menyusuri sebuah daftar.

While loop

Bentuk while loop lebih sederhana: ia akan terus mengulang selama kondisinya masih benar. Pakai yang ini kalau kamu belum tahu dari awal berapa kali perulangannya bakal jalan:

let hitung = 0;

while (hitung < 5) {
  console.log(hitung);
  hitung++;
}

Hasilnya sama persis dengan for loop pertama tadi, cuma bagian-bagiannya dipisah-pisah: penghitung disiapkan sebelum perulangan, kondisinya dicek di bagian atas, dan penghitungnya diperbarui di dalam. while paling berguna ketika banyaknya pengulangan itu bergantung pada sesuatu yang baru ketahuan saat perulangan sedang berjalan, bukan jumlah yang sudah pasti dari awal.

Cara modern: for…of

JavaScript modern punya jenis perulangan yang lebih rapi untuk menyusuri array, namanya for...of. Lewat cara ini, tiap item langsung diberikan ke kamu — tanpa perlu repot mengurus penghitung:

const buah = ["apel", "pisang", "ceri"];

for (const item of buah) {
  console.log(item);
}
// mencetak: apel  pisang  ceri

Bacanya begini: “untuk setiap item dari buah.” Di tiap putaran, item berisi elemen berikutnya dari array. Nggak ada index, nggak ada length, nggak ada i++ — yang ada cuma item-nya saja. Kalau kamu memang cuma mau mengerjakan sesuatu pada tiap item dan nggak butuh index-nya, for...of ini lebih enak dibaca dan lebih kecil kemungkinan salahnya dibanding for loop klasik. Pilihan default yang bagus banget untuk menelusuri array.

Method array: forEach dan map

Array juga punya method bawaan yang melakukan perulangan untuk kamu, dan method-method ini sering banget dipakai di kode modern. Yang paling sederhana adalah forEach, yang menjalankan sebuah fungsi untuk setiap item:

const buah = ["apel", "pisang", "ceri"];

buah.forEach((item) => {
  console.log(item);
});

Kamu memberikan sebuah fungsi ke forEach (di sini berupa arrow function), lalu forEach memanggil fungsi itu sekali untuk tiap item sambil mengirimkan item-nya. Di sinilah arrow function yang dibahas di artikel fungsi mulai kerasa gunanya — nantinya kamu bakal sering banget menyodorkan fungsi-fungsi kecil ke method array.

Yang bahkan lebih praktis lagi adalah map. Method ini menyusuri array, lalu membuat array baru dari hasil pengolahannya:

const angka = [1, 2, 3];
const ganda = angka.map((n) => n * 2);

console.log(ganda);   // [2, 4, 6]

map mengambil tiap angka, menjalankan fungsi kamu pada angka itu, lalu menampung semua nilai yang dikembalikan ke dalam array baru. Di contoh ini, ia menggandakan tiap angka. map termasuk salah satu alat yang paling sering dipakai di JavaScript beneran — setiap kali kamu mau mengubah satu daftar menjadi daftar lain (misalnya array harga jadi array string yang sudah diformat, atau array data jadi array HTML, dan sebagainya), map inilah jawabannya.

Contoh praktis

Sekarang kita gabungkan perulangan dengan pola array-berisi-objek dari artikel sebelumnya untuk menghitung total belanja di keranjang:

const items = [
  { nama: "Keyboard", harga: 250000 },
  { nama: "Mouse", harga: 120000 },
  { nama: "Monitor", harga: 1500000 },
];

let total = 0;

for (const item of items) {
  total += item.harga;
}

console.log(total);   // 1870000

Perulangannya mendatangi tiap objek produk satu per satu, dan total += item.harga menjumlahkan harganya ke dalam total yang terus bertambah. Begitu perulangannya selesai, total sudah berisi jumlah semua harga. Pola seperti ini — susuri sebuah daftar, lalu jumlahkan atau olah tiap itemnya — termasuk yang paling sering kamu lakukan di pemrograman beneran. Entah itu menjumlahkan harga, menampilkan produk, atau menyaring sebuah daftar, hampir semuanya berawal dari sebuah perulangan.

Penutup

Berkat perulangan, kodemu bisa menangani data sebanyak apa pun tanpa harus menulis ulang langkah yang sama berkali-kali:

• for loop terdiri dari tiga bagian — awal, kondisi, langkah (for (let i = 0; i < n; i++)) — dan paling pas dipakai saat kamu butuh index.
• while loop mengulang selama kondisinya masih benar; cocok dipakai saat jumlah pengulangannya belum ketahuan dari awal. Pastikan ia selalu punya jalan untuk berhenti, kalau tidak kamu bakal kena perulangan tak terbatas.
• for...of adalah cara modern yang rapi untuk mendatangi tiap item array secara langsung, tanpa perlu penghitung.
• Method array forEach (kerjakan sesuatu pada tiap item) dan map (bikin array baru hasil olahan) melakukan perulangan untuk kamu, dan keduanya ada di mana-mana di kode modern.
• Menyusuri array berisi objek untuk mengolah atau menjumlahkan tiap itemnya adalah pola sehari-hari yang sangat mendasar.

Sekarang kamu sudah pegang semua fondasi inti pemrograman: variabel, tipe, operator, kondisional, fungsi, array, objek, dan perulangan. Dua artikel berikutnya akan berbalik arah ke luar — menyambungkan semua logika ini ke halaman web yang sebenarnya. Yang pertama adalah DOM, yang memungkinkan JavaScript membaca sekaligus mengubah HTML di sebuah halaman. Di situlah semua yang sudah kamu pelajari mulai benar-benar terlihat pengaruhnya di layar yang dilihat pengguna.