Object JavaScript

Object adalah variable dengan banyak value dan setiap value memiliki property.

Object sama saja seperti sebuah benda yang memiliki ciri-ciri dan fungsi.

Bayangkan saja sebuah motor. Setiap motor tentu memiliki ciri-ciri tertentu. Diantara ciri-ciri tersebut yaitu merk:Honda, model:matic, kelas:110, warna:putih.

Dari contoh di atas yang dinamakan object yaitu [motor]. Sedangkan [merk, model, kelas, warna] disebut sebagai property.

Setiap property berisi sebuah value. Pada contoh di atas yang dinamakan value yaitu [Honda, matic, 110, putih].

Penjelasan Object

Sebelum kita membahas mengenai object, perhatikan terlebih dahulu variable berikut ini:

var motor = "Honda";

Pada code di atas, kita memiliki sebuah variable dengan nama [motor]. Variable ini memiliki sebuah value yaitu [Honda].

Object sama seperti variable, namun dia memiliki banyak value:

var motor = {merk:"Honda", model:"matic", kelas:110, warna:"putih"};

Pada code di atas yang dinamakan object yaitu [motor].

Value pada object disebut sebagai [property value]. Sehingga pada code di atas yang dinamakan property value yaitu [Honda, matic, 110, putih].

Sedangkan yang dinamakan property yaitu [merk, model, kelas, warna].

Syntax

var namaObject = {property1:value1, property2:value2, ...};

Membuat object

Ada beberapa cara membuat object.

Cara 1

var namaObject = {};

Perhatikan contoh berikut ini:

<script>
var motor = {};
</script>

Pada contoh di atas kita membuat sebuah object bernama [motor] yang masih kosong, belum berisi property dan value.

Cara 2

var namaObject = new Object();

Perhatikan contoh berikut ini:

<script>
var motor = new Object();
</script>

Pada contoh di atas kita membuat sebuah object bernama [motor] yang masih kosong, belum berisi property dan value.

Mengisi object

Ada beberapa cara mengisi sebuah object dengan pasangan property dan value.

Cara 1

namaObject.property = value;

Perhatikan contoh berikut ini:

<script>
var motor = {};

motor.merk = "Honda";
motor.model = "matic";
motor.kelas = 110;
motor.warna = "putih";
</script>

Pada contoh di atas kita mengisi object [motor] dengan empat pasang property dan value secara satu-persatu.

Code di atas sama artinya dengan code di bawah ini. Bedanya hanya pada bagian membuat objectnya saja.

<script>
var motor = new Object();

motor.merk = "Honda";
motor.model = "matic";
motor.kelas = 110;
motor.warna = "putih";
</script>

Cara 2

namaObject["property"] = value;

Perhatikan contoh berikut ini:

<script>
var motor = {};

motor["merk"] = "Honda";
motor["model"] = "matic";
motor["kelas"] = 110;
motor["warna"] = "putih";
</script>

Pada contoh di atas kita mengisi object [motor] dengan empat pasang property dan value secara satu-persatu.

Memasukkan property dan value dengan cara di atas disebut sebagai associative array. Mengenai associative array akan dibahas pada tutorial mendatang.

Cara 3

Selain dengan cara diisi satu-persatu, object juga bisa secara langsung diisi dengan pasangan property dan value saat object tersebut dibuat:

var motor = {merk:"Honda", model:"matic", kelas:110, warna:"putih"};

Spasi dan linebreak tidak berpengaruh dalam JavaScript. Oleh karena itu code di atas sama artinya dengan yang berikut ini:

var motor = {
    merk:"Honda",
    model:"matic",
    kelas:110,
    warna:"putih"
};

Object constructor

Object constructor adalah salah satu cara membuat object menggunakan function.

Ada dua langkah dalam membuat object menggunakan object constructor, yaitu:

  • Buat constructor function
  • Buat object menggunakan constructor function

1. Membuat constructor function

Berikut ini adalah syntax dari constructor function:

function namaFunction(parameter1, parameter2, ...) {
    this.property1 = parameter1;
    this.property2 = parameter2;
    ...
};

Misalkan saja kita ingin membuat sebuah object berupa motor dan motor itu akan memiliki beberapa ciri atau property seperti merk, model, kelas dan warna. Untuk membuat object berdasarkan keterangan tersebut kita harus membuat sebuah constructor function seperti di bawah ini:

function motor(iMerk, iModel, iKelas, iWarna) {
    this.merk = iMerk;
    this.model = iModel;
    this.kelas = iKelas;
    this.warna = iWarna;
};

Pada contoh di atas kita membuat sebuah constructor function bernama [motor]. Constructor function ini nantinya akan digunakan untuk membuat object yang kita inginkan.

2. Buat object menggunakan constructor function

Berikut ini adalah syntax apabila kita ingin membuat sebuah object menggunakan constructor function:

var namaObject = new namaFunction(argument1, argument2, ...);

(argument1, argument2, …) adalah value yang ingin dimasukkan ke dalam property.

