Belajar Javascript Object

Property, Method, Encapsulation

Materi ini memiliki 1 buah lampiran. Namun Anda tidak dapat mengakses lampiran karena belum terdaftar di kursus ini. Klik disini untuk mendaftar.

Pada video ini kita akan membicarakan mengenai beberapa istilah yang digunakan di dalam pemograman berbasis object, seperti Property, Method dan Encapsulation. Dan agar bisa lebih mengerti mengenai konsep pemograman berbasis object, maka kita akan mencoba untuk mengerjakan soal pemograman sederhana.

Misalkan kita hendak membuat program mengenai kelas di sekolah. Di dalam kelas, terdapat seorang murid atau student dan seorang guru atau teacher. Untuk murid, kita membuat sebuah variable yang menyimpan namanya yaitu “Andi”, dan kita membuat sebuah function learn() dimana murid bisa melakukan kegiatan belajar. Sedangkan untuk gurunya, kita membuat sebuah variable juga untuk menyimpan nama gurunya. Misalnya disini nama gurunya adalah “Skysen”. Kemudian kita membuat sebuah function teach(), dimana guru bisa melakukan kegiatan mengajar.

Dan bagian paling penting dari program ini adalah kita harus membuat suatu batasan, dimana function learn() hanya boleh dilakukan oleh murid. Sedangkan function teach() hanya boleh dilakukan oleh guru. Artinya guru tidak boleh memanggil function learn(), dan murid tidak boleh memanggil function teach().

Kita langsung praktek coding ya. Pertama kita coba melakukan pemograman dengan menggunakan pemograman dasar Javascript terlebih dahulu. Pertama kita buat variable nama pelajar dan kita isi dengan nilai string “Andi”. Kemudian kita buat function learn dengan parameter name. Isinya kita tuliskan saja di console log bahwa name is learning. Maka kodenya menjadi

let studentName = "Andi";
function learn(name)
{
  console.log(name + " is learning");
}

Selanjutnya kita buat lagi variable nama guru, dan kita isi dengan nilai “Skysen”. Kemudian kita buat lagi function teach, dengan parameter name. Yang isinya hanya console log bahwa name is teaching. Maka kodenya menjadi:

let teacherName = "Skysen";
function teach(name)
{
  console.log(name + " is teaching");
}

Kita simpan dan jalankan di browser. Perhatikan di bagian console. Sekarang kita sudah memiliki variable studentName dan teacherName. Dan kita bisa menggunakan variable ini untuk memanggil function learn dan teach.

Namun disini kita masih belum bisa memberikan batasan mengenai siapa yang boleh memanggil fungsi learn dan siapa yang boleh memanggil fungsi teach. Jadi kita masih bisa menggunakan kedua fungsi tersebut secara terbalik. Misalkan kita memanggil fungsi learn dengan menggunakan teacherName. Ataupun memanggil fungsi teach dengan menggunakan studentName.

Nah, kita bisa dengan mudah membuat pembatasan seperti ini dengan menggunakan pemograman berbasis object. Kita kembali ke source code. Di bagian bawahnya kita buat lagi ya, kode yang sama, dengan tujuan yang sama, namun kali ini menggunakan pemograman berbasis object.

Pertama kita buat dahulu object student. Untuk membuat object kita menggunakan simbol kurung kurawal. Kemudian pertama kita tambahkan variable name terlebih dahulu. Kita isikan dengan nilai “Andi”. Perhatikan disini bahwa kalau kita memasukkan variable ke dalam object, maka istilah variable berubah menjadi property.

Kita pisahkan dengan tanda koma, lalu kita pindahkan juga function learn ke dalam object student. Ingat kembali function expression ya. Jadi kita bisa membuat variable dengan nama learn, yang tipenya adalah function tanpa parameter. Dimana isi dari function tersebut adalah perintah console log dengan argument name + “ is learning”. Maka kode kita menjadi:

let student = {
    name : "Andi",
    learn : function() {
      console.log(name + " is learning");
    }
}

Perhatikan lagi disini, bahwa pada saat kita memasukkan function ke dalam object, maka istilah function berubah menjadi method. Sekarang kita simpan dan jalankan di browser ya.

Kita sudah memiliki variable student yang isinya adalah sebuah property name, dan sebuah method learn. Kita bisa melihat isi dari property name dengan menjalankan perintah student.name. Dan kita bisa menjalankan method learn dengan perintah student.learn(). Namun perhatikan bahwa pada perintah learn belum bisa mengeluarkan nama Andi ya. Karena untuk mengakses nilai property, kita harus menuliskan terlebih dahulu nama object-nya, diikuti oleh tanda titik dan nama property-nya seperti

student.name

Kita kembali ke source code. Jadi di dalam method learn ini, kita ganti variable name menjadi property student.name. Kita simpan dan refresh browser. Dan kita coba untuk memanggil method learn. Sekarang sudah berfungsi dengan benar ya. Tulisan yang keluar adalah “Andi is learning”.

