Perulangan — for, for...of, dan for...in

Kalau ingin menampilkan harga setiap barang pesanan satu per baris tanpa loop, kamu harus menulis baris yang sama 3 kali untuk 3 barang dan 10 kali untuk 10 barang. Jumlah barangnya bergantung pada data, jadi kamu tidak bisa tahu sebelumnya berapa baris yang dibutuhkan.

Artikel ini membahas for yang mengulang sambil menghitung, for...of yang memberikan element satu per satu, dan for...in yang menelusuri key.

Mengulang Kode Sebanyak Jumlah Item — Tiga Expression di for

Misalnya kamu ingin menampilkan nama barang dari sebuah pesanan, satu per baris. Kalau kamu menuliskannya satu per satu, mulai dari console.log(orderLines[0]), kamu harus menambah baris begitu pesanannya bertambah jadi 4 item, dan mengubah kode setiap kali jumlahnya berubah.

Loop for (statement yang mengulang kode yang sama sambil menghitung) menerima tiga expression di dalam tanda kurung yang dipisahkan titik koma, sedangkan kode yang ingin diulang ditulis di dalam kurung kurawal. Isi kurung kurawal itu disebut body. Dari kiri ke kanan, ketiga expression itu adalah inisialisasi, kondisi, dan update: kondisi dicek sebelum masuk ke body, sedangkan update dijalankan setelah body.

i++ artinya sama dengan i = i + 1. Karena value-nya berubah di setiap putaran, i dideklarasikan dengan let.

const orderLines = ["Mug", "Buku tulis", "Pulpen"];   // nama barang di pesanan

// Mulai i dari 0 dan tambah 1 dengan i++ sampai mencapai jumlah item
for (let i = 0; i < orderLines.length; i++) {
  // Index dimulai dari 0, jadi tampilkan i + 1 supaya hitungan mulai dari item ke-1
  console.log(`Item ke-${i + 1}: ${orderLines[i]}`);
}
// Item ke-1: Mug
// Item ke-2: Buku tulis
// Item ke-3: Pulpen

console.log(`Item ditampilkan: ${orderLines.length}`);   // Item ditampilkan: 3

Pengecekan kondisi, eksekusi body, dan update dihitung sebagai satu putaran (iterasi). Karena update dijalankan setelah body, value i selalu sama dengan berapa kali body sudah selesai dijalankan, sehingga di putaran pertama body berjalan dengan i yang masih 0.

Tabel di bawah menunjukkan value i dan hasil pengecekan kondisi di setiap putaran.

Membaca di Luar Batas Array Menghasilkan undefined

Kalau kondisinya kamu tulis sebagai i <= orderLines.length, ada satu putaran tambahan di akhir yang membaca orderLines[3], yaitu element yang tidak ada. Element di luar batas array bernilai undefined, jadi yang tampil adalah "Item ke-4: undefined", dan kalau loop-nya menjumlahkan harga, hasilnya menjadi NaN. Jalankan loop hanya selama index lebih kecil dari jumlah item.

Jumlahkan harga barang di keranjang belanja. Array harga unitPrices sudah dideklarasikan.

① Siapkan variabel untuk total dengan value awal 0.

② Pakai for untuk menghitung naik dari 0, lalu tambahkan setiap harga ke total.

③ Tampilkan total dengan format "Total: ◯◯ yen".

④ Bagi dengan jumlah barang untuk mendapatkan rata-rata, bulatkan ke bawah, lalu tampilkan dengan format "Rata-rata: ◯◯ yen".

(Kalau berjalan dengan benar, penjelasan akan muncul.)

Mengambil Element Secara Langsung — for...of dan entries

Misalnya kamu ingin memproses daftar nomor pesanan yang menunggu dikirim, satu per satu. Dengan for, kamu harus mendeklarasikan variabel index, menulis kondisi dan update, lalu membaca tiap element dengan orderIds[i] — dan kalau index-nya salah ketik, element yang terbaca pun salah.

for...of (statement yang mengambil element dari array atau iterable lain satu per satu dan memasukkannya ke variabel) ditulis sebagai for (const orderId of orderIds); di dalam tanda kurung cukup ada deklarasi variabel dan array-nya.

Kalau kamu juga butuh posisinya, lakukan loop pada orderIds.entries(). Di setiap putaran, kamu mendapat pasangan seperti [0, "A-1001"], yang bisa kamu pecah dengan kurung siku menjadi [index, orderId].

const orderIds = ["A-1001", "A-1002", "A-1003"];   // nomor pesanan yang menunggu dikirim

// orderId berisi elemennya langsung (tidak ada index sama sekali)
for (const orderId of orderIds) {
  console.log(`Menunggu dikirim: ${orderId}`);
}
// Menunggu dikirim: A-1001 … (3 baris)

// Kalau index juga dibutuhkan, ambil pasangannya dari entries()
for (const [index, orderId] of orderIds.entries()) {
  console.log(`#${index + 1}: ${orderId}`);
}
// #1: A-1001
// #2: A-1002
// #3: A-1003

Cara kerja const [index, orderId] sama dengan destructuring array yang dibahas di artikel destructuring: index masuk ke posisi pertama dan element ke posisi kedua. Variabel baru dibuat di setiap putaran, jadi variabel loop for...of bisa dideklarasikan dengan const tanpa memicu error reassignment.

