forEach, some, every, includes
Method array pendukung: iterasi dengan forEach, cek kondisi dengan some dan every, dan pencarian sederhana dengan includes. Keempatnya membuat kode validasi, filter izin, dan render daftar jauh lebih ekspresif daripada loop manual.
1. Analogi: Petugas Pemeriksa Daftar
Bayangkan kamu jadi petugas yang memegang daftar nama:
- forEach: seperti absensi. Kamu memanggil tiap nama satu per satu dan melakukan sesuatu untuk tiap orang, misalnya mencentang kehadirannya. Tidak ada pertanyaan, tidak ada jawaban, cuma aksi.
- some: seperti bertanya ke kelas, "Ada yang membawa payung?" Cukup SATU orang angkat tangan, jawabannya langsung "ya". Tidak perlu tanya semua.
- every: seperti bertanya, "Apakah SEMUA sudah mengumpulkan tugas?" Satu saja yang belum, jawabannya "tidak". Semua harus ya.
- includes: seperti mencari nama di daftar: "Apakah Budi ada di sini?" Jawabannya ya atau tidak.
Empat method ini menjawab empat pertanyaan berbeda tentang isi array, dan semuanya mengembalikan jawaban yang jelas tanpa kamu harus menulis loop manual.
2. Kenapa Method Ini Ada?
Tentu kamu bisa menulis semuanya dengan for biasa. Tapi bandingkan niat yang tersampaikan:
// Loop manual: pembaca harus menebak maksudmu
let adaRemed = false;
for (let i = 0; i < nilai.length; i++) {
if (nilai[i] < 65) { adaRemed = true; break; }
}
// Dengan some: maksudnya tertulis jelas
const adaRemed2 = nilai.some(n => n < 65);Method-method ini membuat niat kodemu terbaca langsung dari namanya. some berarti "apakah ada yang...", every berarti "apakah semua...", includes berarti "apakah daftar ini memuat...". Kode yang niatnya jelas lebih mudah dibaca, lebih mudah di-review, dan lebih sedikit bug.
3. Contoh Bertahap: Sederhana ke Realistis
Contoh 1, forEach untuk aksi per elemen. Ia menerima callback (elemen, index, array) dan tidak me-return apa-apa:
const buah = ["apel", "mangga", "jeruk"];
buah.forEach((b, i) => {
console.log((i + 1) + ". " + b);
});
// 1. apel
// 2. mangga
// 3. jerukforEach hanya untuk efek samping: mencetak, mengisi DOM, mengirim data. Kalau kamu butuh array BARU hasil transformasi, itu tugas map, bukan forEach.
Contoh 2 (realistis), validasi formulir dengan some dan every:
const jawabanKuis = [80, 90, 0, 75]; // 0 = belum dijawab
const adaYangKosong = jawabanKuis.some(n => n === 0);
console.log(adaYangKosong); // true
const semuaTerjawab = jawabanKuis.every(n => n > 0);
console.log(semuaTerjawab); // false
if (adaYangKosong) {
console.log("Masih ada soal yang belum dijawab!");
}Contoh 3 (realistis), cek hak akses dengan includes:
const peranDiizinkan = ["admin", "editor"];
const peranSaya = "viewer";
if (peranDiizinkan.includes(peranSaya)) {
console.log("Boleh masuk halaman editor");
} else {
console.log("Akses ditolak");
}Jauh lebih mudah dibaca daripada peranDiizinkan.indexOf(peranSaya) !== -1, kan?
4. Kesalahan Umum Pemula: SALAH vs BENAR
Kesalahan 1: memakai forEach untuk membuat array baru.
SALAH:
const angka = [1, 2, 3];
const hasil = angka.forEach(n => n * 2);
console.log(hasil); // undefined! forEach tidak me-return apa-apaBENAR: untuk transformasi pakai map:
const hasil = angka.map(n => n * 2); // [2, 4, 6]Kesalahan 2: mengira return atau break bisa menghentikan forEach.
SALAH:
buah.forEach(b => {
if (b === "mangga") return; // cuma skip iterasi ini, loop TETAP lanjut!
});forEach tidak bisa di-break. Kalau butuh berhenti di tengah, pakai for...of biasa, atau manfaatkan some/every yang otomatis berhenti cepat (short-circuit) begitu hasilnya sudah pasti.
BENAR:
for (const b of buah) {
if (b === "mangga") break; // benar-benar berhenti
console.log(b);
}Kesalahan 3: jebakan every pada array kosong.
console.log([].every(n => n > 0)); // true (!!)
console.log([].some(n => n > 0)); // falseevery pada array kosong selalu true karena tidak ada elemen yang melanggar (disebut "vacuous truth" di logika). Kalau validasimu memakai every pada data yang bisa kosong, pastikan array-nya tidak kosong dulu, atau bug validasi lolos diam-diam.
5. Ringkasan
forEach untuk aksi per elemen (tanpa return), some untuk "apakah ada yang...", every untuk "apakah semua...", dan includes untuk "apakah daftar ini memuat...". Pilih method yang namanya paling cocok dengan pertanyaanmu, dan kodemu akan terbaca seperti kalimat bahasa manusia. Ingat: transformasi pakai map, berhenti di tengah pakai for...of, dan waspadai every pada array kosong.
export default function App(): JSX.Element { return <h1>Hello world</h1> }
Tantangan
Validasi Umur
Diberi umur = [17, 20, 16, 22]. Pakai every untuk cek apakah semua >= 17 (boleh masuk), dan some untuk cek apakah ada yang di bawah 17. Pengecekan seperti ini adalah tulang punggung fitur nyata: validasi usia minimum pendaftar event, memastikan semua item keranjang masih stok sebelum checkout, atau memverifikasi semua syarat beasiswa terpenuhi sebelum formulir dikirim.
<!doctype html> <html> <head> <meta charset="utf-8" /> </head> <body> <h1>Halo JS</h1> <p>Buka console preview untuk melihat output.</p> <script src="index.js"></script> </body> </html>