K

Command Palette

Search for a command to run...

Daftar

Objek Literal JS

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!

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 siswa
let 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:

  1. Dot Notation (Notasi Titik): namaObjek.namaProperti

    • Ini cara yang paling umum dan gampang dibaca.
    • 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 Santoso
    console.log(siswa.umur);        // Output: 17
    console.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)
  2. Bracket Notation (Notasi Kurung Siku): namaObjek["namaPropertiSebagaiString"]

    • Nama properti di dalem kurung siku ditulis sebagai string (diapit kutip).
    • Ini lebih fleksibel:
      • Bisa dipake buat ngakses properti yang namanya gak valid sebagai identifier (misal, ada spasi atau tanda hubung, atau diawali angka).
      • Bisa dipake kalau nama propertinya disimpen di variabel lain.
    javascript
    console.log(siswa["namaLengkap"]);      // Output: Budi Santoso (sama kayak dot notation)
    console.log(siswa["nama panggilan"]); // WAJIB pake bracket notation karena ada spasi
     
    let propertiYangDicari = "kelas";
    console.log(siswa[propertiYangDicari]); // Output: 11 IPA 1 (ngakses pake variabel)

Mengubah Nilai Properti Objek

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: 17
siswa.umur = 18; // Ubah nilai properti umur
console.log("Umur Budi sesudah:", siswa.umur); // Output: 18
 
siswa["alamat"]["kota"] = "Jakarta Pusat"; // Ubah nilai di nested object
console.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 baru
siswa["nomor telepon"] = "08123456789"; // Nambahin properti baru pake bracket notation
 
console.log(siswa.email);             // Output: budi.s@email.com
console.log(siswa["nomor telepon"]); // Output: 08123456789
console.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 hobi
console.log("Hobi Budi setelah dihapus:", siswa.hobi); // Output: undefined
console.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: Toyota
model: Avanza
tahun: 2022
warna: 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!


Kuis Objek Literal JavaScript

Pertanyaan 1 dari 5

Bagaimana cara yang paling umum untuk membuat sebuah objek literal kosong di JavaScript?