Object JavaScript Adalah: Cara Menyimpan Data Terstruktur (Key & Value)

Object JavaScript adalah struktur data yang menyimpan sekumpulan informasi dalam bentuk pasangan key (nama properti) dan value (nilainya), sehingga kamu bisa menggambarkan satu “benda” dengan banyak atribut sekaligus dalam satu variabel. Kalau sebuah array cocok untuk menyimpan daftar yang berurutan, seperti daftar nama buah, maka object cocok untuk menyimpan satu entitas yang punya banyak sifat, seperti seorang pengguna yang punya nama, umur, email, dan status aktif. Object adalah salah satu tipe data paling penting di JavaScript, dan hampir semua data yang kamu terima dari internet berbentuk object.

Di panduan ini kamu akan belajar object benar-benar dari nol: apa itu object dan kenapa dibutuhkan, cara membuatnya, dua cara mengakses isinya (dot notation vs bracket notation), cara mengubah dan menambah properti, perbedaan object dengan array, sampai method dan jebakan yang sering bikin pemula bingung, lengkap dengan playground yang bisa kamu klik-klik sendiri.

Apa Itu Object di JavaScript?

Object adalah wadah untuk menyimpan data yang saling berkaitan dalam satu tempat. Bayangkan kamu ingin menyimpan informasi tentang seorang pengguna. Tanpa object, kamu harus membuat banyak variabel terpisah:

// Repot: data yang berkaitan tersebar di banyak variabel
let namaUser = "Budi"
let umurUser = 22
let emailUser = "[email protected]"
let aktifUser = true

Cara di atas berantakan karena keempat data itu sebenarnya menggambarkan satu pengguna, tapi tercerai-berai. Dengan object, semuanya rapi dalam satu variabel:

// Rapi: satu object menampung semua atribut satu pengguna
let user = {
  nama: "Budi",
  umur: 22,
  email: "[email protected]",
  aktif: true
}

Setiap baris di dalam kurung kurawal {} disebut properti. Sebuah properti terdiri dari dua bagian yang dipisah titik dua (:): sisi kiri adalah key (nama properti, misalnya nama), dan sisi kanan adalah value (nilainya, misalnya "Budi"). Antar properti dipisah dengan koma. Struktur inilah yang membuat object begitu berguna: satu variabel, banyak informasi terstruktur.

Cara Membuat Object

Cara paling umum dan paling gampang membuat object adalah dengan object literal, yaitu langsung menulis pasangan key-value di dalam kurung kurawal {}:

// Object literal, cara yang paling sering dipakai
let produk = {
  namaBarang: "Kaos Polos",
  harga: 75000,
  stok: 12,
  tersedia: true
}

Object juga bisa kosong dulu, lalu diisi belakangan:

let mobil = {}   // object kosong, siap diisi nanti

Aturan penulisan key: kalau namanya satu kata dan memakai karakter valid (huruf, angka, _, $, tidak diawali angka), kamu boleh menulisnya tanpa tanda kutip seperti contoh di atas. Value boleh bertipe apa saja: string, number, boolean, null, array, bahkan object lain di dalamnya.

Cara Mengakses Isi Object: Dot vs Bracket

Setelah punya object, kamu pasti ingin mengambil nilainya. Ada dua cara, dan keduanya penting dipahami karena masing-masing punya kegunaan.

Cara pertama, dot notation (notasi titik), paling sering dipakai karena paling ringkas:

let user = { nama: "Budi", umur: 22 }

console.log(user.nama)   // "Budi"
console.log(user.umur)   // 22

Cara kedua, bracket notation (notasi kurung siku), key ditulis sebagai string di dalam []:

console.log(user["nama"])   // "Budi"
console.log(user["umur"])   // 22

Keduanya menghasilkan nilai yang sama. Jadi kapan pakai yang mana? Dot notation adalah pilihan default karena lebih bersih. Tapi bracket notation wajib dipakai dalam dua situasi: (1) ketika nama key mengandung spasi atau karakter aneh, dan (2) ketika nama key-nya disimpan di dalam variabel dan baru diketahui saat program berjalan (dinamis).

