Belajar Javascript #10 – Membuat objek di Javascript

Membuat objek di javascript – Javascript memiliki dua jenis tipe data utama, yaitu tipe data dasar dan objek. Sedangkan variabel pada JavaScript adalah wadah untuk menampung nilai data.

Tipe data dasar pada Javascript meliputi :

  • Angka (numbers)
  • Rentetan karakter (strings)
  • Boolean (true dan false)
  • Null
  • Undefined

Sedangkan Nilai-nilai selain tipe data dasar diatas secara otomatis dianggap sebagai objek anatar lain :

  • Array
  • Fungsi
  • Regular expression
  • Segala tipe buatan pengembang

Objek dalam Javascript adalah variabel yang menyimpan nilai properti (ciri khas) dan fungsi atau method (perilaku) yang mana nilainya dapat berubah ubah. Objek pada javascript, dapat dibuat dengan tanda kurung kurawal dengan isi berupa key dan value.

Membuat objek di javascript

Contoh berikut ini merupakan method yang dapat dibuat dengan cara mengisi nilai (value) dengan sebuah fungsi.:

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

Cara mengakses properti dan method dari objek adalah dengan menggunakan tanda titik atau dot (.), lalu diikuti dengan nama properti atau method. Contohnya adalah sebagai berikut :

    console.log(car.type);
    console.log(car.model);
    console.log(car.color);
    car.start();
    car.drive();
    car.brake();
    car.stop();

Dimana :

  • car. = Nama object
  • type = Properti object
  • start,drive.brake.stop = Method Object

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

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

Berdasarkan kode diatas, jika kita console maka hasilnya akan terlihat seperti gambar dibawah ini :

membuat objek di javascript

Membuat objek di javascript Menggunakan Keyword this

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

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>
        var person = {
            firstName: "Rina",
            lastName: "fitriana",
            showName: function(){
                alert(`Nama: ${this.firstName} ${this.lastName}`);
            }
        };
        person.showName();
    </script>
</head>
<body>

Berdasarkan contoh perogram diatas, maka hasilnya adalah sebagai berikut :

membuat objek di javascript

Keyword this atau kata kunci this pada contoh di atas akan mengacu pada objek person.

Membuat Class Objek dengan this pada javascript

Pada contoh-contoh pada pembahasan di atas, kita sudah membuat objek dijavascript secara langsung. Sekarang membuat objek dengan membuat instance dari class dengan properti yang sama.

<!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>Membuat Class Objek dengan this</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("Rina", "fitriana");
        var person2 = new Person("Dodi", "Reza");

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

Penjelasan Program :

Kita membuat objek baru dengan kata kunci new, lalu diberikan nilai parameter firstName dan lastName. Jadi, berapapun objek yang ingin kita buat, cukup gunakan kata kunci new saja.

Berdasarkan contoh perogram diatas, maka hasilnya adalah sebagai berikut :

membuat objek di javascript

Fitur ini baru ada pada Javascript versi ES6. Untuk ES5, kita bisa membuat class dengan fungsi. Setelah itu barulah di dalamnya menggunakan kata kunci this. Baca juga artikel selanjutnya yaitu Belajar Javascript #11 Pengenalan DOM Javascript

Tinggalkan Balasan

Scroll to Top