- Memahami Apa itu Fundamental Object
- Memahami Apa itu Object Initializer
- Memahami Apa itu Object Property
- Memahami Apa itu Object Method
- Memahami Apa itu Object Constructor
- Memahami Apa itu Object Prototype
- Memahami Apa itu Getter & Setter
- Memahami Apa itu JSON
- Memahami Date Object
Jika pada bab ini anda lupa apa itu definisi object?
Maka anda harus kembali ke chapter sebelumnya tentang Reference Types agar bisa melanjutkan chapter ini dengan baik. Sebelumnya kita telah mempelajari apa itu object dalam konteks data types, namun sebelum mengeksplorasi pembuatan dan pemanfaatan object.
Tahukah anda definisi object benar-benar sangat ambigu dalam javascript jika kita amati secara detail.
Object yang telah kita pelajari sebelumnya adalah sebuah Fundamental Object yang menjadi bagian dari built-in Object dalam sebuah Javascript Engine.
Pada dasarnya segala sesuatu yang ada didalam javascript adalah sebuah object, namun begitu dalam javascript terdapat fundamental object(s) yang menjadi dasar object semua objects yang ada di dalam javascript.
Di antaranya adalah :
- Object
- Function
- Boolean
- Symbol
- Error
- EvalError
- InternalError
- RangeError
- ReferenceError
- SyntaxError
- TypeError
- URIError
Sebelumnya kita telah mempelajari cara membuat function object menggunakan function constructor. Function adalah salah satu dari bagian fundamental object yang dimiliki oleh javascript.
Saya tegaskan sekali lagi pada dasarnya segala sesuatu yang ada didalam javascript adalah sebuah object, meskipun begitu kita tetap mempunyai kesempatan untuk membuat custom object buatan kita sendiri.
Ada tiga cara membuat custom object, menggunakan Object Initializer, Object Constructor, dan function style :
Object Initializer atau notasi initializer adalah cara membuat object tanpa menggunakan constructor, object dibuat dengan gaya literal di dalam kurung kurawal (curly brace) dan sering kali disebut dengan object literal.
Buka web console dengan menekan tombol CTRL+SHIFT+K, selanjutnya tulis kode di bawah ini :
var cantik = {firstname:'Maudy', lastname:'Ayunda Faza', age:23, hairColor:'black'}Jika kita memanggilnya :
Object dapat memiliki sebuah property yang memiliki key & value, pada kasus di atas object memiliki keys yaitu :
- age
- firstname
- haircolor
- lastname
Setiap keys memiliki values yaitu :
- 23
- "Maudy"
- "Black"
- "Ayunda Faza"
Value dapat berupa function, primitive atau object lagi.
Pada gambar di bawah ini kita membuat sebuah object bernama mod dengan properties firstname, lastname, age dan eyecolor.
Selain membuat properties dalam object, kita juga bisa membuat function di dalam object.
Di bawah ini kita membuat function dengan identifier fullname di dalam object.
Selain membuat object dengan literal kita juga bisa membuat object dengan memanfaatkan constructor. Keyword new digunakan untuk membuat constructor. Constructor memiliki ciri menggunakan huruf kapital.
Seperti yang telah kita pelajari sebelumnya pembuatan object dengan cara seperti ini tidak disarankan.
Untuk membuat object lebih ringkas kita bisa melakukanya dengan function style atau biasa disebut dengan function constructor. Sebelumnya kita membuat object dalam satu statement, ada cara lain membuat object dengan memanfaatkan function dan this keyword :
Javascript object bersifat mutable artinya properties dapat diubah, sebagai contoh pada gambar di bawah ini kita akan mengubah umur maudy.
Sebelumnya kita membuat object menggunakan function style, namun kita tidak bisa menambahkan property yang baru. Hal ini membuat penulisan kode menjadi tidak expressive, mari kita buktikan :
Pada gambar di atas kita hendak menambahkan property skill pada object constructor yang dibangun dengan function style. Saat kita membuat instance object dari Person dan akses properti skill maka hasilnya undefined.
Dari permasalahan tersebut ada masanya kita ingin menambah properties atau methods pada sebuah object constructor atau menambah properties atau methods pada seluruh object yang telah dibuat. Javascript memberikan solusi atas permasalahan ini dengan konsep prototype.
function Person(firstname, lastname, age, eyecolor) {
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
this.eyecolor = eyecolor;
}
Person.prototype.skill = "singing"; // <-- Prototype
var maudy = new Person("Maudy", "Ayunda Faza", 23, "Black")
console.log(maudy.skill); //singingDalam javascript, seluruh object akan menerima atau mewarisi (Inherit) methods dan properties dari sebuah Prototype.
Fitur Getter & Setter diperkenalkan tahun 2009 dalam EcmaScript 5, dibuat untuk mempermudah kita agar dapat melakukan komputasi properties pada object literal :
var mod = {
firstname: 'Maudy',
lastname: 'Ayunda Faza',
age: 23,
haircolor: 'black',
get getFirstName() {
return this.firstname
},
set setFirstName(name) {
this.firstname = name;
}
}Pada kode di atas untuk getter kita menggunakan keyword get dan untuk setter kita menggunakan keyword set. Untuk menggunakan getter eksekusi kode di bawah ini :
console.log(mod.getFirstName); // MaudyUntuk menggunakan setter agar kita bisa mengubah property dalam object mod, eksekusi kode di bawah ini :
mod.setFirstName = 'Rindu';
console.log(mod.getFirstName); // RinduJavascript sudah mendukung operasi destructure untuk object literal, sebagai contoh kita memiliki object mod :
const mod = {
firstname: "Maudy",
lastname: "Ayunda Faza",
age: 23,
haircolor: "black"
};Untuk melakukan operasi extract properties atau destructure yang dimiliki oleh object mod tulis kode di bawah ini :
const { firstname, age } = mod;Untuk memeriksa hasilnya tulis kode di bawah ini dan eksekusi :
console.log(firstname, age);
// Output Maudy 23Sebuah object memiliki property yang dapat kita gunakan untuk menyimpan data. Di bawah ini kita membuat sebuah object dengan 2 property yaitu firstname dan age.
var person = {
firstname: 'Gun Gun',
age: 28,
};Jika kode di atas kita visualisasikan maka :
Object bersifat programmable artinya kita dapat :
- Menambahkan property baru
- Menghapus sebuah property
- Mengakses sebuah property
- Memeriksa sebuah property
Selalu ingat setiap kali kita membuat sebuah object kita dapat melakukan sebuah action yaitu menambah suatu property :
Pada kode di bawah ini kita membuat sebuah object bernama person.
var person = {
firstname: 'Gun Gun',
lastname: 'Febrianza',
};Seandainya kita lupa memberikan sebuah property, bagaimana menambahkan cara menambahkan property yang baru?
person.nationality = 'Indonesia';
console.log(person);Pada kode di atas kita menambahkan sebuah property baru. Pada kode di atas nationality adalah key dan ‘Indonesia’ adalah value yang diberikan.
Setelah kita menambahkan sebuah property baru kita juga dapat mengaksesnya.
var person = {
firstname: 'Gun Gun',
lastname: 'Febrianza',
age: 28,
eyecolor: 'Red Brown',
'super loyal': true
};Jika kita ingin mendapatkan nilai dari key firstname terdapat dua cara :
console.log(person.firstname + ' is ' + person.age + ' years old.');
// Gun Gun is 28 years old.
console.log(person['firstname'] + ' is ' + person['age'] + ' years old.');
// Gun Gun is 28 years old.Lalu bagaimana cara mendapatkan nilai dari key ‘super loyal’ yang bersifat multiword key? Eksekusi kode di bawah ini :
console.log(person['super loyal']); // trueSelain kita menambahkan property baru, kita juga dapat menghapus property yang sudah kita buat.