let data = { "nama lengkap": "Budi Santoso", umur: 22 }

// console.log(data.nama lengkap)  // ERROR! ada spasi
console.log(data["nama lengkap"])  // "Budi Santoso", harus bracket

// Key dinamis dari variabel
let field = "umur"
console.log(data[field])   // 22  (bracket membaca isi variabel field)
console.log(data.field)    // undefined (dicari key bernama "field", tidak ada)

Perhatikan baris terakhir: data.field mencari key yang namanya persis "field", yang tidak ada, sehingga hasilnya undefined. Sedangkan data[field] membaca isi variabel field (yaitu "umur") lalu mengambil properti itu. Inilah perbedaan inti keduanya.

Coba Sendiri: Bongkar Isi Object

Teori saja belum cukup. Di playground di bawah ini kamu bisa mengubah nilai tiap properti, memilih properti mana yang mau diakses, dan langsung melihat bagaimana dot notation dan bracket notation menghasilkan nilai yang sama, sambil memperhatikan object literal-nya diperbarui secara langsung:

const user = {
  nama: "Budi",
  umur: 22,
  kota: "Bandung",
  aktif: true,
}

Perhatikan juga label tipe di sebelah kanan tiap nilai: object bisa menampung string, number, maupun boolean sekaligus. Kamu bisa mendalami konsep ini lebih jauh secara interaktif lewat pelajaran Object di Hyper Sheets yang bisa langsung dikerjakan di browser tanpa setup.

Mengubah, Menambah, dan Menghapus Properti

Object bersifat mutable, isinya bisa diubah kapan saja setelah dibuat. Untuk mengubah nilai properti yang sudah ada, cukup lakukan assignment biasa:

let user = { nama: "Budi", umur: 22 }

user.umur = 23        // ubah nilai yang sudah ada
console.log(user.umur)  // 23

Menariknya, cara yang sama juga dipakai untuk menambah properti baru. Kalau key-nya belum ada, JavaScript otomatis membuatnya:

user.kota = "Bandung"   // properti baru "kota" ditambahkan
user["email"] = "[email protected]"  // bisa juga pakai bracket

Untuk menghapus properti, gunakan kata kunci delete:

delete user.email   // properti email dihapus dari object

Untuk mengecek apakah sebuah key ada di dalam object, gunakan operator in:

console.log("nama" in user)   // true
console.log("gaji" in user)   // false

Object vs Array: Apa Bedanya?

Ini pertanyaan yang paling sering bikin pemula bingung, karena keduanya sama-sama “menampung banyak nilai”. Perbedaan intinya ada pada cara kamu mengakses data: array memakai indeks angka berurutan (mulai dari 0), sedangkan object memakai key berupa nama yang kamu tentukan sendiri.

Aturan praktisnya sederhana: kalau datanya adalah daftar dari hal yang sejenis (daftar buah, daftar nilai ujian, daftar nama), pakai array. Kalau datanya adalah satu benda dengan banyak sifat berbeda (satu user, satu produk, satu artikel), pakai object.

// Array: daftar buah (semua sejenis)
let buah = ["apel", "mangga", "jeruk"]
console.log(buah[0])   // "apel", akses lewat indeks

// Object: satu produk (banyak sifat berbeda)
let produk = { nama: "Kaos", harga: 75000, stok: 12 }
console.log(produk.nama)   // "Kaos", akses lewat key

Menariknya, keduanya sering dikombinasikan: sebuah array yang berisi banyak object. Ini justru bentuk data yang paling umum di dunia nyata. Kalau kamu belum kenal array sama sekali, ada baiknya baca dulu panduan lengkap belajar JavaScript yang membahas array dan object secara berdampingan.

Object Bersarang dan Array of Objects

Value sebuah properti boleh berupa object atau array lagi, inilah yang membuat object bisa menggambarkan data serumit apa pun. Contoh object bersarang (nested):