Namun cara pemograman seperti ini masih mengandung masalah ya. Mengapa? Karena dalam method learn, kita harus merujuk ke nama variable student yang berada di luar dari object. Seandainya nama variable student ini kita ganti, misalkan saja menjadi student2. Maka kode menjadi error. Tidak percaya? Kita jalankan lagi di browser ya. Kita panggil method student2.learn();. Keluar error ya, karena variable student tidak ditemukan. Namanya sudah kita ubah menjadi student2.

Bagaimana cara memperbaikinya? Nah, variable student yang berada di dalam object ini, harus kita ganti menjadi satu buah kata kunci, yang merujuk ke object itu sendiri. Disini kita menggunakan kata kunci this. Jadi untuk mengakses property name pada object itu sendiri, kita menggunakan perintah this.name. Kita refresh browser dan kita panggil kembali student2.learn(). Sudah berfungsi dengan benar ya.

Kita kembalikan nama variable ke student. Refresh browser dan kita panggil lagi method student.learn(). Dan berfungsi dengan benar ya. Artinya method kita tetap berjalan dengan benar tanpa ada ketergantungan pada nama variablenya.

Selanjutnya kita gunakan cara yang sama untuk membuat object teacher. Pertama kita tambahkan dahulu property name, dengan nilai “Skysen”. Kemudian kita tambahkan method teach yang isinya memanggil console.log dengan argument this.name + “ is teaching”. Maka kodenya menjadi:

let teacher = {
  name : "Skysen",
  teach : function() {
    console.log(this.name + " is teaching");
  }
}

Kita simpan dan refresh browser. Sekarang kita udah memiliki 2 buah objek yaitu student dan teacher. Kita bisa memanggil method student.learn() dan method teacher.teach(). Namun perhatikan disini bahwa method learn dibatasi hanya untuk student, dan method teach dibatasi hanya untuk teacher. Jadi kita tidak bisa memanggil student.teach() dan kita juga tidak bisa memanggil method teacher.learn().

Kita lihat kembali source code kita. Jadi di bagian atas kita menuliskan kode dengan menggunakan pemograman dasar. Kemudian di bawahnya kita menuliskan kode dengan menggunakan pemograman berbasis object. Dan kita sudah belajar tadi ya. Pada saat kita memindahkan variable ke dalam object, maka istilah variable berubah menjadi property. Dan pada saat kita memindahkan function ke dalam object, maka istilah function berubah menjadi method.

Dan ada satu lagi istilah yang sudah kita lakukan dalam pemograman ini ya. Pada saat kita mengelompokkan semua variable dan function yang terkait menjadi satu buah object, maka kita telah melakukan yang namanya Encapsulation. Dengan melakukan Encapsulation, maka cara coding kita menjadi lebih sederhana. Pada method learn, kita sudah tidak perlu parameter, karena kita bisa langsung mengakses property name dengan bantuan kata kunci this. Dan kita pun sudah melakukan pembatasan mengenai property apa dan method apa saja yang boleh diakses oleh object tersebut. Jadi kita akan terbebas dari kesalahan coding seperti teacher memanggil fungsi learn.

Sebelum kita mengakhiri video ini, mari kita lihat kembali dokumentasi MDN mengenai Array. Kita sudah belajar dari video sebelumnya ya, bahwa Array adalah sebuah Object. Dan kalau kita lihat di sidebar kita bisa melihat ada istilah Property dan Method. Setelah mempelajari video ini, tentunya teman-teman sudah lebih paham ya. Property ini adalah variable yang disimpan di dalam object Array. Sedangkan method ini adalah fungsi-fungsi yang bisa kita panggil menggunakan object Array.

Jadi sebenarnya istilah Property, Method dan Encapsulation yang kita pelajari dalam video ini, sudah digunakan dimana-mana, baik pada dokumentasi pada bahasa pemograman Javascript itu sendiri, maupun bahasa-bahasa pemograman lain yang mendukung object seperti Java, C#, PHP, dan lain-lain. Nantinya kalau kita mempelajari bahasa pemograman lain, maka kita akan ketemu lagi dengan ketiga istilah ini, dengan arti dan konsep yang sama. Yang berbeda hanyalah cara menuliskan kode atau sintaksnya saja.

2 Jam 21 Menit
1. Pendahuluan 16 Menit
3. Head 13 Menit
10. Tabel 21 Menit
1 Jam 2 Menit
1. Form 15 Menit
2. Validasi 12 Menit
3. Input Type 15 Menit
4. Dropdown 9 Menit
1 Jam 29 Menit
9. Pseudo Class 11 Menit
3 Jam 26 Menit
2. Lebar/Width 13 Menit
16. CSS Reset 6 Menit
2 Jam 21 Menit
4. Flex-Wrap 10 Menit
3 Jam 17 Menit
7. Flex Utility 16 Menit
8. Operator 28 Menit
11. Objek String 18 Menit
4. Scope 10 Menit
5. Rekursif 10 Menit
8. Notasi Big O 24 Menit
4. Prototype 18 Menit
7. Map 19 Menit
8. Set 12 Menit
2. DOM Selector 40 Menit
7. DOM Traversal 14 Menit
Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.
Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.