Working with objects

JavaScript dirancang berdasarkan paradigma berbasis objek sederhana. Sebuah objek adalah kumpulan dari properti, dan sebuah properti adalah pasangan hubungan antara sebuah nama (atau kunci) dan sebuah nilai. Nilai dari properti bisa berupa sebuah function/fungsi, Dalam kasus ini properti itu disebut method. Selain objek yang sudah di tentukan pada browser, Kamu bisa menentukan/membuat objek kamu sendiri. Bab ini menjelaskan bagaimana cara menggunakan objek, properti, function, dan method, serta bagaimana cara membuat objek kamu sendiri.

Ikhtisar Objek

Objek pada JavaScript sama seperti banyak bahasa pemrograman lainnya, dapat dibandingkan dengan objek dalam kehidupan nyata. Konsep objek dalam JavaScript dapat dipahami dengan kehidupan nyata, objek nyata.

Dalam JavaScript, objek adalah entitas yang berdiri sendiri dengan properti dan tipe. Bandingkan dengan sebuah cangkir, misalnya. Sebuah cangkir adalah objek dengan banyak properti. Cangkir memiliki warna, desain, berat, bahan terbuat dari, dll. Dengan jalan yang sama, objek JavaScript dapat memiliki banyak properti yang menentukan karakteristiknya.

Objek dan propertinya

Sebuah objek JavaScript memiliki banyak properti yang terkait dengannya. Sebuah properti dari sebuah objek dapat dijelaskan sebagai variabel yang dilampirkan pada objek itu. Properti-properti objek pada dasarnya sama dengan variabel JavaScript biasa, kecuali lampiran pada objek. Properti-properti dari sebuah objek menentukan karakteristik objek itu. Kamu mengakses properti objek dengan sebuah notasi titik sederhana:

namaObjek.namaProperti

Seperti semua variabel JavaScript, pasangan nama objek (yang bisa menjadi sebuah variabel normal) dan nama properti adalah bersifat peka terhadap huruf. Anda dapat menetapkan properti dengan memberikan sebuah nilai. Sebagai contoh, mari buat sebuah objek bernama mobilKu dan dan berikan dia properti bernama pembuat, model, dan tahun sebagai berikut:

var mobilKu = new Object();
mobilKu.pembuat = 'Ford';
mobilKu.model = 'Mustang';
mobilKu.tahun = 1969;

Properti pada sebuah objek yang tidak ditetapkan/diberi nilai adalah undefined (dan bukan null).

mobilKu.warna; // undefined

Properti-properti dari objek JavaScript juga dapat diakses atau diatur menggunakan notasi kurung siku (untuk lebih jelasnya lihat property accessors). Objek kadang-kadang disebut associative arrays, karena setiap properti dikaitkan dengan nilai string yang bisa digunakan untuk aksesnya. Jadi contohnya, Anda dapat mengakses properti-properti dari objek mobilKu osebagai berikut:

mobilKu['pembuat'] = 'Ford';
mobilKu['model'] = 'Mustang';
mobilKu['tahun'] = 1969;

Sebuah nama properti objek dapat berupa string dari JavaScript yang valid, atau apa pun yang dapat dirubah menjadi string, termasuk string kosong. Namun, nama properti apa pun yang tidak valid sebagai identifikasi di JavaScript (contohnya, nama properti yang memiliki spasi atau tanda hubung, atau yang dimulai dengan angka) hanya dapat diakses menggunakan notasi kurung siku. Notasi ini juga sangat berguna ketika nama properti harus ditentukan secara dinamis (ketika nama properti belum ditentukan hingga waktu proses). Contohnya adalah sebagai berikut:

// empat variabel dibuat dan diberi nilai di sekali jalan, 
// dipisahkan oleh koma
var myObj = new Object(),
    str = 'myString',
    rand = Math.random(),
    obj = new Object();

myObj.type              = 'sintak titik';
myObj['date created']   = 'String dengan spasi';
myObj[str]              = 'nilai String';
myObj[rand]             = 'Angka Acak';
myObj[obj]              = 'Objek';
myObj['']               = 'Bahkan sebuah string kosong';

console.log(myObj);

Tolong dicatat bahwa semua kunci di dalam notasi kurung siku dirubah ke dalam tipe String, karena dalam objek JavaScript hanya bisa memiliki tipe String sebagai tipe kunci. Sebagai contoh, dalam kode di atas, ketika kunci  obj ditambahkan dalam myObj, JavaScript akan memanggil method obj.toString() , dan menggunakan hasil berupa string ini sebagai kunci baru.

