Pelajari cara membuat dan menggunakan Objek Literal di JavaScript untuk mengelompokkan data terkait dalam bentuk pasangan properti (kunci) dan nilai. Fondasi penting untuk data kompleks!
17m bacaanKuis WajibMicro Badge Lesson
Objek di JavaScript: Nyimpen Data Kayak Punya "KTP" Digital!
Udah kenalan sama Array yang jago nampung banyak data berurutan? Keren! Tapi, gimana kalau kita mau nyimpen data yang lebih kompleks, yang tiap bagian datanya punya "nama" atau "label" sendiri? Misalnya, kita mau nyimpen data lengkap seorang siswa: ada nama, umur, kelas, alamat. Pake array bisa aja sih (["Budi", 17, "11A", "Jalan Mawar"]), tapi jadi kurang jelas kan elemen ke-0 itu apa, elemen ke-1 itu apa.
Nah, buat kasus kayak gini, JavaScript punya struktur data yang lebih pas: Objek (Object)! Objek di JavaScript itu kayak "entitas" di dunia nyata yang punya berbagai properti (sifat atau karakteristik). Dan cara paling gampang buat bikin objek sederhana adalah pake Objek Literal.
Apa Itu Objek Literal?
Objek Literal adalah cara bikin objek di JavaScript dengan nulis langsung daftar pasangan key: value (kunci: nilai) di dalem kurung kurawal { }.
Key (Kunci): Ini adalah nama properti dari objek. Biasanya berupa string (kalau nama propertinya valid sebagai identifier JavaScript, tanda kutipnya opsional). Key ini harus unik di dalem satu objek.
Value (Nilai): Ini adalah nilai dari properti tersebut. Nilainya bisa berupa tipe data apa aja: string, number, boolean, array, bahkan objek lain!
Sintaks Dasar Objek Literal:
javascript
let namaObjek = { key1: nilai1, key2: nilai2, "key-dengan-spasi-atau-karakter-khusus": nilai3 // ... dan seterusnya};
Tiap pasangan key: value dipisahin sama koma (,).
Contoh Bikin Objek Literal:
javascript
// Objek yang merepresentasikan data seorang siswalet siswa = { namaLengkap: "Budi Santoso", // Key: namaLengkap, Value: "Budi Santoso" (String) umur: 17, // Key: umur, Value: 17 (Number) kelas: "11 IPA 1", sudahLulus: false, // Key: sudahLulus, Value: false (Boolean) alamat: { // Value bisa berupa objek lain (nested object) jalan: "Jalan Melati No. 5", kota: "Jakarta Selatan", kodePos: "12345" }, hobi: ["Membaca", "Bermain Game", "Ngoding"], // Value bisa berupa array "nama panggilan": "BudBud" // Key dengan spasi, wajib pake kutip};console.log(siswa); // Outputnya bakal nampilin keseluruhan struktur objek siswa
Mengakses Nilai Properti Objek
Ada dua cara utama buat ngakses nilai dari properti sebuah objek:
Cuma bisa dipake kalau nama propertinya adalah identifier JavaScript yang valid (gak ada spasi, gak diawali angka, gak pake karakter khusus kecuali _ atau $).
javascript
console.log(siswa.namaLengkap); // Output: Budi Santosoconsole.log(siswa.umur); // Output: 17console.log(siswa.alamat.kota); // Output: Jakarta Selatan (ngakses properti dari nested object)console.log(siswa.hobi[0]); // Output: Membaca (ngakses elemen pertama dari array hobi)
Kamu bisa ngubah nilai properti objek yang udah ada dengan cara ngasih nilai baru pake dot notation atau bracket notation, sama kayak pas ngakses.
javascript
console.log("Umur Budi sebelum:", siswa.umur); // Output: 17siswa.umur = 18; // Ubah nilai properti umurconsole.log("Umur Budi sesudah:", siswa.umur); // Output: 18siswa["alamat"]["kota"] = "Jakarta Pusat"; // Ubah nilai di nested objectconsole.log("Kota baru Budi:", siswa.alamat.kota); // Output: Jakarta Pusat
Menambah Properti Baru ke Objek
Kamu juga bisa nambahin properti baru ke objek yang udah ada kapan aja.
javascript
console.log(siswa.email); // Output: undefined (karena email belum ada)siswa.email = "budi.s@email.com"; // Nambahin properti email barusiswa["nomor telepon"] = "08123456789"; // Nambahin properti baru pake bracket notationconsole.log(siswa.email); // Output: budi.s@email.comconsole.log(siswa["nomor telepon"]); // Output: 08123456789console.log(siswa); // Objek siswa sekarang punya properti email dan nomor telepon
Menghapus Properti dari Objek
Buat ngapus properti dari objek, kamu bisa pake operator delete.
javascript
console.log("Hobi Budi:", siswa.hobi);delete siswa.hobi; // Hapus properti hobiconsole.log("Hobi Budi setelah dihapus:", siswa.hobi); // Output: undefinedconsole.log(siswa); // Properti hobi udah gak ada di objek siswa
Objek Bisa Punya "Metode" (Fungsi di Dalem Objek) - Pengenalan Singkat
Selain nyimpen data (properti), objek juga bisa nyimpen fungsi. Fungsi yang jadi properti dari sebuah objek itu disebut metode (method). Metode ini bisa ngelakuin aksi yang berhubungan sama data objek itu sendiri.
javascript
let kalkulator = { angka1: 0, angka2: 0, tambah: function() { // Ini metode 'tambah' return this.angka1 + this.angka2; // 'this' ngacu ke objek kalkulator itu sendiri }, setAngka: function(a, b) { // Metode buat ngeset angka this.angka1 = a; this.angka2 = b; }};kalkulator.setAngka(10, 5);console.log(kalkulator.tambah()); // Output: 15// Di ES6 ke atas, bisa juga nulis metode lebih ringkes:let orang = { nama: "Ani", sapa() { // Sintaks metode ringkes console.log("Halo, nama saya " + this.nama); }};orang.sapa(); // Output: Halo, nama saya Ani
Konsep this dan metode ini bakal kita bahas lebih dalem nanti, tapi ini sekadar nunjukin kalau objek itu gak cuma buat data pasif.
Looping Lewat Properti Objek (Pengenalan for...in)
Kalau kamu mau ngakses semua properti dan nilainya di dalem objek, kamu bisa pake loop for...in.
javascript
let mobil = { merk: "Toyota", model: "Avanza", tahun: 2022, warna: "Hitam"};for (let kunci in mobil) { // 'kunci' bakal berisi nama properti (merk, model, tahun, warna) // 'mobil[kunci]' bakal ngasih nilainya if (mobil.hasOwnProperty(kunci)) { // Praktik baik buat ngecek properti milik objek itu sendiri console.log(kunci + ": " + mobil[kunci]); }}/* Output:merk: Toyotamodel: Avanzatahun: 2022warna: Hitam*/
Penggunaan hasOwnProperty() itu buat mastiin kita cuma ngeloop properti milik objek mobil itu sendiri, bukan properti yang diwariskan dari "leluhurnya" (konsep prototype, ini topik advance).
Objek literal ini adalah cara yang super fleksibel dan intuitif buat ngorganisir data yang saling terkait di JavaScript. Kamu bakal pake objek terus-terusan buat ngewakilin data dari database, konfigurasi, state aplikasi, dan banyak lagi.
Pahami cara bikinnya, cara ngakses propertinya (pake dot atau bracket), dan gimana cara nambah/ubah/hapus properti. Ini bakal jadi bekal penting banget buat ngoding JavaScript yang lebih kompleks!
Checkpoint KuisTarget: 70%
Kuis Objek Literal JavaScript
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
