Belajar Dasar JavaScript: Objek

Dalam JavaScript, objek digunakan untuk merepresentasikan tipe data yang kompleks.

Objek Kosong

Objek kosong dapat dibuat dengan {}. Contohnya:

const kosong = {};

Property

Dalam Objek terdapat key dan value. Jadi, objek bisa digunakan untuk merepresentasikan tabel. Key juga disebut sebagai property.

Berikut adalah contoh data yang bisa di representasikan oleh objek.

Objek untuk tabel tersebut bisa ditulis seperti berikut:

const orang = {
  nama: "Toiman",
  umur: 29,
};

Value juga bisa berupa objek sehingga kita bisa membuat objek bersarang. Contohnya:

const orang = {
  nama: "Toiman",
  umur: 29,
  alamat: {
    rt: "11",
    rw: "33",
  },
};

Untuk mengakses nilai dari property/key kita bisa menggunakan dot operator (operator titik/.). Contohnya:

console.log(orang.nama); // Toiman
console.log(orang.umur); // 29

Kita juga bisa mengakses nilai dari property dengan menggunakan indexing operator. Contohnya:

console.log(orang["nama"]); // Toiman
console.log(orang["umur"]); // 29

Jika kita mengakses property yang tidak ada, maka akan dikembalikan nilai undefined. Contohnya:

console.log(orang.pacar); // undefined

Kita dapat mengubah nilai dari property dengan dot operator. Contohnya:

console.log(orang.nama); // Toiman
orang.nama = "Sugi";
console.log(orang.nama); // Sugi

Nilai dari property juga dapat diubah menggunakan indexing operator. Contohnya:

console.log(orang.nama); // Sugi
orang["nama"] = "Yai";
console.log(orang.nama); // Yai

Jika kita mengubah nilai dari property yang tidak ada, maka property tersebut akan dibuat. Contohnya:

console.log(orang.suku); // undefined
orang.suku = "Batak";
console.log(orang.suku); // Batak

Method

Method adalah fungsi yang berada di dalam objek. Berikut adalah contoh pendeklarasian method:

const orang = {
  nama: "Toiman",
  umur: 29,
  sayHello: function () {
    console.log(this.nama, this.umur);
  },
};

orang.sayHello(); // Toiman 29

Untuk memanggil method kita harus menggunakan dot operator (.).

Apa maksud this? Pada contoh di atas this menunjuk ke objek orang. Pada saat kita memanggil method yang berada di sebuah objek, maka this akan menunjukkan objek tersebut.

Method juga dapat dibuat dengan menggunakan sintak yang lebih sederhana, yaitu tanpa menggunakan keyword function. Contohnya:

const orang = {
  nama: "Toiman",
  umur: 29,
  sayHello() {
    console.log(this.nama, this.umur);
  },
};

orang.sayHello(); // Toiman 29

Method juga dapat ditambahkan sebuah objek.

const orang = {
  nama: "Toiman",
  umur: 29,
};

orang.greet = function () {
  console.log(`Hello i am ${this.nama} with age ${this.umur}`);
};
orang.greet(); // Hello i am Toiman with age 29

Perulangan For-In

Perulangan For-In merupakan jenis perulangan yang digunakan untuk mengulangi semua key/properti yang ada di dalam sebuah objek.

const obj = {
  name: "Sapi",
  tipe: "Binatang",
};

for (let key in obj) {
  console.log(`Key: ${key}, value: ${obj[key]}`);
}

// Output:
// Key: name, value: Sapi
// Key: tipe, value: Binatang

Jika perulangan ini bisa digunakan pada Array, maka perulangan ini akan mengulangi semua indeks yang ada di dalam array. Perulangan akan dimulai dengan angka 0 sampai indeks ke terakhir yang ada di dalam array. Contohnya:

const arr = ["Ana", "Anta", "Huwa"];
for (let index in arr) {
  console.log(`Index: ${index}`);
  console.log(`Item: ${arr[index]}`);
}

// Output:
// Index: 0
// Item: Ana
// Index: 1
// Item: Anta
// Index: 2
// Item: Huwa

Membandingkan Dua Objek

Jika kita membandingkan dua objek maka akan dicek apakah kedua objek berada pada lokasi memory yang sama. Jadi nilai true hanya akan dihasilkan jika kita membandingkan suatu objek dengan dirinya sendiri.

Untuk lebih memahaminya lihat contoh berikut:

const obj1 = { nama: "Rudi", nomor: 1 };
const obj2 = { nama: "Rudi", nomor: 1 };
const obj3 = obj1;

console.log(obj1 == obj2); // false
console.log(obj1 == obj3); // true
console.log(obj2 == obj3); // false

console.log(obj1 === obj2); // false
console.log(obj1 === obj3); // true
console.log(obj2 === obj3); // false

Menggunakan Loose equality operator (==) dan Strict equality operator sama saja.