JavaScript - OOP

Agenda

• Intro OOP
• Apa itu OOP
• OOP di JavaScript
• Pilar OOP
• QnA
• Waktunya Tantangan

Intro OOP

Mari ngobrol tentang smartphone

Berdasarkan statistik di dunia*

6.64 Milyar orang di dunia sudah menjadi pengguna smartphone

Apabila diterjemahkan jadi persentasi

83.72% di dunia sudah memiliki smarpthone di dunia

Termasuk salah satunya adalah Anda bukan?

*Data berdasarkan BankMyCell

Intro OOP (ii)

Lebih dalam tentang smartphone

Smartphone umumnya memiliki hal berikut:

• CPU seperti Dragonsnap atau Ex-Nose dsb* (*nama disamarkan untuk menghindari copyright)
• Memory atau RAM di 2GB, 4GB, 8GB, dst
• Storage atau Capacity di 32GB, 64GB, 128GB dst

Intro OOP (iii)

Contoh deskripsi smartphone:

• Samsul S22 memiliki CPU Dragonsnap 1 Gen 8 dengan Memory 8GB dan Storage 256GB
• Tanpa sadari dengan membicarakan ini, kita sudah mengelompokkan Smartphone berdasarkan orientasi objek loh !
• Dalam terminologi ngoding hal ini disebut Pemrograman Berorientasi Objek atau Object Oriented Programming

Apa itu OOP

OOP atau PBO adalah sebuah mata kuliah pada program studi teknik informatika yang terdiri dari 14 Pertemuan

#eh salah

Apa itu OOP

Paradigma atau model atau konsep dalam pemrograman yang mendefinisikan desain dari software dalam bentuk Objek sesuai dengan keadaan nyata, bukan dalam bentuk fungsi dan logika saja.

Apa itu OOP (ii)

Dalam OOP kita harus mengetahui 2 hal ini: Class dan Object (Instance)

• Object atau sering disebut Instance adalah entitas yang membungkus data dan sifat, dimana data ini umumnya unik antara satu objek dengan objek lainnya.
• Class adalah sebuah cetak biru atau blueprint yang mendefinisikan seluruh data yang ada, disebut dengan property atau attribute dan seluruh fungsi-fungsi yang ada dalamnya (disebut dengan method).

Apa itu OOP (iii)

Mari kita ambil contoh Smartphone

• Contoh Object misalnya adalah sebuah Samsul S22 ataupun Siomay Poco M4 Pro
• Contoh Class Smartphone adalah memiliki:
• Property berupa CPU, Memory, dan Storage
• Method yang sama antar Object, misalnya bisaNyala, bisaDisentuh, swipeHorizontal, dsb

OOP di JS

Mari kita coba melihat cara deklarasi OOP di JS dengan Klik di sini

Catatan untuk kode di atas:

• Perhatikan outputnya adalah Smartphone bukan (Object biasa)
• Output terjadi karena di dalam JS Object hasil OOP akan memiliki nama class di output Objectnya

OOP di JS (ii)

Ada yang sudah menemukan anomali pada kode sebelumnya?

Ya, property-nya tidak tampak !

Terjadi karena kita belum meng-set property awalnya

Bagaimanakah caranya?

Mari kita modifikasi kode sebelumnya, Klik di sini

Nah sekarang kita sudah berhasil deklarasi OOP di JS dengan baik yah !

OOP di JS (iii)

Bagaimana bila sekarang kita ingin mendefinisikan method-nya?

Mari kita modifikasi kodenya lagi, Klik di sini

Perhatikan pada saat console.log method tersebut tidak terlihat

OOP di JS (iv)

Bagaimana bila sekarang kita bandingkan dengan Object literal pada JS?

Mari kita tambahkan Object literal yang mirip dengan class yang dibuat, Coba Klik di sini

Loh kok terlihat sama?

Kalau begini, Untuk apa belajar OOP ? (╯°□°)╯︵ ┻━┻

Why OOP?

Coba kita berpikir ...

• Smartphone di dunia ada banyak sekali
• Tiap tahun ada penambahan fitur di Smartphone

Bagaimana bila kita ingin menambah fitur yang belum ada sebelumnya?

Why OOP? (ii)

Mari kita coba bandingkan Object biasa (literal) dengan OOP

Yuk modif kode sebelumnya lagi, Klik di sini

