Cara menggunakan OBJEKT pada JavaScript

Didalam javascript, object sangat mirip seperti array yakni sebuah tipe data bentukan yang terdiri dari kumpulan tipe data lain. Object bisa diisi data string, number, boolean atau bahkan object lain. Berbeda dengan array, object memiliki function sendiri.

Object juga bisa disebut sebagai container, yakni wadah yang digunakan untuk menampung berbagai data.

Dalam bahasa permrograman PHP terdapat konsep associative array yaitu yang key-nya bisa diisi string (tidak hanyaa angka sahaa sebagaimana layaknya array biasa). Konsep associative array PHP ini sangat mirip seperti object di dalam javascript.

Format Dasar Object

Seperti yang saya singgung sebelumnya, object di javascript sangat mirip seperti array, dan cara pembuatanya pun hampir sama.

Berikut format dasar pembuatan object di javascript:

var namaObject = {
    property1 : "isi_property1",
    property2 : "isi_property2",
    property3 : "isi_property3",
    
    method1 : function() {
        "isi methode 1";
    },
    
    method2 : function() {
        "isi methode 2";
    }
}

Pada baris pertama saya membuaat variabel namaObject, variabel inilah yang akan diisi dengan data object. Aturan nama object sama seperti identifier lain, yakni boleh diawali dengan angka, tidak boleh mengandung spasi, dst.

Block kode program untuk pendefinisian object diawali tanda kurung kurawal. Disinilah 'isi' dari object kita tulis.

Dalam pendefinisian object, terdapat istilah property dan method. Property adalah sebutan untuk variabel yang berada di dalam object. Sedangkan method adalah function yang ditempatkan ke dalam object.

Baik property maupun method diberi nilai menggunakan tanda titik dua, bukan tanda sama dengan sebagaimana layaknya pengisiaan variabel biasa (operasi assignment). Diantara property yang satu dengan yang lain, dipisah dengan tanda koma.

Sebenarnyaa, isi object ini (property dan method) adalah opsional, sehingga boleh tidak ditulis.

Berikut contohnya:

var foo = {};
console.log(typeof foo); // object

Yup, dengan menulis tanda kurung kurawal kosong, kita sudah bisa membuat object javascript. Hasil dari operator typeof menyatakan bahwa vaariabel foo adalah object. Tapi tentu saja agar bisa bermanfaat, kita harus mengisi object ini dengan property dan method.

Object Property

Property adalah sebutan untuk variabel yang diletakan ke dalam object. Berikut contoh pembuatanya:

var mahasiswa = {
    nama : "Salogy",
    jurusan : "Teknik Informatika",
    ipk : 3.67,
    semester : 4
};

Disini saya membuat variabel mahasiswa yang akan diisi dengan data-data mahasiswa. Ohject mahasiswa terdiri dari 4 property: nama, jurusan, ipk dan semester. Setiap properrty diisi denga berbagai daata. Diantara property satu dengan yang lain dipisah denga tanda koma.

Tanda titik koma diakhir penulisan object juga sebaiknya tetap ditulis (setelah kurung kurawal penutup). Karena proses pembuatan obeject sama seperti pengisiaan variabel biasa, jadi butuh diaakhiri dengan tanda titik koma.

Penulisan memanjang kebawah seperti diatas bukan sebuah keharusan. Kita  juga bias membuatnya dalam 1 baris saja:

var mahasiswa = { nama : "Salogy", jurusan : "Teknik Informatika",
    ipk : 3.67, semester : 4 };

Setelah mengisi object mahasiswa dengan 4 property, bagaimana cara mengakses nilainya?

Terdapat 2 cara pengaksesan property (property accessors): menggunakan tanda titik (dot notation) atau menggunakan tanda kurung ssiku (bracket notation). Format dasarnya sebagai berikut:

object.property
object["property"]

Mari kita akan lihat praktek menggunakan dot notation dahulu:

var mahasiswa = {
    nama : "Salogy",
    jurusan : "Teknik Informatika",
    ipk : 3.67,
    semester : 4
};

console.log(mahasiswa.nama);  // Salogy
console.log(mahasiswa.jurusan);  // Teknik Informatika
console.log(mahasiswa.ipk);  // 3.67
console.log(mahasiswa.semester);  // 4

Untuk mmengakses property nama dari object mahasiswa, ditulis sebagai mahasiswa.nama. Pengaksesan prperty menggunakan dot notation merupakan cara yang paling umum dan paling sering digunakan didalam javascript.

Cara kedua adalah menggunakan bracket notation:

var mahasiswa = {
    nama : "Salogy",
    jurusan : "Teknik Informatika",
    ipk : 3.67,
    semester : 4
};

console.log(mahasiswa["nama"]);  // Salogy
console.log(mahasiswa["jurusan"]);  // Teknik Informatika
console.log(mahasiswa["ipk"]);  // 3.67
console.log(mahasiswa["semester"]);  // 4

Kali ini sayaa mengakses property nama object mahasiswa, ditulis dengan mahasiswa["nama"]. Tanda kutip perlu ditambahkan karena pada dasarnya nama property dianggap sebagai string.

Akan tetapi, penulisan dengan bracket notation memilikii kelebihan lain. Kita bisa mengakses property yang namanya tidak umum, seperti mengandung spasi atau karakter khusus seperti angka.

Mengakses property dengan bracket notation harus ditulis denga tanda kutip. Ini karena pada dasarnya nama property object diproses javascript sebagai sebuah string.

Menambah Object Property

Selain membuat langsung property pada saat pendefinisian object, kita juga bisa menambahkanya setelah object tersebut dibuat. Caranya mirip seperti mengisi array.

Mari kita lihat kembali cara membuat object mahasiswa:

var mahasiswa = {
    nama : "Salogy",
    jurusan : "Teknik Informatika",
    ipk : 3.67,
    semester : 4
};

Object diatas bisa juga saya buat seperti ini:

var mahasiswa = {};

mahasiswa.nama = "Salogy";
mahasiswa.jurusan = "Teknik Informatika";
mahasiswa.ipk = 3.67;
mahasiswa.semester = 4;

Saya membuat terlebih dahulu sebuah object kosong, yakni mahasiswa. Penisian property dilakukan setelah pendefinisian object. Caranya seperti mengisi variabel, hanya saja kita juga menulis lengkap nama object beserta nama property yang ingin ditambahkan.

Dengan menggunakan bracket notation, kita juga bisaa menambahkan property mahasiswa:

var mahasiswa = {};

mahasiswa["nama"] = "Salogy";
mahasiswa["jurusan"] = "Teknik Informatika";
mahasiswa["ipk"] = 3.67;
mahasiswa["semester"] = 4;

Khusus penambahan property dengan bracket notation, kita bisa membuat nama property yang memiliki spasi (yang akan error jika ditulis menggunakan dot notation).

Tentu saja kita juga bisa membuat sebagian property pada saaat pendefinisian dan sebagian lagi setelahnya:

var mahasiswa = { nama : "Salogy",
                  jurusan : "Teknik Informatika"};

mahasiswa.ipk = 3.67;
mahasiswa.semester = 4;

console.log(mahasiswa.nama);  // Salogy
console.log(mahasiswa.jurusan);  // Teknik Informatika
console.log(mahasiswa.ipk);  // 3.67
console.log(mahasiswa.semester);  // 4

Object Method

Selain property, didalam object bisa terdapat method, yakni sebutan untuk function. Penulisannya sangat mirip seperti function biasa yang kita bahas pada bab sebelumnya, yakni menggunakan function expressions.

Sebagai contoh object, kali ini saya membuat object mobil:

var mobil = { 
    merk : "Lamborghini Urus",
    tipe : "MPV",
    harga : 2000000000,
    warna : "Hitam"
};

console.log(mobil.merk);  // Lamborghini Urus
console.log(mobil.tipe);  // MPV
console.log(mobil.harga);  // 2000000000
console.log(mobil.warna);  // Hitam

Saya membuat variabel mobil yang akan diisi object dengan 4 property: merk, tipe, harga dan warna. Cara pembuatan property seperti ini sudah kita pelajari sebelumnya.

Sekarang, saya ingin menambahkan sebuah method hidupkan()"

var mobil = { 
    merk : "Lamborghini Urus",
    tipe : "MPV",
    harga : 2000000000,
    warna : "Hitam",
    hidupkan : function() {
        return "Mesin dihidupkan";
    }
};

console.log(mobil.hidupkan());  // Mesin dihidupkan

Perhatikan cara pembuatan method hidupkan(), saya menggunakan cara penulisan function expressions, dimana anonymous function diinput ke dalam variabel hidupkan.

Untuk menjalankan method, caranya adalah dengan menulis nama object, tanda titik, lalu nama method yang diikuti tanda kurung (yang nantinya sebagai tempat untuk argument).

Apa itu objek pada JavaScript?

Apa itu tipe data object JavaScript?

Apa itu object dalam pemrograman?

Apa itu method di JavaScript?