Kamu juga dapat mengakses properti dengan menggunakan nilai string yang disimpan dalam sebuah variabel:

var namaProperti = 'pembuat';
mobilKu[namaProperti] = 'Ford';

namaProperti = 'model';
mobilKu[namaProperti] = 'Mustang';

Kamu bisa menggunakan notasi kurung siku dengan for...in untuk mengiterasi ulang semua kumpulan properti yang terdaftar dari sebuah objek. Untuk mengilustrasikan cara kerjanya, fungsi berikut ini menampilkan properti-properti dari objek ketika kamu memasukkan objek dan nama objek sebagai argument pada fungsi/function:

function showProps(obj, objName) {
  var result = '';
  for (var i in obj) {
    // obj.hasOwnProperty() digunakan untuk menyaring properti dari rantai prototipe objek
    if (obj.hasOwnProperty(i)) {
      result += objName + '.' + i + ' = ' + obj[i] + '\n';
    }
  }
  return result;
}

Jadi memanggil fungsi/function showProps(mobilKu, "mobilKu") akan mengembalikan:

mobilKu.pembuat = Ford
mobilKu.model = Mustang
mobilKu.tahun = 1969

Menyebutkan properti dari sebuah objek

Dimulai dengan  ECMAScript 5, ada tiga cara asli untuk mendaftarkan / melintasi properti-properti objek:

• Perulangan for...in
  Metode ini melintasi semua kumpulan properti yang terdaftar dari sebuah objek dan rantai prototipnya.
• Object.keys(o)
  Method ini mengembalikan array dengan semua milik (tidak di rantai prototip) nama-nama ("kunci") properti terhitung dari sebuah objek o.
• Object.getOwnPropertyNames(o)
  Metode ini mengembalikan sebuah array berisikan semua nama-nama properti (kumpulan terhitung atau tidak) dari sebuah objek o.

Sebelum ECMAScript 5, tidak ada cara asli untuk mendaftarkan semua properti-properti dari suatu objek. Namun, ini dapat dicapai dengan fungsi berikut:

function listAllProperties(o) {
	var objectToInspect;     
	var result = [];
	
	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) {  
      result = result.concat(Object.getOwnPropertyNames(objectToInspect));  
	}
	
	return result; 
}

Ini dapat berguna untuk memperlihatkan properti-properti  tersembunyi" (properti-properti dalam rantai prototip yang tidak dapat diakses melalui objek, karena properti lain memiliki nama yang sama di rantai prototip sebelumnya). Mendaftarkan properti-properti yang dapat diakses hanya dapat dilakukan dengan menghapus duplikat di dalam array.

Membuat Objek Baru

JavaScript mempunyai sejumlah objek yang telah ditetapkan. Selain itu, Kamu dapat membuat objek sendiri. Kamu bisa membuat sebuah objek menngunakan sebuah object initializer. Sebagai alternatif, kamu bisa membuat sebuah fungsi konstruktor lalu menginstanisasi sebuah pemanggilan objek bersama dengan operator new.

Menggunakan object initializers

Selain membuat objek menggunakan fungsi konstruktor, kamu bisa membuat objek menggunakan sebuah object initializer. Menggunakan object initializers terkadang disebut sebagai  membuat objek dengan notasi literal. "Object initializer" sesuai dengan terminologi yang digunakan oleh C++.

Sintak untuk objek yang menggunakan sebuah object initializer adalah:

var obj = { property_1:   value_1,   // property_# may be an identifier...
            2:            value_2,   // or a number...
            // ...,
            'property n': value_n }; // or a string

Dimana obj adalah nama dari objek baru, setiap property_i adalah sebuah pengidentifikasi (baik sebuah nama, sebuah angka, atau sebuah string literal), dan setiap value_i adalah sebuah ekpresi yang nilainya sudah ditetapkan pada property_i.  obj dan penetapan nilai adalah opsional, jika kamu tidak butuh rujukan ke objek ini, kamu tidak perlu menetapkannya ke sebuah variabel. (Catatan bahwa kamu perlu untuk  membungkus objek literal dalam sebaris jika objek muncul dimana sebuah statement di harapkan, jadi kamu tidak punya literal yang bingung dengan sebuah blok statement.)