let user = {
  nama: "Budi",
  alamat: {
    kota: "Bandung",
    kodePos: "40123"
  },
  hobi: ["ngoding", "membaca"]
}

// Mengakses data bersarang, tinggal dirantai
console.log(user.alamat.kota)   // "Bandung"
console.log(user.hobi[0])       // "ngoding"

Dan inilah bentuk yang akan kamu temui setiap hari sebagai developer, array of objects (array yang berisi object):

let daftarUser = [
  { nama: "Budi", umur: 22 },
  { nama: "Sari", umur: 25 },
  { nama: "Andi", umur: 20 }
]

console.log(daftarUser[0].nama)   // "Budi"
console.log(daftarUser[1].umur)   // 25

Setiap kali kamu mengambil data dari sebuah API, hampir pasti bentuknya seperti ini: array of objects, sering dibungkus dalam format bernama JSON yang bentuknya nyaris identik dengan object literal JavaScript.

Method: Fungsi di Dalam Object

Value sebuah properti juga bisa berupa fungsi. Fungsi yang berada di dalam object disebut method. Method berguna untuk memberi object “kemampuan” melakukan sesuatu dengan datanya sendiri:

let kalkulator = {
  nilai: 0,
  tambah(n) {
    this.nilai = this.nilai + n
    return this.nilai
  }
}

console.log(kalkulator.tambah(5))   // 5
console.log(kalkulator.tambah(3))   // 8

Kata kunci this di dalam method merujuk ke object itu sendiri, dalam contoh ini, this.nilai sama dengan kalkulator.nilai. Ini memungkinkan sebuah method membaca dan mengubah properti object tempatnya berada.

Cara Meloop Isi Object

Kadang kamu perlu menjelajahi semua properti sebuah object satu per satu. Cara paling gampang adalah for...in:

let user = { nama: "Budi", umur: 22, kota: "Bandung" }

for (let key in user) {
  console.log(`${key}: ${user[key]}`)
}
// nama: Budi
// umur: 22
// kota: Bandung

Perhatikan di dalam loop kita memakai user[key] (bracket notation), bukan user.key. Ini wajib, karena key di sini adalah variabel yang isinya berganti-ganti setiap putaran. Selain for...in, JavaScript modern juga punya tiga helper yang sangat berguna:

console.log(Object.keys(user))     // ["nama", "umur", "kota"], daftar semua key
console.log(Object.values(user))   // ["Budi", 22, "Bandung"], daftar semua value
console.log(Object.entries(user))  // [["nama","Budi"], ["umur",22], ...], pasangan

Object.keys() sangat sering dipakai, misalnya untuk menghitung jumlah properti dengan Object.keys(user).length.

Kesalahan Umum Pemula dengan Object

Beberapa jebakan yang hampir semua pemula alami saat pertama kali bekerja dengan object:

1. Mengakses key yang tidak ada. Kalau kamu mengambil properti yang tidak pernah didefinisikan, hasilnya undefined (bukan error). Ini sering bikin bingung saat debugging.

let user = { nama: "Budi" }
console.log(user.umur)   // undefined, key "umur" tidak ada

2. Lupa this di dalam method biasa vs arrow function. Di dalam method, arrow function tidak punya this sendiri, sehingga this.nilai bisa gagal. Untuk method object, gunakan penulisan fungsi biasa seperti contoh kalkulator di atas.

3. Mengira object disalin padahal hanya “dipinjam”. Karena object bertipe reference, let b = a membuat a dan b menunjuk ke object yang sama. Mengubah b juga mengubah a.

let a = { skor: 10 }
let b = a
b.skor = 99
console.log(a.skor)   // 99, ikut berubah!

// Untuk membuat salinan asli, pakai spread:
let c = { ...a }

4. Salah pilih dot vs bracket untuk key dinamis. Seperti dibahas sebelumnya, obj.variabel mencari key literal "variabel", bukan isi variabelnya. Untuk key dinamis, selalu obj[variabel].