Berikut ini adalah contoh constructor function yang digunakan untuk membuat object:

<script>
function motor(iMerk, iModel, iKelas, iWarna) {
    this.merk = iMerk;
    this.model = iModel;
    this.kelas = iKelas;
    this.warna = iWarna;
};

var motorKeren = new motor("Honda", "matic", 110, "putih");
</script>

Pada contoh di atas kita membuat sebuah object bernama [motorKeren] menggunakan constructor function. Sedangkan ("Honda", "matic", 110, "putih") adalah value yang akan dimasukkan ke dalam property di dalam object.

Dengan sebuah constructor function kita bisa membuat banyak object secara instan. Berikut ini adalah contoh kita membuat dua buah object menggunakan satu buah constructor function:

<script>
function motor(iMerk, iModel, iKelas, iWarna) {
    this.merk = iMerk;
    this.model = iModel;
    this.kelas = iKelas;
    this.warna = iWarna;
};

var motorKeren = new motor("Honda", "matic", 110, "putih");
var motorBalap = new motor("Yamaha", "racing", 110, "merah");
</script>

Dengan code di atas kita memiliki dua buah object yaitu [motorKeren] dan [motorBalap].

Memanggil property value

Kamu bisa memanggil sebuah property value dari object menggunakan 2 cara.

Cara 1:

namaObject.namaProperty

Berikut ini kita akan membuat sebuah object kemudian memanggil property value dari object tersebut menggunakan cara 1.

Contoh 1:

<script>
var motor = {merk:"Honda", model:"matic", kelas:110, warna:"putih"};
document.write(motor.merk + " " + motor.model);
</script>

Hasil contoh 1:

Honda matic

Cara 2:

namaObject[namaProperty]

Berikut ini kita akan membuat sebuah object kemudian memanggil property value dari object tersebut menggunakan cara 2.

Contoh 2:

<script>
var motor = {merk:"Honda", model:"matic", kelas:110, warna:"putih"};
document.write(motor["model"] + " " + motor["kelas"]);
</script>

Hasil contoh 2:

matic 110

Standar Object

Hampir semua hal yang ada di dalam JavaScript adalah object. Object terbagi menjadi dua yaitu custom object dan standar object.

Custom object adalah object yang dibuat secara khusus seperti yang sudah dijelaskan di atas.

Standar object atau disebut juga native object adalah object yang sudah ada di JavaScript. Ada berbagai macam standar object. Berikut ini adalah semua hal di dalam JavaScript yang termasuk kedalam standar object:

  • String object (atau string primitive value yang dianggap sebagai object)
  • Number object (atau number primitive value yang dianggap sebagai object)
  • Boolean object (atau boolean primitive value yang dianggap sebagai object)
  • Date
  • Math
  • Regular expression
  • Array
  • Function

Catatan

Primitive value adalah jenis data biasa seperti string ("dunia"), number (123), dan boolean (true).

Constructor function untuk standar Object

Setiap standar object memiliki constructor function. Berikut ini adalah contohnya:

var a = new String();
var b = new Number();
var c = new Boolean()
var d = new Array();
var e = new RegExp();
var f = new Function();
var g = new Date();

Math() object tidak termasuk dalam daftar di atas karena Math adalah global object. [new] keyword tidak bisa digunakan untuk Math.

Penjelasan method

Method adalah sebuah function yang bisa dilakukan sebuah object.

Bayangkan sebuah motor yang bisa melakukan beberapa hal yaitu: start, maju, mundur, rem.

Pada contoh di atas yang dinamakan object adalah [motor]. Sedangkan [start, maju, mundur, rem] disebut sebagai method.

Membuat method

Kamu bisa membuat sebuah method menggunakan syntax berikut ini:

namaMethod : function() { code yang mau dieksekusi }

Method sebenarnya adalah sebuah property yang berisi sebuah function.

Berikut ini adalah contoh sebuah object yang berisi beberapa property dan satu method bernama [jenisMotor].

Contoh 3:

<script>
var motor = {
    merk:"Honda",
    model:"matic",
    kelas:110,
    warna:"putih",
    jenisMotor: function() {document.write(motor.merk + " " + motor.model + " " + motor.kelas)}
};
</script>

Memanggil method

Untuk memanggil sebuah method kamu bisa menggunakan syntax berikut:

namaObject.namaMethod(parameter)

Berikut ini kita akan membuat sebuah object yang berisi satu method lalu memanggilnya.

Contoh 4:

<script>
var motor = {
    merk:"Honda",
    model:"matic",
    kelas:110,
    warna:"putih",
    jenisMotor: function() {document.write(motor.merk + " " + motor.model + " " + motor.kelas)}
};

motor.jenisMotor();
</script>

Hasil contoh 4:

Honda matic 110

One Response to “Object JavaScript”

  1. ussa auto says:

    I simply want to tell you that I am just newbie to weblog and honestly liked you’re web site. Likely I’m likely to bookmark your website . You actually have awesome posts. Appreciate it for sharing your website.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>