Section Artikel
Dalam kehidupan nyata, mobil adalah sebuah object.
Mobil memiliki sifat seperti berat dan warna, dan method seperti start dan stop.
| Object | Properti | Method |
|---|---|---|
car.name = Fiat car.model = 500 car.weight = 850kg car.color = white | car.start() car.drive() car.brake() car.stop() |
Semua mobil memiliki property yang sama, tetapi dapat memiliki nilai property yang berbeda pada setiap mobil.
Semua mobil memiliki method yang sama, tetapi method tersebut dilakukan pada waktu yang berbeda.
Sebelumnya telah dijelaskan bahwa variabel pada JavaScript adalah wadah untuk menampung nilai data.
Kode berikut ini memberikan nilai sederhana (Fiat) ke dalam variabel bernama car.
Contoh:
<!DOCTYPE html> <html> <body> <h2>Variabel JavaScript</h2> <p id="demo"></p> <script> // membuat dan menampilkan variabel: var car = "Fiat"; document.getElementById("demo").innerHTML = car; </script> </body> </html>
Object juga merupakan variabel. Tetapi object bisa mengandung banyak nilai.
Kode berikut ini menunjukan bagaimana cara memberikan banyak nilai seperti (Fiat, 500, white) ke dalam variabel bernama car.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>Object JavaScript</h2>
<p id="demo"></p>
<script>
// membuat object:
var car = {type:"Fiat", model:"500", color:"white"};
// menampilkan data dari object:
document.getElementById("demo").innerHTML = "Tipe mobilnya adalah" + car.type;
</script>
</body>
</html>
Nilai ditulis sebagai pasangan nama: nilai (nama dan nilai dipisahkan oleh titik dua).
Object JavaScript adalah wadah untuk nilai yang diberi nama atau biasa disebut properti atau method.
Cara mendefinisikan dan membuat object JavaScript dengan literal object.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>Object JavaScript</h2>
<p id="demo"></p>
<script>
// Membuat object:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
// Menampilkan beberapa data dari object:
document.getElementById("demo").innerHTML =
person.firstName + " berumur " + person.age + " tahun.";
</script>
</body>
</html>
Spasi dan jeda baris tidak penting. Dalam mendefinisikan object dapat mencakup banyak baris.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Object JavaScript</h2>
<p id="demo"></p>
<script>
// Buat sebuah object:
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// Menampilkan beberapa data dari object:
document.getElementById("demo").innerHTML =
person.firstName + " berumur " + person.age + " tahun.";
</script>
</body>
</html>
Pasangan nama: nilai dalam object JavaScript disebut properti:
| Properti | Nilai Properti |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
Kita dapat mengakses properti object dengan dua cara, yaitu:
objectName.propertyName
atau
objectName["propertyName"]
Contoh 1:
<!DOCTYPE html>
<html>
<body>
<h2>Object JavaScript</h2>
<p>Ada dua cara berbeda untuk mengakses properti object.</p>
<p>Anda dapat menggunakan person.property atau person ["property"].</p>
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>
</body>
</html>
Contoh 2:
<!DOCTYPE html>
<html>
<body>
<h2> Object JavaScript</h2>
<p>Ada dua cara berbeda untuk mengakses properti object.</p>
<p>Anda dapat menggunakan person.property atau person ["property"].</p>
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>
</body>
</html>
Object juga dapat memiliki method.
Method adalah tindakan yang dapat dilakukan pada object.
Method disimpan dalam properti sebagai definisi fungsi.
| Property | Property Value |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
| fullName | function() {return this.firstName + ” ” + this.lastName;} |
Method adalah fungsi yang disimpan sebagai properti.
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};Dalam definisi fungsi this mengacu pada “pemilik” fungsi.
Dalam contoh di atas, this adalah object person yang “memiliki” fungsi fullName.
Dengan kata lain, this.firstName berarti properti firstName dari object this.
Kita dapat mengakses method object dengan sintaks berikut:
objectName.methodName()
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>Object JavaScript</h2>
<p>Method pada object adalah definisi fungsi, disimpan sebagai nilai properti.</p>
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
Jika Anda mengakses method tanpa tanda kurung (), maka hal ini akan mengembalikan definisi fungsi.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Object JavaScript</h2>
<p>Jika Anda mengakses method tanpa tanda kurung (), maka hal ini akan mengembalikan definisi fungsi.</p>
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName;
</script>
</body>
</html>
Ketika variabel JavaScript dideklarasikan dengan kata kunci “new”, variabel tersebut dibuat sebagai object:
var x = new String(); // Mendeklarasikan x sebagai object String var y = new Number(); // Mendeklarasikan x sebagai object angka var z = new Boolean(); // Mendeklarasikan x sebagai object boolean
Hindari object String, Number, dan Boolean. Object tersebut akan memperumit kode yang dibuat dan memperlambat kecepatan eksekusi.