Panduan Belajar JavaScript Object Oriented Programming Bagi Pemula

javascript-1

Sorotan24.com, Indonesia – JavaScript adalah bahasa pemrograman unik yang memiliki banyak keunggulan. Di satu sisi, bahasa ini memiliki banyak fitur yang menjadikannya bahasa fungsional. JavaScript mendukung konsep pemrograman berorientasi objek, yaitu pewarisan dalam bentuk prototipe yang dikenal sebagai pewarisan prototypal. Dalam artikel ini akan membahas bagaimana penerapan OOP dalam JavaScript.

 

Baca Juga : Inilah Perbedaan Software Engineer dan Software Developer

 

Pengertian JavaScript Object-Oriented Programming

javascript-2
(Sumber : freecodecamp.org)

JavaScript Object Oriented Programming adalah  metode pemrograman berorientasi objek. Tujuan OOP dibuat untuk memfasilitasi pengembangan program dengan  mengikuti pola yang sudah ada dalam kehidupan sehari-hari. Jadi setiap bagian dari suatu masalah adalah sebuah objek, jadi objek itu sendiri adalah kombinasi dari beberapa objek yang lebih kecil. Misalkan mobil, mobil adalah sebuah objek. Mobil itu sendiri terdiri dari beberapa benda yang lebih kecil  seperti mesin, roda, kursi dan lain sebagainya. Mobil adalah sebuah objek yang terdiri dari objek-objek yang lebih kecil yang saling berhubungan, berinteraksi, berkomunikasi, dan mengirim pesan ke objek lain. Mirip dengan program, objek besar terdiri dari beberapa objek yang lebih kecil, yang berkomunikasi satu sama lain dan mengirim pesan ke objek lain.

 

Apa itu Object

javascript-13

Objek adalah entitas unik yang berisi properti dan method. Misalnya, jika mobil adalah Objek, maka tipe, harga, tahun, dan warna mobil tersebut adalah properti dari objek tersebut dan menggunakan properti ini kita dapat melakukan tindakan apapun yang kita inginkan disebut method. Dalam JavaScript, hampir setiap elemen adalah objek, baik itu fungsi, array, dan string.

 

Function Constructor dan Class

javascript-14
(Sumber : pexels.com)

Bagaimana jika kita punya kasus seperti ini.

javascript-3

Kita disuruh untuk membuat 2 objek yang memiliki model atau bentuk yang sama, hanya berbeda value di setiap properti atau methodnya.

javascript-4

Kalau melihat kode diatas sekilas tidak ada masalah. Akan tetapi akan menjadi masalah ketika kita ingin membuat puluhan atau ratusan object. Cara diatas bukan solusi terbaik.

Lalu bagaimana solusi terbaik?

Caranya adalah dengan membuat template atau istilahnya blueprint dari objek tersebut. Di javascript ada 2 cara untuk membuat blueprint dari sebuah objek. Yang pertama dengan menggunakan function constructor dan yang kedua menggunakan class.

 

Function Constructor

javascript-5

Function constructor pada dasarnya adalah sebuah function declaration biasa. Biasanya untuk membedakan function constructor dengan function declaration biasa adalah dengan memakai huruf besar pada kata pertama nama function tersebut.

Sebuah objek baru yang dibuat dari sebuah constructor disebut sebagai instance.

mobil1 dan mobil2 adalah instance dari Mobil

 

Classes

Class adalah salah satu fitur baru yang diperkenalkan di JavaScript versi 2015 atau ES6. Fitur class menyediakan syntax yang lebih sederhana dan rapi untuk membuat blueprint sebuah objek. Perlu dicatat bahwa di JavaScript, class sebenarnya adalah sebuah function namun dengan syntax yang berbeda. Dengan menggunakan contoh kasus sebelumnya, kita akan membuat sebuah blueprint dari objek barang dan membuat 3 buah instance objeknya menggunakan class.

javascript-6

