Data dan Halaman Web · Pelajaran 8 dari 10
Objek
9 menit baca · BelajarCode
Objek menyimpan pasangan properti: nilai, mirip dictionary di Python.
1const siswa = {2 nama: "Rani",3 kelas: "XI-2",4 nilai: 88,5};67console.log(siswa.nama);8console.log(siswa["kelas"]);9siswa.nilai = 91;10siswa.ekskul = "Robotik";11delete siswa.kelas;12console.log(siswa);Rani
XI-2
{"nama":"Rani","nilai":91,"ekskul":"Robotik"}Properti diakses dengan titik (siswa.nama) atau kurung siku (siswa["kelas"]). Kurung siku dipakai jika nama propertinya disimpan di variabel.
Metode dan this
Objek juga bisa punya fungsi, yang disebut metode. Di dalam metode, this menunjuk objek itu sendiri.
1const rekening = {2 pemilik: "Bima",3 saldo: 50000,4 setor(jumlah) {5 this.saldo += jumlah;6 return this.saldo;7 },8};910rekening.setor(25000);11console.log(`${rekening.pemilik}: Rp${rekening.saldo}`);Bima: Rp75000
Menelusuri objek
1const harga = { kopi: 8000, teh: 6000, roti: 12000 };2console.log(Object.keys(harga));3for (const [menu, h] of Object.entries(harga)) {4 console.log(`${menu}: ${h}`);5}["kopi","teh","roti"] kopi: 8000 teh: 6000 roti: 12000
Array berisi objek
Data nyata sering berbentuk array berisi objek, misalnya data dari server.
1const kelas = [2 { nama: "Andi", nilai: 78 },3 { nama: "Bela", nilai: 92 },4 { nama: "Citra", nilai: 85 },5];67const peringkat = [...kelas].sort((a, b) => b.nilai - a.nilai);8peringkat.forEach((s, i) => console.log(`${i + 1}. ${s.nama} ${s.nilai}`));910const { nama, nilai } = peringkat[0];11console.log(`Terbaik: ${nama} dengan nilai ${nilai}`);1. Bela 92 2. Citra 85 3. Andi 78 Terbaik: Bela dengan nilai 92
Baris const { nama, nilai } = peringkat[0]; disebut destructuring: mengambil beberapa properti sekaligus ke dalam variabel.
JSON
JSON adalah format teks untuk bertukar data, bentuknya mirip objek JavaScript. Data dari server hampir selalu dikirim dalam JSON.
1const teks = JSON.stringify({ nama: "Rani", nilai: [88, 92] });2console.log(teks);3const kembali = JSON.parse(teks);4console.log(kembali.nilai[1]);{"nama":"Rani","nilai":[88,92]}
92Cek pemahaman
Jika const buku = { judul: "Laskar Pelangi" };, apa hasil console.log(buku.penulis);?
Latihan
Total belanja keranjang
Keranjang belanja berisi array objek dengan properti nama, harga, dan jumlah. Hitung total belanja dengan reduce, lalu tampilkan rincian setiap barang.
[{ nama: "Pulpen", harga: 3500, jumlah: 4 }, { nama: "Buku tulis", harga: 6000, jumlah: 5 }, { nama: "Penggaris", harga: 4000, jumlah: 1 }]
Pembahasan
1const keranjang = [2 { nama: "Pulpen", harga: 3500, jumlah: 4 },3 { nama: "Buku tulis", harga: 6000, jumlah: 5 },4 { nama: "Penggaris", harga: 4000, jumlah: 1 },5];67for (const { nama, harga, jumlah } of keranjang) {8 console.log(`${nama} x${jumlah} = ${harga * jumlah}`);9}10const total = keranjang.reduce((t, b) => t + b.harga * b.jumlah, 0);11console.log("Total:", total);Pulpen x4 = 14000 Buku tulis x5 = 30000 Penggaris x1 = 4000 Total: 48000
Jalankan contoh kode di pelajaran ini tanpa instalasi lewat compiler JavaScript online.