Array dan Object di JavaScript: Looping, map(), filter(), dan reduce()

Dalam JavaScript, array dan object adalah struktur data paling penting untuk menyimpan dan mengelola data.

• Array digunakan untuk menyimpan kumpulan data berurutan, seperti daftar nama atau angka.

• Object digunakan untuk menyimpan data dengan pasangan key-value, seperti profil pengguna.

Contoh dasar:

// Array
const buah = ["Apel", "Jeruk", "Mangga"];

// Object
const user = {
  nama: "Arvi",
  umur: 25,
  pekerjaan: "Programmer"
};

Namun, saat data makin besar, kamu butuh looping dan metode bawaan agar lebih efisien. Mari kita bahas satu per satu.

Looping di Array dan Object

1. Looping Array

Untuk menampilkan semua elemen array, kamu bisa menggunakan beberapa cara:

const buah = ["Apel", "Jeruk", "Mangga", "Pisang"];

// for biasa
for (let i = 0; i < buah.length; i++) {
  console.log(buah[i]);
}

// for...of
for (let item of buah) {
  console.log(item);
}

// forEach
buah.forEach((item, index) => {
  console.log(`${index + 1}. ${item}`);
});

✅ Tips:
forEach() lebih ringkas dan cocok untuk menampilkan atau memproses setiap elemen array.

2. Looping Object

Untuk object, gunakan for…in untuk mengakses setiap properti:

const user = {
  nama: "Budi",
  umur: 30,
  kota: "Bandung"
};

for (let key in user) {
  console.log(`${key}: ${user[key]}`);
}

Gunakan Object.keys() atau Object.entries() jika ingin hasil dalam bentuk array.

Object.entries(user).forEach(([key, value]) => {
  console.log(`${key} = ${value}`);
});

Metode Penting pada Array: map(), filter(), dan reduce()

Sekarang kita masuk ke bagian lanjutan dan modern JavaScript — tiga metode penting yang sering digunakan di proyek nyata.

1. map() — Membuat Array Baru dari Setiap Elemen

map() digunakan untuk mengubah setiap elemen array dan menghasilkan array baru.

const angka = [1, 2, 3, 4, 5];

const kuadrat = angka.map(num => num * num);

console.log(kuadrat); // [1, 4, 9, 16, 25]

Cocok digunakan untuk:

• Membuat data baru berdasarkan array lama

• Mengubah format data (misalnya uppercase, harga + pajak, dsb)

2. filter() — Menyaring Elemen Sesuai Kondisi

filter() membuat array baru yang hanya berisi elemen yang memenuhi syarat.

const angka = [10, 25, 30, 45, 50];

const diAtas30 = angka.filter(num => num > 30);

console.log(diAtas30); // [45, 50]

Contoh nyata:

• Menyaring produk dengan harga tertentu

• Memilih user aktif dari daftar user

3. reduce() — Menghitung Nilai Tunggal dari Semua Elemen

reduce() digunakan untuk menggabungkan semua nilai dalam array menjadi satu hasil akhir.

const angka = [10, 20, 30, 40];

const total = angka.reduce((acc, current) => acc + current, 0);

console.log(total); // 100

Contoh penggunaan:

• Menjumlahkan total belanja

• Menghitung rata-rata nilai siswa

• Menyatukan data menjadi string

Studi Kasus: Mengelola Data Produk

Misalnya kamu punya daftar produk:

const produk = [
  { nama: "Laptop", harga: 8000000 },
  { nama: "Keyboard", harga: 300000 },
  { nama: "Mouse", harga: 150000 },
  { nama: "Monitor", harga: 2000000 }
];

a. Tambahkan pajak 10% ke semua harga

const produkDenganPajak = produk.map(p => ({
  ...p,
  harga: p.harga * 1.1
}));

console.log(produkDenganPajak);

b. Ambil produk di atas 500 ribu

const produkMahal = produk.filter(p => p.harga > 500000);
console.log(produkMahal);

c. Hitung total harga semua produk

const totalHarga = produk.reduce((acc, p) => acc + p.harga, 0);
console.log(`Total harga: Rp${totalHarga.toLocaleString()}`);

Kombinasi map(), filter(), dan reduce()

Ketiganya bisa digabung untuk operasi kompleks:

const totalProdukMahal = produk
  .filter(p => p.harga > 500000)
  .map(p => p.harga)
  .reduce((a, b) => a + b, 0);

console.log(`Total produk mahal: Rp${totalProdukMahal.toLocaleString()}`);

Ini sering digunakan pada sistem e-commerce, laporan keuangan, atau pengolahan data API.

Kesimpulan

Metode seperti map(), filter(), dan reduce() membuat manipulasi array lebih cepat, efisien, dan bersih. Sementara looping pada array dan object membantu menampilkan atau memproses data secara dinamis.

Kesimpulan utama:

• Gunakan map() → untuk mengubah data.

• Gunakan filter() → untuk menyaring data.

• Gunakan reduce() → untuk menghitung hasil akhir.

Dengan menguasai konsep ini, kamu sudah satu langkah lebih dekat menjadi JavaScript Developer yang efisien dan modern.