Object initializers adalah ekpresi, dan setiap object initializer mengembalikan sebuah objek baru. Sebuah objek baru dibuat sewaktu statement yang muncul di eksekusi. Object initializers identik membuat objek berbeda yang tidak akan sama apabila dibandingkan. Objek dibuat jika sebuah pemanggilan new Object() adalah objek dari ekpresi literal objek instan dari Object.

Pernyataan berikut membuat objek dan menetapkannya ke variabel x jika dan hanya jika ekspresi cond adalah benar:

if (cond) var x = {greeting: 'hi there'};

Contoh berikut membuat myHonda dengan tiga properti. Perhatikan bahwa properti engine juda adalah sebuah objek yang mempunyai properti-propertinya sendiri.

var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};

Kamu juga bisa menggunakan object initializers untuk membuat arrays. Lihat array literals.

Menggunakan fungsi konstruktor

Kamu bisa membuat sebuah objek dengan dua langkah alternatif ini:

1. Tetapkan tipe objek dengan menulis sebuah fungsi konstruktor. Ada kebiasaan dengan alasan yang bagus untuk menggunakan huruf besar di awal huruf.
2. Membuat sebuah instan objek dengan new.

Untuk menetapkan sebuah tipe objek, buat fungsi untuk tipe objek tersebut yang menentukan nama, properti-properti, dan method-methodnya. Misalnya, Anda ingin membuat jenis objek untuk mobi. Kamu ingin jenis objek ini disebut Mobil,  dan kamu ingin memiliki properti pembuat, model, dan tahun. Untuk melakukan ini, kamu akan menulis fungsi berikut:

function Mobil(pembuat, model, tahun) {
  this.pembuat= pembuat;
  this.model = model;
  this.tahun= tahun;
}

Perhatikan penggunaan this untuk menetapkan nilai ke properti objek berdasarkan nilai yang diteruskan kepada fungsi.

Sekarang kamu bisa membuat sbuah objek yang disebut mobilku sebagai berikut:

var mobilku = new Mobil('Eagle', 'Talon TSi', 1993);

Statement ini membuat mobilku dan memberikannya nilai yang spesifik untuk propertinya. Lalu nilai dari mobilku.pembuat adalah string "Eagle", mobilku.tahun adalah integer 1993, dan seterusnya.

Kamu bisa membuat sejumlah objek Mobil dengan memanggil to new. Sebagai contoh.

var mobilkens = new Mobil('Nissan', '300ZX', 1992);
var mobilrap = new Mobil('Mazda', 'Miata', 1990);

Sebuah objek bisa mempunyai properti yang merupakan objek lain. Misalnya, Kamu mendefinisikan objek yang disebut orang sebagai berikut:

function Orang(nama, umur, kelamin) {
  this.nama = nama;
  this.umur = umur;
  this.kelamin = kelamin;
}

dan kemudian instan dua objek baru dengan new orangn sebagai berikut:

var rap = new Orang('Rap McKinnon', 33, 'Pria');
var ken = new Orang('Ken Jones', 39, 'Pria');

Kemudian, Anda dapat menulis ulang definisi Mobil untuk memasukan properti pemilik yang membutuhkan sebuah objek orang sebagai berikut:

function Mobil(pembuat, model, tahun, pemilik) {
  this.pembuat= pembuat;
  this.model = model;
  this.tahun = tahun;
  this.pemilik = pemilik;
}

Untuk membuat instan objek baru, kamu gunakan berikut:

var mobil1 = new Mobil('Eagle', 'Talon TSi', 1993, rap);
var mobil2 = new Mobil('Nissan', '300ZX', 1992, ken);

Catatan pengganti dari memasukkan sebuah nilai string literal dan integer ketika membuat objek baru, statement diatas memasukkan objek rap dan ken sebagai argument untuk pemilik. Kemudian jika kamu ingin mencari nama pemilik mobil2, kamu bisa mengakses properti berikut:

mobil2.pemilik.nama

Catatan bahka kamu selalu bisa menambahkan sebuah properti pada objek yang sebelumnya telah di buat. Contohnya statement

mobil1.warna= 'hitam';

menambahkan sebuah properti warna pada mobil1, dan memberikan sebuah nilai "hitam". Ini tidak mempengaruhi objek lain. Untuk menambahkan properti baru untuk semua objek dari tipe yang sama, kamu harus menambahkan properti pada definisi tipe objek Mobil.

Menggunakan method Object.create

