Object di JavaScript: Property, Method, dan Cara Memakainya

Object adalah wadah berisi nilai bernama

Array mengelompokkan nilai berdasarkan posisi. Object mengelompokkannya berdasarkan nama. Kalau hal yang kamu modelkan punya bagian berlabel, misalnya user dengan nama dan umur, atau request dengan method dan URL, pakailah object.

Cara terpendek untuk membuatnya adalah object literal:

const user = {
  name: "Ada",
  age: 30,
  isAdmin: false,
};

console.log(user);

Setiap entri adalah pasangan key: value. Di balik layar, key berupa string (tanda kutip boleh tidak ditulis untuk identifier yang valid seperti name). Nilainya bisa apa saja yang bisa direpresentasikan JavaScript: angka, string, boolean, array, fungsi, bahkan object lain.

Koma di belakang entri terakhir tidak masalah. Kebanyakan tim membiarkannya, karena diff tetap bersih saat kamu menambah property baru nanti.

Membaca dan menulis property

Ada dua cara mengakses property: dot notation dan bracket notation.

const user = { name: "Ada", age: 30 };

console.log(user.name);
console.log(user["age"]);

user.age = 31;
user["name"] = "Ada Lovelace";

console.log(user);

Dot notation lebih rapi dan biasanya jadi pilihan utama. Bracket notation berguna saat key disimpan di variabel, atau saat key bukan identifier yang valid:

const user = { "first name": "Ada", age: 30 };
const field = "age";

console.log(user["first name"]);  // dot notation can't do this
console.log(user[field]);         // key from a variable

Membaca property yang tidak ada akan menghasilkan undefined, tanpa error:

const user = { name: "Ada" };
console.log(user.email);  // undefined

Ini bisa diam-diam menutupi salah ketik. Kalau kamu ingin kegagalan yang jelas terlihat, kamu harus mengeceknya secara eksplisit.

Menambah dan menghapus property

Object selalu terbuka: kamu bisa menambah key kapan saja:

const user = { name: "Ada" };

user.age = 30;
user["email"] = "ada@example.com";

console.log(user);

Dan menghapusnya dengan delete:

const user = { name: "Ada", age: 30, email: "ada@example.com" };

delete user.email;

console.log(user);
console.log("email" in user);  // false

delete termasuk operator yang tidak kamu pakai setiap hari, tapi saat kamu perlu membuang sebuah key sepenuhnya (bukan sekadar mengisinya dengan undefined), inilah alat yang tepat. Mengisi user.email = undefined tetap menyisakan key-nya, jadi "email" in user masih bernilai true.

Mengecek apakah sebuah property ada

Ada tiga cara, masing-masing dengan arti yang sedikit berbeda:

const user = { name: "Ada", email: undefined };

console.log("name" in user);                // true
console.log("email" in user);               // true - key exists, value is undefined
console.log(Object.hasOwn(user, "name"));   // true
console.log(user.name !== undefined);       // true
console.log(user.email !== undefined);      // false - misleading!

• in mengecek apakah key ada, termasuk yang diwariskan dari prototype chain.
• Object.hasOwn(obj, key) hanya mengecek key milik object itu sendiri. Pakai ini kalau kamu ingin mengabaikan hal yang diwariskan. Ia menggantikan pemanggilan hasOwnProperty yang lebih lama.
• obj.key !== undefined biasanya berhasil, tapi menipu saat sebuah property sengaja diisi undefined.

Pilih Object.hasOwn kalau kamu ragu: ia melakukan apa yang kemungkinan besar kamu maksud.

Method: fungsi yang tinggal di object

Property yang nilainya berupa fungsi disebut method. Ada sintaks singkat untuk mendefinisikannya di dalam object literal:

const user = {
  name: "Ada",
  greet() {
    return `Hello, I'm ${this.name}`;
  },
};

console.log(user.greet());

this di dalam method merujuk ke object tempat method itu dipanggil, dalam hal ini user. Begitulah greet tahu nama siapa yang dipakai.

Satu hal yang perlu diwaspadai: arrow function tidak punya this sendiri, jadi ia pilihan yang salah untuk method yang perlu membaca property lain dari object itu:

const user = {
  name: "Ada",
  greet: () => `Hello, I'm ${this.name}`,  // this is NOT user
};

console.log(user.greet());  // Hello, I'm undefined

Pakai sintaks method singkat (greet() { ... }) untuk apa pun yang menyentuh this. Arrow function bagus untuk callback, bukan untuk method object.

