logo logo

Portal media terdepan yang menyajikan informasi terkini seputar dunia teknologi, gadget, dan inovasi digital di Indonesia.

Sentral Media

Langganan Update Teknologi

Dapatkan rangkuman berita mingguan langsung ke email Anda.

Daftar Newsletter

Surabaya, Indonesia

Kota Surabaya, Jawa Timur

Email: redaksi@sentralmediateknologi.id

Frontend & Ui/Ux

Menguasai Object JavaScript: Dari Dasar hingga Struktur Kompleks

Dalam dunia JavaScript, Object adalah tipe data fundamental. Jika variabel biasa adalah sebuah kotak tunggal, maka Object adalah sebuah lemari kabinet dengan banyak laci berlabel. Kemampuan mengelola Object adalah pembeda antara pemrogram pemula dan profesional.

avatar
Super Administrator

SentralMediaTeknologi.id


  • 13 Mei 2026
  • 22:17 WIB

Menguasai Object JavaScript: Dari Dasar hingga Struktur Kompleks

Dalam dunia JavaScript, Object adalah tipe data fundamental. Jika variabel biasa adalah sebuah kotak tunggal, maka Object adalah sebuah lemari kabinet dengan banyak laci berlabel. Kemampuan mengelola Object adalah pembeda antara pemrogram pemula dan profesional.


1. Anatomi Object: Properti dan Value

Object adalah kumpulan pasangan Key (Kunci) dan Value (Nilai). Di dalam JavaScript, "Key" disebut sebagai Properti.

Aturan Main:

  • Key: Harus unik di dalam objek tersebut. Biasanya berupa String.

  • Value: Bisa berisi tipe data apa pun (String, Number, Boolean, Array, Function, bahkan Object lain).

JavaScript
const laptop = { brand: "Asus", // Properti: brand, Value: "Asus" ram: 16, // Properti: ram, Value: 16 isSSD: true // Properti: isSSD, Value: true
};

2. Cara Mengakses Data (Accessing Values)

Ada dua cara utama untuk mengambil "isi laci" dari sebuah Object:

A. Dot Notation (Notasi Titik)

Cara yang paling bersih dan paling sering digunakan.

JavaScript
console.log(laptop.brand); // Output: Asus

B. Bracket Notation (Notasi Kurung Siku)

Gunakan cara ini jika nama properti Anda memiliki spasi atau Anda menggunakan variabel untuk mengaksesnya.

JavaScript
const kriteria = "ram";
console.log(laptop[kriteria]); // Output: 16
console.log(laptop["isSSD"]); // Output: true

3. Nested Object (Objek Bersarang)

Seringkali, satu properti tidak cukup diwakili oleh satu nilai sederhana. Misalnya, properti spesifikasi pada laptop bisa memiliki detail teknisnya sendiri. Inilah yang disebut Nested Object.

Contoh Struktur:

JavaScript
const user = { id: 101, username: "pioneer_dev", profile: { fullName: "Budi Santoso", address: { city: "Surabaya", zipCode: 60111 } }
};

Cara Mengaksesnya:

Gunakan sistem chaining (rantai). Anda harus menelusuri jalurnya satu per satu.

  • Mendapatkan Nama Lengkap: user.profile.fullName

  • Mendapatkan Kota: user.profile.address.city

Peringatan: Jika Anda mencoba mengakses user.profile.contact.phone sedangkan contact tidak ada, JavaScript akan melempar error. Selalu pastikan properti induknya ada sebelum mengakses anak-propertinya.


4. Manipulasi Properti: Tambah, Ubah, Hapus

Object di JavaScript bersifat dinamis. Anda bisa memodifikasinya kapan saja.

  • Menambah/Mengubah: Cukup panggil nama properti baru dan beri nilai.

    JavaScript
    user.status = "Active"; // Menambah properti baru
    user.id = 102; // Mengubah nilai yang sudah ada
    
  • Menghapus: Gunakan keyword delete.

JavaScript
 delete user.username; ``` --- ## 5. Tips Pro: Menangani Nested Object dengan Aman Dalam pengembangan aplikasi nyata (seperti memproses data dari API), kita sering tidak tahu apakah sebuah properti tersedia atau tidak. Untuk menghindari aplikasi *crash*, gunakan **Optional Chaining (`?.`)**. ```javascript
// Tanpa Optional Chaining (Bisa Error)
const phone = user.contact.phone; // Dengan Optional Chaining (Aman)
const phone = user.contact?.phone; // Hasilnya 'undefined', bukan error

Kesimpulan

Memahami Object adalah kunci untuk menguasai JavaScript. Properti memberikan identitas, Value memberikan data, dan Nested Object memungkinkan kita membangun struktur data yang kompleks namun tetap terorganisir.

Cek Pemahaman Anda:

  1. Dapatkah Anda mengambil data dari tingkat ketiga sebuah Nested Object?

  2. Kapan Anda harus menggunakan Bracket Notation alih-alih Dot Notation?

  3. Bagaimana cara mengamankan kode dari error saat properti objek kosong?

Stories

avatar

Jurnalis dan analis internasional, mengurai dinamika geopolitik, ekonomi global, dan konflik dunia dengan ketajaman dan kedalaman.


Bagikan artikel ini

Stay Connected