Javascript 11 : Objek dan cara pembuatannya

Javascript 11 : Objek dan cara pembuatannya

 

Dalam kehidupan sehari-hari, kita sering berinteraksi dengan berbagai objek di sekitar kita. Objek bisa berupa benda mati seperti meja, kursi, atau mobil, maupun makhluk hidup seperti manusia, hewan, atau tumbuhan. Segala sesuatu yang ada di dunia ini dapat dianggap sebagai objek.

Dalam dunia pemrograman, konsep objek juga sangat penting dan digunakan untuk memodelkan berbagai entitas yang ada. Hal ini sering dilakukan dengan menggunakan paradigma OOP (Object Oriented Programming) atau pemrograman berorientasi objek. Paradigma ini merupakan suatu teknik atau cara dalam pemrograman di mana segala sesuatu dipandang sebagai objek.

Dalam paradigma OOP, objek-objek memiliki karakteristik tertentu dan dapat saling berinteraksi satu sama lain. Setiap objek memiliki atribut (sifat atau karakteristik) dan metode (tindakan atau perilaku) yang dapat digunakan untuk memanipulasi objek tersebut. Interaksi antar objek ini membentuk struktur program yang kompleks dan memungkinkan pembuatan program yang lebih terstruktur, modular, dan mudah dipahami.

Dengan menggunakan paradigma OOP, pengembang perangkat lunak dapat membuat program-program yang lebih efisien, mudah di-maintain, dan mudah di-reuse. Hal ini menjadikan paradigma OOP sebagai salah satu paradigma pemrograman yang paling populer dan banyak digunakan dalam pengembangan perangkat lunak modern.

 

Pengertian Objek dan Cara Membuatnya

Objek dalam JavaScript adalah struktur data yang menggabungkan properti (nilai) dan metode (fungsi) menjadi satu kesatuan. Objek dapat digunakan untuk merepresentasikan entitas atau konsep dalam program, seperti mobil, orang, atau bahkan konsep yang lebih abstrak.

Untuk membuat objek dalam JavaScript, kita dapat menggunakan tanda kurung kurawal `{}` dan mendefinisikan properti-properti objek beserta nilainya di dalamnya. Setiap properti dihubungkan dengan nilai menggunakan tanda titik dua `:` dan dipisahkan oleh tanda koma. Berikut adalah contoh pembuatan objek mobil:

 

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

 

Dalam contoh di atas, kita membuat objek `car` yang memiliki tiga properti: `type`, `model`, dan `color`. Properti `type` memiliki nilai `"Fiat"`, properti `model` memiliki nilai `"500"`, dan properti `color` memiliki nilai `"white"`.

Dengan menggunakan objek, kita dapat mengakses properti atau metode yang terkandung di dalamnya dengan menggunakan notasi titik `.`. Misalnya, untuk mengakses nilai properti `type` dari objek `car`, kita dapat menuliskan `car.type`.

Objek dalam JavaScript memberikan fleksibilitas dan kemudahan dalam merepresentasikan data dan perilaku dalam program. Dengan memahami konsep objek, kita dapat membuat program yang lebih terstruktur dan modular dalam pengembangan perangkat lunak.

Baca Juga : Fungsi dan Program JavaScript

Perbedaan Properti dan Method

Properti dan metode adalah dua konsep yang penting dalam pemrograman berorientasi objek. Meskipun keduanya terkait dengan objek, namun keduanya memiliki perbedaan yang mendasar:

1. Properti: Properti adalah karakteristik atau atribut dari sebuah objek yang menyimpan nilai tertentu. Properti biasanya merepresentasikan data yang terkait dengan objek tersebut. Dalam contoh objek mobil, properti dapat berupa `type`, `model`, dan `color`. Properti ini hanya menyimpan nilai tanpa melakukan aksi tertentu.

 

1. Metode: Metode adalah perilaku atau tindakan yang dapat dilakukan oleh sebuah objek. Metode biasanya berupa fungsi yang terkait dengan objek tersebut dan digunakan untuk melakukan tindakan tertentu pada objek atau memanipulasi data yang terkait. Dalam contoh objek mobil, metode dapat berupa `start`, `drive`, `brake`, dan `stop`. Metode ini dapat melakukan aksi seperti memulai mobil, mengendarai mobil, mengerem mobil, atau menghentikan mobil.

 

Cara membuat metode di dalam objek dalam JavaScript adalah dengan mendefinisikan properti objek sebagai sebuah fungsi. Dalam contoh yang diberikan:

 

```javascript
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");
    }
};
```

 

Di atas, properti-properti seperti `start`, `drive`, `brake`, dan `stop` diisi dengan fungsi-fungsi yang merepresentasikan metode-metode dari objek `car`. Setiap metode ini dapat dipanggil dan menjalankan aksi tertentu sesuai dengan implementasinya.

Jangan Lupa Baca : Memahami Struktur Array

Cara Akses Properti dan Method Objek