Objek bisa juga di buat menggunakan method Object.create(). Method ini bisa sangat berguna, karena method ini membolehkan kamu memilih prototip objek untuk objek yang ingin kamu buat, tanpa harus mendefiniskan fungsi konstruktor.

//encapsulasi/pembungkusan 
//properti-properti dan method Hewan 
var Hewan = {
  type: 'Tidak bertulang belakang', // nilai awal properti
  displayType: function() {  // Method yang akan menampilkan tipe Hewan
    console.log(this.type);
  }
};

// Membuat hewan baru yang disebut hewan1 
var hewan1 = Object.create(Hewan);
hewan1.displayType(); // Keluaran:Tidak bertulang belakang

// Membuat hewan baru yang disebut Ikan
var ikan = Object.create(Hewan);
ikan.type = 'Ikan';
ikan.displayType(); // Keluaran:Ikan

Inheritance/Turunan

Semua objek pada javascript diturunkan setidaknya dari satu objek lain. Objek yang telah diturunkan disebut prototip, dan properti turunan bisa ditemukan dalam objek prototype dari konstruktor. Lihat Inheritance and the prototype chain untuk informasi lebih lanjut.

Indexing object properties

You can refer to a property of an object either by its property name or by its ordinal index. If you initially define a property by its name, you must always refer to it by its name, and if you initially define a property by an index, you must always refer to it by its index.

This restriction applies when you create an object and its properties with a constructor function (as we did previously with the Car object type) and when you define individual properties explicitly (for example, myCar.color = "red"). If you initially define an object property with an index, such as myCar[5] = "25 mpg", you subsequently refer to the property only as myCar[5].

The exception to this rule is array-like object reflected from HTML, such as the forms array-like object. You can always refer to objects in these array-like objects by either their ordinal number (based on where they appear in the document) or their name (if defined). For example, if the second <FORM> tag in a document has a NAME attribute of "myForm", you can refer to the form as document.forms[1] or document.forms["myForm"] or document.forms.myForm.

Defining properties for an object type

You can add a property to a previously defined object type by using the prototype property. This defines a property that is shared by all objects of the specified type, rather than by just one instance of the object. The following code adds a color property to all objects of type Car, and then assigns a value to the color property of the object car1.

Car.prototype.color = null;
car1.color = 'black';

See the prototype property of the Function object in the JavaScript reference for more information.

Defining methods

A method is a function associated with an object, or, simply put, a method is a property of an object that is a function. Methods are defined the way normal functions are defined, except that they have to be assigned as the property of an object. See also method definitions for more details. An example is:

objectName.methodname = functionName;

var myObj = {
  myMethod: function(params) {
    // ...do something
  }

  // OR THIS WORKS TOO

  myOtherMethod(params) {
    // ...do something else
  }
};

where objectName is an existing object, methodname is the name you are assigning to the method, and functionName is the name of the function.

You can then call the method in the context of the object as follows:

object.methodname(params);

You can define methods for an object type by including a method definition in the object constructor function. You could define a function that would format and display the properties of the previously-defined Car objects; for example,

function displayCar() {
  var result = 'A Beautiful ' + this.year + ' ' + this.make
    + ' ' + this.model;
  pretty_print(result);
}

where pretty_print is a function to display a horizontal rule and a string. Notice the use of this to refer to the object to which the method belongs.

You can make this function a method of Car by adding the statement

this.displayCar = displayCar;

to the object definition. So, the full definition of Car would now look like

function Car(make, model, year, owner) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
  this.displayCar = displayCar;
}

Then you can call the displayCar method for each of the objects as follows:

car1.displayCar();
car2.displayCar();

Using this for object references

JavaScript has a special keyword, this, that you can use within a method to refer to the current object. For example, suppose you have a function called validate that validates an object's value property, given the object and the high and low values:

function validate(obj, lowval, hival) {
  if ((obj.value < lowval) || (obj.value > hival)) {
    alert('Invalid Value!');
  }
}

Then, you could call validate in each form element's onchange event handler, using this to pass it the element, as in the following example:

<input type="text" name="age" size="3"
  onChange="validate(this, 18, 99)">

In general, this refers to the calling object in a method.

When combined with the form property, this can refer to the current object's parent form. In the following example, the form myForm contains a Text object and a button. When the user clicks the button, the value of the Text object is set to the form's name. The button's onclick event handler uses this.form to refer to the parent form, myForm.