FAQ Seputar Object di JavaScript

Apa itu object di JavaScript dengan bahasa sederhana?

Object adalah cara menyimpan banyak informasi yang berkaitan dalam satu variabel, dalam bentuk pasangan nama dan nilai. Bayangkan sebuah kartu identitas: di dalamnya ada “nama: Budi”, “umur: 22”, “kota: Bandung”. Setiap baris itu adalah satu properti (pasangan key-value), dan seluruh kartu itulah object-nya. Object memudahkanmu menggambarkan satu benda dengan banyak sifat sekaligus.

Apa perbedaan object dan array di JavaScript?

Perbedaan utamanya ada pada cara mengaksesnya. Array memakai indeks angka berurutan mulai dari 0 (arr[0], arr[1]) dan cocok untuk daftar item sejenis. Object memakai key berupa nama yang kamu tentukan sendiri (obj.nama, obj.umur) dan cocok untuk satu entitas dengan banyak atribut berbeda. Secara teknis array sebenarnya juga sejenis object, tapi dalam praktik pilih array untuk daftar, dan object untuk satu benda dengan banyak sifat.

Kapan pakai dot notation dan kapan pakai bracket notation?

Gunakan dot notation (obj.nama) sebagai pilihan default karena lebih ringkas dan mudah dibaca. Gunakan bracket notation (obj["nama"]) dalam dua kondisi: ketika nama key mengandung spasi atau karakter khusus, dan ketika nama key-nya disimpan di dalam variabel (dinamis). Untuk key dinamis, bracket wajib karena dot notation akan mencari key literal, bukan isi variabelnya.

Apakah object dengan const bisa diubah isinya?

Bisa. const hanya mencegah variabel ditunjuk ulang ke object yang benar-benar baru, tapi tidak membekukan isi object. Jadi const user = { umur: 22 } lalu user.umur = 23 tetap berhasil. Yang menghasilkan error adalah mengganti seluruh object seperti user = { lain: 1 }. Kalau kamu benar-benar ingin membekukan isinya, gunakan Object.freeze(user).

Apa itu key dan value dalam object?

Key adalah nama penanda sebuah properti (misalnya nama), dan value adalah nilai yang disimpan di properti itu (misalnya "Budi"). Keduanya ditulis dipisah titik dua: nama: "Budi". Satu object bisa punya banyak pasangan key-value. Key harus unik dalam satu object, sedangkan value bisa bertipe apa saja, teks, angka, boolean, array, bahkan object lain.

Bagaimana cara menampilkan semua isi object?

Untuk melihat sekilas, cukup console.log(user) dan browser akan menampilkan seluruh isinya. Untuk memproses setiap properti satu per satu, gunakan for...in, atau helper seperti Object.keys(user) untuk mendapat daftar semua key, Object.values(user) untuk semua nilai, dan Object.entries(user) untuk pasangan key-value sekaligus.

Setelah Menguasai Object, Belajar Apa?

Object adalah pondasi, dan dari sini banyak jalur lanjutan terbuka:

1. JSON, format pertukaran data yang bentuknya nyaris identik dengan object literal. Setiap kali kamu berkomunikasi dengan API, kamu akan bekerja dengan JSON.
2. Destructuring, cara ringkas mengekstrak properti dari object, misalnya const { nama, umur } = user. Sangat umum di React.
3. Array methods, begitu kamu punya array of objects, method seperti map dan filter menjadi senjata utama untuk mengolahnya.

Untuk memperkuat semua fondasi ini sekaligus, baca panduan lengkap belajar JavaScript dari nol yang merangkai variabel, array, object, DOM, dan async menjadi satu gambaran utuh. Kalau kamu ingin langsung praktik object secara bertahap dengan latihan yang dinilai otomatis, pelajaran Object di Hyper Sheets adalah tempat yang tepat untuk memantapkannya. Mulai dari yang kecil, banyak bereksperimen di console browser, dan object akan segera terasa seperti alat yang sangat natural.