BAB 10 — Object dalam JavaScript: Mewakili Data Kompleks dengan Struktur yang Fleksibel

BAB 10 — Object dalam JavaScript: Mewakili Data Kompleks dengan Struktur yang Fleksibel

Object adalah struktur data terpenting dalam JavaScript. Hampir semua hal dalam JavaScript — termasuk array, function, bahkan browser API — sebenarnya adalah object atau berbasis object. Dengan object, kita bisa menyimpan data dalam bentuk pasangan key–value yang mudah diakses dan dimodifikasi.

Pada bab ini, kita membahas object literal, property, method, penggunaan this, nested object, manipulasi property, optional chaining, dan destructuring.

1. Object Literal

Cara paling umum membuat object adalah dengan object literal, menggunakan {}.

Contoh dasar:

const user = {
  name: "Andi",
  age: 20,
  city: "Bandung"
};

Object menyimpan data dalam bentuk pasangan:

key: value

Key biasanya berupa string (walau ditulis tanpa tanda kutip).

2. Property & Method

A. Property

Nilai dalam object.

console.log(user.name);   // "Andi"
console.log(user["city"]); // "Bandung"

B. Method

Function yang menjadi bagian dari object.

const user = {
  name: "Budi",
  greet: function() {
    console.log("Hello!");
  }
};

user.greet(); // Hello!

Method dengan penulisan modern:

const user = {
  name: "Budi",
  greet() {
    console.log("Hi!");
  }
};

3. this pada Object

Kata kunci this mengacu pada object yang memanggil method.

Contoh:

const user = {
  name: "Citra",
  sayName() {
    console.log(this.name);
  }
};

user.sayName(); // "Citra"

this bekerja sesuai context. Pada object:

  • this → mengacu pada object itu sendiri

PENTING: Arrow function tidak punya this sendiri

const user = {
  name: "Dani",
  say() {
    console.log(this.name); // "Dani"
  },
  sayArrow: () => {
    console.log(this.name); // undefined (karena tidak punya this)
  }
};

user.say();
user.sayArrow();

Gunakan function biasa jika butuh this.

4. Nested Object

Object dapat berisi object lain.

const person = {
  name: "Eka",
  address: {
    street: "Jl. Merdeka",
    city: "Jakarta",
    geo: {
      lat: -6.2,
      long: 106.8
    }
  }
};

Mengakses nested:

console.log(person.address.city);
console.log(person.address.geo.lat);

5. Menambah dan Menghapus Property

A. Menambah property 

person.job = "Designer";
person["hobby"] = "Gaming";

B. Menghapus property

delete person.hobby;

C. Mengecek apakah property ada

console.log("job" in person); // true
console.log(person.hasOwnProperty("age")); // false

6. Optional Chaining (?.)

Memudahkan akses nested object tanpa error ketika property tidak ada.

Tanpa optional chaining:

console.log(person.address.geo.lat);
// error jika address atau geo tidak ada

Dengan optional chaining:

console.log(person?.address?.geo?.lat); 
// undefined jika salah satu tidak ada

Pada method:

user?.sayHello?.();

Pada array:

data?.[0];

Fitur ini sangat berguna saat bekerja dengan API atau data dinamis.

7. Object Destructuring

Destructuring adalah cara modern mengambil data dari object secara ringkas.

Contoh dasar:

const user = {
  name: "Fajar",
  age: 22,
  city: "Jogja"
};

const { name, age } = user;
console.log(name); // "Fajar"
console.log(age);  // 22

Ganti nama variabel:

const { city: kota } = user;
console.log(kota); // "Jogja"

Destructuring nested object:

const person = {
  name: "Gita",
  address: {
    city: "Bandung",
    zip: 40212
  }
};

const {
  address: { city, zip }
} = person;

console.log(city); // Bandung

Default value:

const { hobby = "Tidak ada" } = user;

Ringkasan Cepat

Konsep Fungsi
Object literal cara membuat object
Property data dalam object
Method function dalam object
this merujuk ke object pemanggil method
Nested object object di dalam object
Menambah/hapus property manipulasi fleksibel
Optional chaining akses aman pada nested
Destructuring ekstraksi data ringkas

Related Posts