Perhatikan bahwa baik function constructor maupun class, penulisan nama function atau classnya selalu menggunakan huruf besar pada awalan katanya.

 

Keyword This

This adalah sebuah keyword khusus yang merujuk pada objek pemiliknya. Maksudnya adalah nilai dari this sangat bergantung pada di mana keyword this ini diletakkan atau dipanggil. Jika this digunakan dalam sebuah method maka ia merujuk pada objek pemiliknya. Jika this di dalam sebuah function maka ia merujuk pada global objek atau window. Dalam kasus function constructor dan class maka keyword this ini mengacu pada objek instancenya.

 

Konsep Dasar JavaScript Object-Oriented Programming

javascript-15
(Sumber : pexels.com)

Encapsulation

Enkapsulasi adalah cara untuk membatasi akses langsung ke variabel atau method pada sebuah objek. Agar object/kelas lain tidak bisa “dengan tidak sengaja” mengubah value dari property object/kelas yang sudah kita define.

javascript-7

Dilihat dari kode diatas tidak ada masalah.

Namun bagaimana jika kamu tidak sengaja mengganti value dari properti pajak dari luar. Seperti kode dibawah ini

javascript-8

Ketidaksengajaan seperti diatas akan membuat masalah, apalagi jika case nya adalah di dunia kerja dan code tersebut berhubungan dengan uang customer.

Jawabannya adalah properti pajak harus dibuat sebagai private property.

javascript-9

 

Inheritance

Inheritance adalah proses pewarisan properti pada class lainnya, atau lebih tepatnya disebut child dari class tersebut. Cara ini digunakan untuk meningkatkan reusability code.

javascript-10

 

Polymorphism

Polymorphism adalah sebuah konsep untuk membuat berbagai variabel atau method yang sama tetapi memiliki nilai atau return yang berbeda. Digunakan apabila sebuah kelas bisa me-reuse kelas lain, namun perlu sedikit perubahan. Daripada menulis ulang, kita bisa meng-adjust sedikit hal yang perlu dirubah tersebut.

javascript-11

Sekarang pertanyaannya adalah apa yang terjadi ketika method greeting di class Javanese tidak ada?

Ketika method greeting di class Javanese tidak ada, maka ia akan menjalankan method greeting dari parent class nya yaitu Indonesia.

 

Abstraction

Abstraction adalah sebuah teknik untuk menyembunyikan detail tertentu dari sebuah objek dan hanya menampilkan konsep dan gagasan akan permasalahan yang sedang kita hadapi, agar kita bisa mengevaluasi problem tersebut dari sudut pandang yang lebih luas.

javascript-12

Kita tidak perlu tahu bagaimana totalPrice diimplementasi, kita hanya perlu tahu bagaimana cara menampilkan total biaya, yaitu dengan memanggil method totalPrice

 

Pemrograman berorientasi objek adalah gaya pemrograman yang membutuhkan waktu untuk dipahami oleh seorang programmer baru. Ada beberapa hal yang perlu diingat ketika menggunakan paradigma OOP, seperti prinsip yang menjadi dasar dan manfaat yang diberikannya.

Objek yang didasarkan pada hal-hal dunia nyata sangat penting untuk aplikasi berbasis OOP. Enkapsulasi melindungi data dari akses yang tidak terkontrol. Objek memiliki fungsi yang beroperasi pada data yang terkandung dalam objek. Sebuah objek dapat dibuat dengan menggunakan template kelas. Inheritance dapat membantu mengurangi redudansi dalam kode. Paradigma OOP (pemrograman berorientasi objek) lebih bertele-tele, tetapi lebih mudah dibaca daripada paradigma pengkodean lainnya. Sejak OOP datang dalam pengembangan JavaScript, kamu mungkin menemukan kode yang menggunakan prototipe atau teknik pemrograman fungsional.

Sekian tutorial Javascript OOP

 

Follow Us
Instagram
 | Twitter

Leave a Reply

Your email address will not be published.