Cara mengakses properti dan metode dari objek dalam JavaScript adalah dengan menggunakan tanda titik atau dot (`.`) yang diikuti oleh nama properti atau metode yang ingin diakses. Berikut adalah contoh cara mengakses properti dan metode dari objek `car` yang telah kita buat sebelumnya:

 

```javascript
console.log(car.type); // Output: Fiat
console.log(car.color); // Output: white


car.start(); // Output: Ini method start
car.drive(); // Output: Ini method drive
```

 

Dalam contoh di atas:

 

- `console.log(car.type)` digunakan untuk mengakses properti `type` dari objek `car` dan mencetak nilainya ke konsol. Hasilnya akan mencetak nilai `"Fiat"` ke konsol.

 

- `console.log(car.color)` digunakan untuk mengakses properti `color` dari objek `car` dan mencetak nilainya ke konsol. Hasilnya akan mencetak nilai `"white"` ke konsol.

 

- `car.start()` digunakan untuk memanggil metode `start()` dari objek `car` sehingga menjalankan aksi yang terkait dengan metode tersebut. Dalam hal ini, akan mencetak teks `"Ini method start"` ke konsol.

 

- `car.drive()` digunakan untuk memanggil metode `drive()` dari objek `car` sehingga menjalankan aksi yang terkait dengan metode tersebut. Dalam hal ini, akan mencetak teks `"Ini method drive"` ke konsol.

 

Dengan menggunakan tanda titik, kita dapat dengan mudah mengakses properti dan metode dari objek dalam JavaScript, sehingga memungkinkan untuk memanipulasi data dan menjalankan aksi yang terkait dengan objek tersebut.

 

Cara Memakai Keyword This

Keyword `this` digunakan dalam konteks objek untuk merujuk kepada objek itu sendiri. Dalam JavaScript, `this` mengacu pada objek saat ini di mana kode sedang dieksekusi. Dengan menggunakan `this`, kita dapat mengakses properti dan metode dari objek di dalam metode objek itu sendiri.

Dalam contoh yang diberikan, kita memiliki objek `person` yang memiliki properti `firstName`, `lastName`, dan metode `showName`. Di dalam metode `showName`, kita menggunakan `this` untuk merujuk kepada properti `firstName` dan `lastName` dari objek `person`.

 

```html
<!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>
        var person = {
            firstName: "Muhar",
            lastName: "Dian",
            showName: function(){
                alert(`Nama: ${this.firstName} ${this.lastName}`);
            }
        };


        person.showName();
    </script>
</head>
<body>
</body>
</html>
```

Ketika `showName` dipanggil dengan `person.showName()`, `this` akan merujuk kepada objek `person`. Sehingga, `this.firstName` akan mengembalikan nilai `"Muhar"` dan `this.lastName` akan mengembalikan nilai `"Dian"`. Hasilnya, akan muncul sebuah dialog yang berisi teks `"Nama: Muhar Dian"`. Dengan menggunakan `this`, kita dapat mengakses properti dari objek secara dinamis di dalam metode objek.

 

Membuat Class Objek dengan this

Dalam pemrograman berorientasi objek, penggunaan class sangat umum untuk membuat objek-objek dengan struktur dan perilaku yang serupa. Namun, sebelum ada fitur class di JavaScript versi ES6, kita dapat membuat class menggunakan fungsi konstruktor dengan menggunakan kata kunci `this`.

Dalam contoh di bawah ini, kita membuat class `Person` menggunakan fungsi konstruktor. Fungsi konstruktor ini akan digunakan untuk membuat objek-objek `Person` dengan properti `firstName` dan `lastName`, serta metode `fullName` dan `showName`.

 

```html
<!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>
</head>
<body>
    <script>
        // Membuat class Person menggunakan fungsi konstruktor
        function Person(firstName, lastName){
            // properti
            this.firstName = firstName;
            this.lastName = lastName;


            // method untuk mengembalikan nama lengkap
            this.fullName = function(){
                return `${this.firstName} ${this.lastName}`
            }


            // method untuk menampilkan nama lengkap
            this.showName = function(){
                document.write(this.fullName());
            }
        }


        // Membuat instance objek person1 dan person2 dari class Person
        var person1 = new Person("Muhar", "Dian");
        var person2 = new Person("Petani", "Kode");


        // Memanggil method showName dari objek person1 dan person2
        person1.showName();
        document.write("<br>");
        person2.showName();
    </script>
</body>
</html>
```

 

Dalam contoh di atas, kita membuat dua objek `person1` dan `person2` menggunakan fungsi konstruktor `Person`. Kedua objek ini memiliki properti dan metode yang sama, namun memiliki nilai yang berbeda untuk properti `firstName` dan `lastName`. Dengan menggunakan fungsi konstruktor dan kata kunci `this`, kita dapat membuat banyak objek dengan struktur yang serupa tanpa perlu menulis ulang kode yang sama.

Published on March 21, 2024
Last updated on June 03, 2026