Belajar Javascript: Apa itu Objek? dan Bagaimana Cara Membuatnya?

September 28, 2022

Apa itu Objek di Javascript dan Bagimana cara Membuatnya?

Objek sebenarnya adalah sebuah variabel yang menyimpan nilai (properti) dan fungsi (method).

Bagaimana cara kita memodelkan mobil ini di dalam kode program?

Bisa saja seperti ini:

var car = "Mobil Fiat";

Tapi variabel car hanya akan menyimpan nama mobil saja. Karena itu, kita harus menggunakan objek.

Objek pada javascript, dapat dibuat dengan tanda kurung kurawal dengan isi berupa key dan value.

Kode di atas bisa juga ditulis seperti ini:

var car = {
    type:"Fiat", 
    model:"500", 
    color:"white"
};

Apa Perbedaan Properti dan Method?

Pada contoh di atas, kita baru hanya membuat properti saja.

Properti adalah ciri khas dari objek (variabel). Sedangkan method adalah perilaku dari objek (fungsi).

Lalu bagaimana cara membuat metohd di dalam objek?

Method dapat dibuat dengan cara mengisi nilai (value) dengan sebuah fungsi.

Contoh:

var car = {
    // properti
    type: "Fiat", 
    model: "500", 
    color: "white",

    // method
    start: function(){
        console.log("ini method start");
    },
    drive: function(){
        console.log("ini method drive");
    },
    brake: function(){
        console.log("ini method brake");
    },
    stop: function(){
        console.log("ini method stop");
    }
    
};

Cara Mengakses Properti dan Method Objek

Kita sudah tahu cara membuat objek…

Lalu pertanyaanya:

Bagaimana cara mengakses properti dan method dari objek?

Caranya menggunakan tanda titik atau dot (.), lalu diikuti dengan nama properti atau method.

Untuk mengakses properti, kita cukup gunakan nama objek.properti. Sedangkan untuk method, kita harus menggunakan tanda kurung. Ini menyatakan kalau kita ingin mengeksekusi fungsi.

Menggunakan Keyword `this`

Kata kunci this digunakan untuk mengakses properti dan method dari dalam method (objek).

Membuat Class Objek dengan `this`

Pada pemrograman berorientasikan objek, kita biasanya membuat objek dengan membuat instance dari class.

Akan tetapi pada contoh-contoh di atas, kita membuat objeknya secara langsung.

Lalu bagaimana kalau kita inign membuat objek yang lain dengan properti yang sama.

Bisa saja dibuat dua seperti ini:

var person = {
    firstName: "Muhar",
    lastName: "Dian",
    showName: function(){
        alert(`Nama: ${this.firstName} ${this.lastName}`);
    }
};

var person2 = {
    firstName: "Petani",
    lastName: "Kode",
    showName: function(){
        alert(`Nama: ${this.firstName} ${this.lastName}`);
    }
};

Ini tentu tidak efektif, jika kita ingin membuat banyak objek. Karena kita harus menulis ulang kode yang sama.

Solusinya kita bisa gunakan class.

Oh iya, saya ingin kasih tahu:

Pada Javascript versi ES5, class belum ada. Fitur ini baru ditambahkan pada Javascript versi ES6.

Pada ES5, kita bisa membuat class dengan fungsi. Lalu di dalamnya menggunakan kata kunci this.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Belajar Objek Javascript</title>

    <script>
        function Person(firstName, lastName){
            // properti
            this.firstName = firstName;
            this.lastName = lastName;

            // method
            this.fullName = function(){
                return `${this.firstName} ${this.lastName}`
            }
            this.showName = function(){
                document.write(this.fullName());
            }
        }

        var person1 = new Person("Muhar", "Dian");
        var person2 = new Person("Petani", "Kode");

        person1.showName();
        document.write("<br>");
        person2.showName();
    </script>
</head>
<body>

Cari Blog Ini

belajar mengenai dasar-dasar dunia programer