Objek

Objek 🗂️

Objek adalah kumpulan pasangan kunci-nilai (key-value pairs) yang digunakan untuk merepresentasikan entitas dengan banyak atribut. Hampir semua data kompleks di JavaScript direpresentasikan sebagai objek.


Membuat Objek

// Object literal — cara paling umum
let orang = {
  nama: 'Budi Santoso',
  umur: 25,
  kota: 'Jakarta',
  aktif: true
};

// Objek kosong
let objKosong = {};

// Shorthand property — jika nama variabel sama dengan nama key
let nama = 'Sari';
let umur = 23;
let orang2 = { nama, umur }; // sama dengan: { nama: nama, umur: umur }

Mengakses Properti

let orang = {
  nama: 'Budi',
  umur: 25,
  'nama lengkap': 'Budi Santoso' // key dengan spasi — wajib pakai kutip
};

// Dot notation — lebih umum dan bersih
console.log(orang.nama);  // "Budi"
console.log(orang.umur);  // 25

// Bracket notation — untuk key dinamis atau key dengan spasi
console.log(orang['nama']);          // "Budi"
console.log(orang['nama lengkap']);  // "Budi Santoso"

let kunci = 'umur';
console.log(orang[kunci]); // 25 — menggunakan variabel sebagai key

Mengubah Objek

let orang = { nama: 'Budi', umur: 25 };

// Mengubah nilai
orang.umur = 26;

// Menambah properti baru
orang.kota = 'Jakarta';
orang['email'] = '[email protected]';

// Menghapus properti
delete orang.email;

console.log(orang); // { nama: 'Budi', umur: 26, kota: 'Jakarta' }

Method dalam Objek

Properti yang berisi fungsi disebut method:

let anjing = {
  nama: 'Buddy',
  ras: 'Labrador',
  // Shorthand method
  gonggong() {
    return `${this.nama} bilang: Woof!`;
  },
  info() {
    return `${this.nama} adalah ${this.ras}`;
  }
};

console.log(anjing.gonggong()); // "Buddy bilang: Woof!"
console.log(anjing.info());     // "Buddy adalah Labrador"

Destructuring Objek

Cara elegan untuk mengekstrak nilai dari objek:

let orang = {
  nama: 'Budi',
  umur: 25,
  kota: 'Jakarta',
  pekerjaan: 'Developer'
};

// Cara lama
let nama = orang.nama;
let umur = orang.umur;

// Dengan destructuring
let { nama, umur } = orang;
console.log(nama, umur); // "Budi" 25

// Dengan alias (rename)
let { nama: namaLengkap, umur: usia } = orang;
console.log(namaLengkap, usia); // "Budi" 25

// Dengan default value
let { nama, hobi = 'Tidak ada' } = orang;
console.log(hobi); // "Tidak ada" — hobi tidak ada di objek

// Destrukturing di parameter fungsi
function tampilkan({ nama, umur, kota = 'Unknown' }) {
  console.log(`${nama} (${umur}) dari ${kota}`);
}

tampilkan(orang); // "Budi (25) dari Jakarta"

Spread dan Merge Objek

let info    = { nama: 'Budi', umur: 25 };
let kontak  = { email: '[email protected]', telepon: '08123' };

// Merge dua objek
let profil = { ...info, ...kontak };
console.log(profil);
// { nama: 'Budi', umur: 25, email: '[email protected]', telepon: '08123' }

// Menyalin objek (shallow copy)
let salinan = { ...info };
salinan.nama = 'Sari'; // tidak mempengaruhi info asli

// Override properti tertentu
let diperbarui = { ...info, umur: 26 };
console.log(diperbarui); // { nama: 'Budi', umur: 26 }

Iterasi Objek

let orang = { nama: 'Budi', umur: 25, kota: 'Jakarta' };

// Object.keys() — array nama key
console.log(Object.keys(orang));   // ['nama', 'umur', 'kota']

// Object.values() — array nilai
console.log(Object.values(orang)); // ['Budi', 25, 'Jakarta']

// Object.entries() — array [key, value]
Object.entries(orang).forEach(([key, val]) => {
  console.log(`${key}: ${val}`);
});
// nama: Budi
// umur: 25
// kota: Jakarta

Cek Keberadaan Properti

let orang = { nama: 'Budi', umur: 25 };

// in operator
console.log('nama' in orang);  // true
console.log('email' in orang); // false

// Optional chaining — akses aman tanpa error
console.log(orang?.alamat?.kota); // undefined — tidak error

// Mengecek properti yang ada tapi nilainya undefined
console.log(orang.hasOwnProperty('nama'));  // true
console.log(orang.hasOwnProperty('email')); // false

💡 Tips: Gunakan destructuring untuk mengekstrak beberapa properti objek sekaligus — terutama berguna untuk parameter fungsi. Alih-alih function tampilkan(orang) { console.log(orang.nama, orang.umur) }, tulis function tampilkan({ nama, umur }) { console.log(nama, umur) } — lebih bersih dan langsung menunjukkan properti apa yang dibutuhkan fungsi. 🎯

Sebelumnya

Informasi Kursus

Kursus

JavaScript Dasar

Kategori

Array & Objek

Durasi Pelajaran

20 menit

Pelajaran dalam Kategori Ini