<form name="myForm">
<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
<p><input name="button1" type="button" value="Show Form Name"
     onclick="this.form.text1.value = this.form.name">
</p>
</form>

Defining getters and setters

A getter is a method that gets the value of a specific property. A setter is a method that sets the value of a specific property. You can define getters and setters on any predefined core object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.

The following illustrates how getters and setters could work for a user-defined object o.

var o = {
  a: 7,
  get b() { 
    return this.a + 1;
  },
  set c(x) {
    this.a = x / 2;
  }
};

console.log(o.a); // 7
console.log(o.b); // 8
o.c = 50;
console.log(o.a); // 25

The o object's properties are:

• o.a — a number
• o.b — a getter that returns o.a plus 1
• o.c — a setter that sets the value of o.a to half of the value o.c is being set to

Please note that function names of getters and setters defined in an object literal using "[gs]et property()" (as opposed to __define[GS]etter__ ) are not the names of the getters themselves, even though the [gs]et propertyName(){ } syntax may mislead you to think otherwise. To name a function in a getter or setter using the "[gs]et property()" syntax, define an explicitly named function programmatically using Object.defineProperty (or the Object.prototype.__defineGetter__ legacy fallback).

The following code illustrates how getters and setters can extend the Date prototype to add a year property to all instances of the predefined Date class. It uses the Date class's existing getFullYear and setFullYear methods to support the year property's getter and setter.

These statements define a getter and setter for the year property:

var d = Date.prototype;
Object.defineProperty(d, 'year', {
  get: function() { return this.getFullYear(); },
  set: function(y) { this.setFullYear(y); }
});

These statements use the getter and setter in a Date object:

var now = new Date();
console.log(now.year); // 2000
now.year = 2001; // 987617605170
console.log(now);
// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001

In principle, getters and setters can be either

• defined using object initializers, or
• added later to any object at any time using a getter or setter adding method.

When defining getters and setters using object initializers all you need to do is to prefix a getter method with get and a setter method with set. Of course, the getter method must not expect a parameter, while the setter method expects exactly one parameter (the new value to set). For instance:

var o = {
  a: 7,
  get b() { return this.a + 1; },
  set c(x) { this.a = x / 2; }
};

Getters and setters can also be added to an object at any time after creation using the Object.defineProperties method. This method's first parameter is the object on which you want to define the getter or setter. The second parameter is an object whose property names are the getter or setter names, and whose property values are objects for defining the getter or setter functions. Here's an example that defines the same getter and setter used in the previous example:

var o = { a: 0 };

Object.defineProperties(o, {
    'b': { get: function() { return this.a + 1; } },
    'c': { set: function(x) { this.a = x / 2; } }
});

o.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
console.log(o.b); // Runs the getter, which yields a + 1 or 6

Which of the two forms to choose depends on your programming style and task at hand. If you already go for the object initializer when defining a prototype you will probably most of the time choose the first form. This form is more compact and natural. However, if you need to add getters and setters later — because you did not write the prototype or particular object — then the second form is the only possible form. The second form probably best represents the dynamic nature of JavaScript — but it can make the code hard to read and understand.

Deleting properties

You can remove a non-inherited property by using the delete operator. The following code shows how to remove a property.

// Creates a new object, myobj, with two properties, a and b.
var myobj = new Object;
myobj.a = 5;
myobj.b = 12;

// Removes the a property, leaving myobj with only the b property.
delete myobj.a;
console.log ('a' in myobj); // yields "false"

You can also use delete to delete a global variable if the var keyword was not used to declare the variable:

g = 17;
delete g;

Comparing Objects

In JavaScript objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.

// Two variables, two distinct objects with the same properties
var fruit = {name: 'apple'};
var fruitbear = {name: 'apple'};

fruit == fruitbear; // return false
fruit === fruitbear; // return false

// Two variables, a single object
var fruit = {name: 'apple'};
var fruitbear = fruit;  // assign fruit object reference to fruitbear

// here fruit and fruitbear are pointing to same object
fruit == fruitbear; // return true
fruit === fruitbear; // return true

fruit.name = 'grape';
console.log(fruitbear);    // yields { name: "grape" } instead of { name: "apple" }

For more information about comparison operators, see Comparison operators.

See also

• To dive deeper, read about the details of javaScript's objects model.
• To learn about ECMAScript 2015 classes (a new way to create objects), read the JavaScript classes chapter.