• Bayangkan bila kita membuat Smartphone secara object literal seperti samsulS22Pro
• Imajinasikan bila ada 100 object literal dan ada 1 fitur yang mau diganti
• Tangan pasti jadi keriting !
• Selain itu, pada saat console.log, semua (property dan method) terlihat bukan?

Why OOP? (iii)

Keuntungan OOP

• Kita melihat sebuah Object sebagai suatu data yang unik, bukan kumpulan dari data dan fungsi.
• Fleksibilitas
• Kemudahan dalam membaca kode, sehingga editnya (maintain)nya lebih mudah.
• Lebih simple bukan? karena kita bawa dari konsep dunia nyata ke dalam bentuk koding.
• Di dalam dunia perbankan sendiri, yang masih heavily relied on Java, OOP is a must ! karena Java adalah sebuah bahasa yang sangat bergantung pada OOP dengan segala macam karakteristiknya.

Method Chaining

Masih ingat saat menggunakan array ?

const arrayInput = ['ini', 'adalah', 'sebuah', 'array'];
const stringOutput = arrayInput.slice(1, 4).join('-');

console.log(stringOutput); // adalah-sebuah-array

Hal dimana kita bisa me-rantaikan-fungsi, disebut dengan Method chaining

Bagaimana cara kita melakukannya pada method yang ada di OOP?

Method Chaining (ii)

Mari kita mencoba membuat Method Chaining secara langsung yah !

Kode dapat dilihat di sini

Loh kok kodenya error?

Hal ini terjadi karena kita kurang mengerti menggunakan chaining

Kata kunci dalam chaining adalah harus ada sesuatu yang di-return untuk digunakan kembali

Dalam OOP yang dikembalikan adalah this

Method Chaining (iii)

Mari coba kita benarkan kode Method Chaining ini yah !

Kode dapat dilihat di sini

Nah sudah mantap nih menggunakan method chaining !

Mari kita masuk ke masalah selanjutnya !

Module Exports

Terbayang tidak kalau kita punya banyak class dan semuanya di satu file?

Wadidaw !

Lalu bagaimana caranya agar bisa memecah class di tempat lain?

Salah satu solusinya adalah dengan menggunakan module.exports

Module Exports (ii)

Solusi supaya filenya tidak di satu tempat adalah dengan memecah kode yang sudah dibuat

Pada JS, hal ini bisa dicapai dengan menggunakan exports dan module.exports

Pada pembelajaran ini, kita fokus pada module.exports yah !

Contoh kode dapat dilihat di sini

Pilar OOP

Mari masuk ke materi Inti dari OOP: Empat Pilar OOP

Enkapsulasi

• Disebut juga dengan pengkapsulan
• Konsep pengikatan data atau metode yang berbeda yang disatukan dalam satu unit data
• Terjadi ketika setiap objek menjaga statusnya agar tetap pribadi private dalam kelas.

Enkapsulasi (ii)

Abstraksi

• Bisa disebut juga perpanjangan dari enkapsulasi
• Developer bisa melakukan satu fungsi tanpa harus tahu bagaimana fungsi tersebut berjalan
• Menyembunyikan detil implementasi secara internal

Abstraksi (ii)

Warisan

• Objek itu pada akhirnya banyak yang mirip, namun tak sama (banyak class, ada yang mirip, tapi classnya beda)
• Bagaimana cara kita mengakalinya?
• Menggunakan Warisan
• Membuat class yang diturunkan dari class lainnya, sehingga ada hierarki classnya

Warisan (ii)

Polimorphisme

• Polimorphisme = Bentuknya banyak
• Kemampuan dari satu data untuk bisa diproses lebih dari satu bentuk
• Method Overloading (tidak disupport javascript), satu fungsi, memiliki jumlah variabel yang sama, namun memiliki tipe data yang berbeda
• Method Overriding, method dari OrangTua ditimpa oleh anaknya, anak punya method yang sama dengan OrangTua, namun berbeda logic di dalamnya

Polimorphisme (ii)

Perbedaan Polimorphisme dengan Warisan

• Warisan memberikan "keajaiban" untuk berbagi property dan method
• Polimorphisme memberikan "keajaiban" untuk mengubah / modifikasi method yang dibagikan

QnA

Waktunya Tantangan

Referensi

• https://withered-flowers.github.io/education-oop-crash-course
• https://www.sitepoint.com/understanding-module-exports-exports-node-js/
• https://www.freecodecamp.org/news/object-oriented-programming-concepts-21bb035f7260/
• https://glints.com/id/lowongan/oop-adalah/