menengahobjectstruktur-dataMenengah3 mnt baca

Object Dasar

Menyimpan data terstruktur sebagai pasangan key-value: membuat, mengakses, menambah, dan menghapus properti.

Sekumpulan properti bernama

Object menyimpan data sebagai pasangan key (nama) dan value (nilai). Kalau array cocok untuk daftar berurutan, object cocok untuk data berlabel:

javascript

let motor = {
  merk: "Honda",
  tahun: 2022,
  warna: "merah"
};

Mengakses properti: titik vs kurung siku

javascript

console.log(motor.merk);      // "Honda", dot notation
console.log(motor["tahun"]);  // 2022, bracket notation

Dot notation lebih ringkas dan umum dipakai. Bracket notation wajib dipakai saat nama key dinamis atau mengandung spasi:

javascript

let key = "warna";
console.log(motor[key]); // "merah", key dari variabel

let orang = { "nama lengkap": "Rizky Pratama" };
console.log(orang["nama lengkap"]); // dot notation tidak bisa di sini

Menambah, mengubah, menghapus

javascript

let siswa = { nama: "Rizky" };

siswa.kelas = "XII";        // tambah properti baru
siswa.nama = "Rizky P.";    // ubah yang ada
delete siswa.kelas;         // hapus properti

console.log(siswa); // { nama: "Rizky P." }

Mengecek dan mengiterasi

javascript

let config = { tema: "gelap", bahasa: "id" };

console.log("tema" in config); // true, key ada?
console.log(Object.keys(config));   // ["tema", "bahasa"]
console.log(Object.values(config)); // ["gelap", "id"]

for (let key in config) {
  console.log(key + ": " + config[key]);
}

Catatan teknis: Mengakses properti yang tidak ada menghasilkan undefined, bukan error. Ini bisa menjalar jadi bug: siswa.alamat.jalan error karena siswa.alamat undefined. Di kode modern, pakai optional chaining: siswa.alamat?.jalan yang aman mengembalikan undefined.

Array of object: bentuk data API

Di dunia nyata, data dari server hampir selalu berupa array berisi object:

javascript

let produk = [
  { id: 1, nama: "Kopi", harga: 15000 },
  { id: 2, nama: "Teh", harga: 8000 },
  { id: 3, nama: "Roti", harga: 12000 }
];

// tampilkan semua nama
for (let p of produk) {
  console.log(p.nama + ": Rp" + p.harga);
}

// cari produk termurah
let termurah = produk[0];
for (let p of produk) {
  if (p.harga < termurah.harga) termurah = p;
}
console.log("Termurah: " + termurah.nama);

Pola aksesnya selalu sama: loop array, lalu dot notation ke propertinya. Kuasai pola ini karena ia jembatan antara materi struktur data dan materi fetch API nanti.

Kesimpulan

Object adalah struktur data untuk "sesuatu yang punya atribut": user, produk, konfigurasi. Kuasai dot/bracket notation dan cara iterasinya, karena hampir semua data dari API berbentuk object atau array of object.