Javascript Object

PreviousJavascript DOM NextJavascript Events

Last updated 1 year ago

Was this helpful?

Javascript Object

Objek

Objek adalah segala sesuatu yang ada di dunia ini seperti benda mati atau makhluk hidup. Objek dapat dimodelkan ke dalam pemrograman atau yang dikenal dengan pemrograman berorientasi objek (Object Oriented Programming)

Object Oriented Programming atau OOP ini merupakan sebuah teknik atau cara di dalam pemrograman dimana segala sesuatu di pandang sebagai objek.

Objek-objek ini dapat saling berinteraksi sehingga membentuk sebuah program.

Objek di Javascript

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

Berikut contoh objek mobil:

Bagaimana cara memodelkan mobil ini di dalam kode program?

Bisa saja seperti ini:

let car = "Mobil Fiat";

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:

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

Perbedaan Properti dan Method

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

Pada contoh di atas, kita hanya membuat properti saja. Lalu bagaimana cara membuat method di dalam objek?

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

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

Sekarang kita coba jalankan kode di atas menggunakan console browser

Mengakses Properti dan Method

Bagaimana cara mengakses properti dan method? Caranya menggunakan tanda titik atau dot (.), lalu diikuti dengan nama properti atau method.

console.log(car.type);
console.log(car.color);

car.start();
car.drive();

Perhatikan car.type, car.color, car.start(), dan car.drive()

Untuk mengakses properti, kita cukup menggunakan 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).

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

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

Kata kunci this pada kode di atas akan mengacu pada objek person

Jika dipanggil person.showName() akan tampil dialog Nama: Ahmad Umar

Referensi

PreviousJavascript DOM NextJavascript Events

Last updated 1 year ago

Was this helpful?

Objek

Object Oriented Programming atau OOP ini merupakan sebuah teknik atau cara di dalam pemrograman dimana segala sesuatu di pandang sebagai objek.

Objek-objek ini dapat saling berinteraksi sehingga membentuk sebuah program.

Objek di Javascript

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

Berikut contoh objek mobil:

Bagaimana cara memodelkan mobil ini di dalam kode program?

Bisa saja seperti ini:

let car = "Mobil Fiat";

Sejak ECMAScript 2015 (ES6) selain var, inisialisasi variabel dapat menggunakan let dan const untuk mencegah

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:

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

Perbedaan Properti dan Method

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

Pada contoh di atas, kita hanya membuat properti saja. Lalu bagaimana cara membuat method di dalam objek?

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

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

Sekarang kita coba jalankan kode di atas menggunakan console browser

Mengakses Properti dan Method

Bagaimana cara mengakses properti dan method? Caranya menggunakan tanda titik atau dot (.), lalu diikuti dengan nama properti atau method.

console.log(car.type);
console.log(car.color);

car.start();
car.drive();

Perhatikan car.type, car.color, car.start(), dan car.drive()

Untuk mengakses properti, kita cukup menggunakan 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).

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

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

Kata kunci this pada kode di atas akan mengacu pada objek person

Jika dipanggil person.showName() akan tampil dialog Nama: Ahmad Umar