Tujuan Belajar
Setelah pelajaran ini, kamu akan bisa:
- Membuat dan mengakses array
- Menggunakan method array:
push,pop,length,map,filter - Membuat object dan mengakses propertinya
- Menggabungkan array dan object
Materi Singkat
Selama ini kita menyimpan satu nilai per variabel. Bagaimana jika kita punya daftar 100 nama siswa? Tidak mungkin membuat 100 variabel berbeda. Solusinya: Array dan Object.
Array: Daftar Terurut
Array adalah kotak yang bisa menyimpan banyak nilai, berurutan dari indeks 0:
const buah = ["Apel", "Mangga", "Pisang"];
// [0] [1] [2]Mengakses elemen:
console.log(buah[0]); // "Apel"
console.log(buah[1]); // "Mangga"
console.log(buah[2]); // "Pisang"
console.log(buah[3]); // undefined (tidak ada)Properti dan method umum:
const nilai = [85, 92, 78, 65, 90];
console.log(nilai.length); // 5 — jumlah elemen
nilai.push(88); // tambah di akhir → [85,92,78,65,90,88]
const terakhir = nilai.pop(); // hapus & ambil elemen terakhir
nilai.unshift(70); // tambah di awal
const pertama = nilai.shift(); // hapus & ambil elemen pertama
// Mencari elemen
console.log(nilai.includes(92)); // true
console.log(nilai.indexOf(78)); // 2 (indeks dari 78)Method fungsional (sangat berguna):
const angka = [1, 2, 3, 4, 5];
// map — transformasi setiap elemen
const kuadrat = angka.map(x => x * x);
// [1, 4, 9, 16, 25]
// filter — ambil elemen yang memenuhi kondisi
const genap = angka.filter(x => x % 2 === 0);
// [2, 4]
// reduce — gabungkan semua elemen jadi satu nilai
const jumlah = angka.reduce((total, x) => total + x, 0);
// 15Object: Data Terstruktur
Object menyimpan data dalam pasangan key: value (seperti kamus):
const siswa = {
nama: "Budi Santoso",
umur: 21,
kota: "Surabaya",
aktif: true
};Mengakses properti:
// Dot notation (lebih umum)
console.log(siswa.nama); // "Budi Santoso"
console.log(siswa.umur); // 21
// Bracket notation (berguna jika key dinamis atau punya spasi)
console.log(siswa["kota"]); // "Surabaya"Mengubah dan menambah properti:
siswa.umur = 22; // ubah nilai
siswa.hobi = "Membaca"; // tambah properti baruMethod dalam object:
const kalkulator = {
nilai: 0,
tambah(angka) {
this.nilai += angka;
},
hasil() {
return this.nilai;
}
};
kalkulator.tambah(10);
kalkulator.tambah(5);
console.log(kalkulator.hasil()); // 15Array of Objects
Kombinasi paling umum — daftar banyak data terstruktur:
const mahasiswa = [
{ nama: "Andi", nilai: 88, jurusan: "Informatika" },
{ nama: "Budi", nilai: 72, jurusan: "Manajemen" },
{ nama: "Citra", nilai: 95, jurusan: "Informatika" },
];
// Akses
console.log(mahasiswa[0].nama); // "Andi"
console.log(mahasiswa[2].nilai); // 95
// Filter mahasiswa Informatika
const informatika = mahasiswa.filter(m => m.jurusan === "Informatika");
console.log(informatika.length); // 2
// Hitung rata-rata nilai
const total = mahasiswa.reduce((sum, m) => sum + m.nilai, 0);
const rata = total / mahasiswa.length;
console.log(`Rata-rata nilai: ${rata.toFixed(1)}`);Contoh Kode
// Sistem manajemen tugas sederhana
const tugas = [
{ id: 1, judul: "Belajar HTML", selesai: true },
{ id: 2, judul: "Belajar CSS", selesai: true },
{ id: 3, judul: "Belajar JavaScript", selesai: false },
{ id: 4, judul: "Buat Proyek Mini", selesai: false },
];
// Tampilkan semua tugas
console.log("=== SEMUA TUGAS ===");
tugas.forEach((t, index) => {
const status = t.selesai ? "✓" : "○";
console.log(`${status} ${index + 1}. ${t.judul}`);
});
// Hitung statistik
const sudahSelesai = tugas.filter(t => t.selesai).length;
const belumSelesai = tugas.filter(t => !t.selesai).length;
const persentase = (sudahSelesai / tugas.length * 100).toFixed(0);
console.log(`\nProgress: ${sudahSelesai}/${tugas.length} (${persentase}%)`);
// Cari tugas yang belum selesai
const belumDikerjakan = tugas.filter(t => !t.selesai);
console.log("\nTugas yang harus dikerjakan:");
belumDikerjakan.forEach(t => console.log(`- ${t.judul}`));Tugas Kecil
Buat sistem nilai kelas sederhana:
- Buat array
const kelasberisi minimal 5 object siswa, masing-masing punya:nama,nilai(angka 0-100), dankehadiran(persentase 0-100) - Cetak daftar lengkap semua siswa
- Gunakan
.filter()untuk mendapat daftar siswa yang lulus (nilai >= 70) - Gunakan
.filter()untuk siswa dengan kehadiran < 75% (terancam tidak lulus) - Hitung nilai rata-rata seluruh kelas menggunakan
.reduce() - Tampilkan siswa dengan nilai tertinggi (tanpa sort, gunakan loop atau reduce)