Object bersarang

Nilai juga bisa berupa object, sedalam apa pun:

const user = {
  name: "Ada",
  address: {
    city: "London",
    postcode: "NW1",
  },
  tags: ["admin", "early-adopter"],
};

console.log(user.address.city);
console.log(user.tags[0]);

user.address.city = "Cambridge";
console.log(user.address);

Membaca property bersarang dilakukan dengan merangkai akses: user.address.city. Masalahnya, kalau ada satu langkah di tengah jalan yang bernilai null atau undefined, kamu mendapat TypeError:

console.log(user.profile.city);
// TypeError: Cannot read properties of undefined (reading 'city')

Optional chaining (user.profile?.city) adalah solusi modernnya: ia mengembalikan undefined alih-alih melempar error saat ada mata rantai yang hilang. Ada halaman khusus tentang itu di bab ini nanti.

Melakukan perulangan pada object

Saat kamu perlu menelusuri setiap key dalam object, keluarga Object.keys, Object.values, dan Object.entries adalah yang kamu cari:

const scores = { ada: 95, boris: 82, rosa: 91 };

for (const name of Object.keys(scores)) {
  console.log(name);
}

for (const score of Object.values(scores)) {
  console.log(score);
}

for (const [name, score] of Object.entries(scores)) {
  console.log(`${name}: ${score}`);
}

Object.entries yang paling berguna: ia memberimu key dan nilai sekaligus, dan cocok dipadukan dengan array destructuring.

Ada juga loop for...in, tapi ia ikut menelusuri property yang diwariskan, yang biasanya bukan yang kamu mau:

for (const key in scores) {
  console.log(key);  // works, but includes inherited keys
}

Utamakan Object.keys / Object.entries, kecuali kamu memang sengaja menginginkan property yang diwariskan.

Sintaks singkat yang perlu kamu tahu

Dua bentuk syntactic sugar yang akan kamu lihat di mana-mana:

const name = "Ada";
const age = 30;

// Property shorthand: { name: name, age: age }
const user = { name, age };

console.log(user);

// Computed keys: the key comes from an expression
const field = "email";
const update = {
  [field]: "ada@example.com",
  [`${field}Verified`]: true,
};

console.log(update);

Property shorthand berlaku saat nama variabel sama dengan key-nya. Computed key (bentuk [expr]) memungkinkanmu membuat nama property secara dinamis, berguna saat menulis fungsi yang mengubah sebuah field berdasarkan namanya.

Kesetaraan object dibandingkan lewat referensi

Hal ini pernah menjebak hampir semua orang:

const a = { x: 1 };
const b = { x: 1 };
const c = a;

console.log(a === b);  // false - different objects
console.log(a === c);  // true  - same object

=== pada object mengecek apakah kedua sisi merujuk ke object yang sama di memori, bukan apakah isinya sama. Dua object dengan property yang identik tetap dua object yang berbeda.

Untuk pertanyaan "apakah bentuk keduanya sama?", kamu harus membandingkan field satu per satu, atau memakai helper deep equality. JSON.stringify(a) === JSON.stringify(b) adalah cara cepat seadanya yang berhasil untuk data biasa, tapi gagal pada apa pun yang berisi fungsi, undefined, atau referensi melingkar.

Object tetap bisa diubah walau memakai const

const mengunci variabel ke satu nilai. Ia tidak membekukan object yang ditunjuk oleh nilai itu:

const user = { name: "Ada" };

user.name = "Boris";    // fine - mutating the object
user.age = 30;          // fine - adding a property

console.log(user);

// user = { name: "Rosa" };  // TypeError - reassigning the variable

Kalau kamu benar-benar ingin data yang tidak bisa diubah, Object.freeze(user) mencegah perubahan selanjutnya (secara dangkal: object bersarang tetap bisa diubah). Dalam praktiknya, kebanyakan kode lebih mengandalkan kesepakatan daripada Object.freeze: anggap object const sebagai "jangan assign ulang binding ini" dan tangani imutabilitas di tingkat desain.

Berikutnya: array

Object dan array adalah dua balok bangunan yang menjadi dasar segala hal lainnya. Object menangani data berlabel; array menangani data berurutan. Selanjutnya: cara kerja array di JavaScript, dan segelintir method (push, slice, map, dan kawan-kawannya) yang mengerjakan sebagian besar pekerjaan berat.