Cari pesanan yang belum sampai dari daftar status pengiriman. Array deliveries sudah dideklarasikan; setiap pesanan punya nomor pesanan (id) dan status.

① Pakai for...of untuk mengambil pesanan satu per satu, lalu tampilkan masing-masing dengan format "A-1001: Diterima".

② Lakukan loop sekali lagi, kali ini sambil mengambil posisinya, lalu tampilkan hanya pesanan yang belum diterima dengan format "#2 A-1002: Dalam perjalanan".

③ Hitung berapa pesanan yang ditampilkan di ②, lalu di akhir tampilkan "Belum diterima: ◯".

Menelusuri Key — for...in dan Alasan Tidak Memakainya di Array

Kadang kamu ingin menampilkan nama key dan value-nya berdampingan, misalnya untuk profil member. Kamu bisa mengubah key-nya jadi array dengan Object.keys(profile) lalu melakukan loop dengan for...of, tapi kalau yang kamu butuhkan hanya menelusuri key, ada cara yang lebih singkat.

for...in (statement yang menelusuri key sebuah object satu per satu) ditulis sebagai for (const key in profile). Yang masuk ke variabel adalah key dalam bentuk string, bukan value-nya, jadi value dibaca dengan bracket notation, seperti profile[key].

const profile = { displayName: "Budi", plan: "premium", posts: 12 };

// key berisi key dalam bentuk string (bukan value)
for (const key in profile) {
  console.log(`${key}: ${profile[key]}`);
}
// displayName: Budi
// plan: premium
// posts: 12

// Di array, index datang dalam bentuk string
const stockCounts = [5, 0, 12];
for (const key in stockCounts) {
  console.log(`${typeof key} / ${key + 1}`);
}
// string / 01
// string / 11
// string / 21   ← digabung sebagai string, bukan dijumlahkan sebagai number

Kalau kamu hanya membaca element, seperti stockCounts[key], string "1" tetap bisa dipakai untuk mengambil value-nya. Kamu bisa mengonversinya dengan Number(key) supaya bisa dipakai dalam perhitungan, tapi untuk element array, lebih sederhana memilih jenis loop lain sejak awal. Tabel di bawah menunjukkan kapan memakai masing-masing dari ketiganya.

Object Tidak Bisa Di-loop dengan for...of

Kalau kamu menaruh object di sebelah kanan of, seperti for (const item of profile), eksekusi berhenti dengan TypeError: profile is not iterable. Object biasa tidak iterable: object tidak punya cara untuk memberikan isinya satu per satu. Kalau value-nya juga perlu diproses berurutan, ubah dulu object-nya jadi array dengan Object.entries.

Di halaman edit profil, bandingkan profil sebelum dan sesudah disimpan, lalu tampilkan hanya field yang berubah. before (value lama) dan after (value baru) sudah dideklarasikan.

① Siapkan variabel dengan value awal 0 untuk menghitung field yang berubah.

② Pakai for...in untuk menelusuri key dari before satu per satu.

③ Baca value baru dengan key yang sama, lalu untuk field yang value-nya berbeda, tampilkan dengan format "city: Yokohama -> Kawasaki" dan hitung jumlahnya.

④ Di akhir, tampilkan "Field yang berubah: ◯".

Menampilkan Semua Kombinasi — Loop Dalam dan Loop Luar

Misalnya kamu ingin menampilkan produk yang dijual di setiap toko, sebagai daftar semua kombinasi toko dan produk. Satu loop hanya bisa menelusuri toko atau produk, tidak bisa keduanya sekaligus. Selain itu, jumlah toko maupun jumlah produknya sama-sama bergantung pada data.

Kamu bisa menaruh loop lain langsung di dalam body sebuah loop. Loop dalam berjalan sampai selesai di setiap putaran loop luar, jadi jumlah eksekusi body loop dalam adalah jumlah putaran luar dikali jumlah putaran dalam. Loop dalam juga bisa langsung membaca variabel loop luar.

const stores = ["Shibuya", "Yokohama"];
const products = ["Mug", "Buku tulis"];

// Di setiap putaran loop luar, loop dalam berjalan sampai selesai
for (const store of stores) {
  for (const product of products) {
    console.log(`${store} / ${product}`);
  }
}
// Shibuya / Mug
// Shibuya / Buku tulis
// Yokohama / Mug
// Yokohama / Buku tulis

for...of bagian dalam mulai lagi dari awal products setiap kali putaran luar berganti, jadi selama store masih sama, hanya product yang berganti. Variabel yang dideklarasikan di awal body loop luar juga dibuat ulang di setiap putaran luar. Aturan tentang bagaimana kurung kurawal membatasi tempat sebuah variabel bisa dipakai dibahas di artikel tentang scope.

Jumlahkan harga item di setiap pesanan. Array orders sudah dideklarasikan; setiap pesanan punya nomor pesanan (id) dan array harga item (prices).

① Pakai loop luar untuk menelusuri pesanan satu per satu.

② Siapkan variabel subtotal untuk setiap pesanan supaya kembali ke 0 setiap kali pesanan berganti.

③ Pakai loop dalam untuk menelusuri harga di pesanan itu dan tambahkan masing-masing ke subtotal.

④ Setelah loop dalam, tampilkan baris dengan format "A-1001: 2 barang / 1760 yen".