Home » Javascript » Object di JavaScript: Contoh Code dan Scriptnya

Object di JavaScript: Contoh Code dan Scriptnya

by Catur Kurnia Sari
by Catur Kurnia Sari

Object, Property, dan Method di Kehidupan Nyata

Dalam kehidupan nyata, mobil adalah sebuah object.

Mobil memiliki sifat seperti berat dan warna, dan method seperti start dan stop.

ObjectPropertiMethod

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.

Object pada JavaScript

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.

Definisi Object

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>

Properti Object

Pasangan nama: nilai dalam object JavaScript disebut properti:

PropertiNilai Properti
firstNameJohn
lastNameDoe
age50
eyeColorblue

Mengakses Properti Object

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>


Method pada Object

Object juga dapat memiliki method.

Method adalah tindakan yang dapat dilakukan pada object.

Method disimpan dalam properti sebagai definisi fungsi.

PropertyProperty Value
firstNameJohn
lastNameDoe
age50
eyeColorblue
fullNamefunction() {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;
  }
};

Keyword “this

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.

Mengakses Method Object

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>

Jangan Deklarasikan String, Angka, dan Boolean sebagai Object!

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.

You may also like