Belajar Pemrograman Gratis
Belajar Pemrograman Gratis
Banner blog paradigma oop dengan javascript
Academy

Paradigma OOP untuk Membuat Program dengan JavaScript

Selamat datang dan bergabung dalam pembahasan paradigma pemrograman, khususnya pemrograman berorientasi objek (PBO atau OOP). Pada artikel ini, kami akan membahas OOP dengan contohnya dalam JavaScript. Sebelumnya, mari kita simak pengertian PBO/OOP berikut.

“Object-oriented programming (OOP) is a programming paradigm that organizes code around objects, which are instances of classes. It provides a structured approach to software development by encapsulating data (attributes) and behavior (methods) within objects. The core principles of OOP include encapsulation, inheritance, and polymorphism.”

Dalam membuat aplikasi, suatu hal yang tidak boleh kita anak tirikan adalah paradigma pemrograman. Pemrograman berorientasi objek merupakan salah satu paradigma yang kerap kali digunakan oleh banyak developer. Sebelum berbicara mengenainya, apakah kamu tahu apa itu paradigma pemrograman?

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Apa Itu Paradigma Pemrograman

Contoh aktifitas membangun suatu konsep atau aturan

Dalam membuat aplikasi, biasanya kita akan mengikuti suatu aturan atau konsep tertentu. Sebagian dari kita mungkin merasa bahwa hal tersebut bisa saja dilakukan dengan sadar maupun tidak sadar. Tidak sedikit juga kita terinspirasi dari suatu pola atau metode yang diadopsi oleh seseorang dalam membuat aplikasi. Contohnya membuat aplikasi multi-platform seperti Flutter dalam memanfaatkan Dart sebagai bahasa pemrogramannya.

Hal di atas mirip dengan cara manusia ketika mempelajari suatu hal. Setiap individu memiliki keunikannya masing-masing demi mencapai pemahaman yang paling tinggi. Ada beberapa konsep pembelajaran yang mungkin relate dengan kamu.

  • Hanya mengandalkan teks karena lebih fleksibel dan efisien.
  • Lebih mudah dipahami jika menggunakan media gambar dan suara daripada media teks.
  • Memerlukan analogi atau keterkaitan dengan perkara lain yang dapat menggambarkan dengan mudah.
  • Membutuhkan banyak diskusi dan praktik.
  • Bahkan, memerlukan mentor untuk mencapai capaian yang lebih baik.

Ada banyak paradigma pemrograman yang umum digunakan. Beberapa di antaranya seperti berikut.

  • Pemrograman Imperatif
    Paradigma ini berfokus dalam menjelaskan bagaimana mencapai suatu hal berdasarkan perintah-perintah yang developer berikan. Programmer dapat membuat kode yang mengubah atau mengendalikan mesin.
  • Pemrograman Fungsional
    Dalam pemrograman fungsional, program dapat dibangun dengan menerapkan dan menyusun fungsi. Paradigma ini menekankan pada fungsi yang tidak boleh mengubah nilai asli yang terdefinisi di luar fungsi, tidak memiliki efek samping atau mengubah kondisi di luar, dan memiliki konsep high-order function.
  • Pemrograman Berorientasi Objek (PBO)
    OOP melibatkan objek-objek agar program dapat berjalan. Seluruh objek memiliki sekumpulan properti dan fungsi yang merepresentasikan perilaku tertentu. Dengan demikian, kode dapat diorganisasi dengan mudah.
  • Pemrograman Prosedural
    Pemrograman prosedural berkutat pada sekumpulan instruksi yang terurut untuk mencapai atau menyelesaikan suatu masalah.
  • Pemrograman Deklaratif
    Pemrograman deklaratif berfokus pada mendeskripsikan apa yang perlu dilakukan oleh program untuk menyelesaikan tugas tertentu. Sebagai programmer, kita tidak perlu mengetahui secara eksplisit metode atau konsep apa yang digunakan oleh mesin. Hal yang paling penting adalah hasilnya sesuai dengan apa yang diperintahkan. Contohnya SQL dan HTML.

Satu paradigma pemrograman tidak hanya diadopsi hanya oleh satu bahasa pemrograman saja. Banyak sekali bahasa pemrograman yang mengadaptasi lebih dari satu paradigma pemrograman. Contohnya, JavaScript, Python, C++, dsb.

Tentunya, kita tidak akan membahas setiap paradigma secara lengkap dan tuntas. Kita hanya akan mengupas satu paradigma, yaitu OOP. Dalam artikel ini, contoh OOP disandingkan dengan JavaScript.

Perkenalkan, Pemrograman Berorientasi Objek

Kerap kali topik pembahasan tentang ini berelasi dengan dunia nyata. Relasi yang dimaksud adalah sebuah objek. Beberapa objek yang bisa kita contohkan, seperti manusia, binatang, mobil, rumah, dan sebagainya. Ada banyak sekali mobil di dunia ini berdasarkan karakteristiknya. Ada mobil yang berwarna merah, putih, hitam, dan biru; memiliki nomor identitas unik seperti nomor rangka, nomor polisi, nama varian, dan logo; menggunakan bahan bakar jenis bensin, solar, dan listrik; serta berbagai karakteristik lainnya. Selain itu, beberapa objek memiliki kemampuannya masing-masing. Bagi mobil, ia bisa maju, mundur, dan rem.

Misalnya, kita ingin membuat dua buah mobil karena ada klien yang memintanya, yaitu Budi dan Tini. Dalam bahasa pemrograman, kita bisa membuatnya dengan mudah menggunakan object literal seperti berikut.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
const budiCar = {
  name: 'BudiCar',
  price: 1000,
  color: 'red',
  capacity: 4,
  policeNumber: 'AA-0000-AA',
  isEngineStarted: false,
 
  start() {
    console.log('Start the engine');
  },
  stop() {
    console.log('Stop the engine');
  },
  moveForward() {
    console.log('Move forward');
  },
  moveBackward() {
    console.log('Move backward');
  },
  break() {
    console.log('Break');
  },
};
 
const tiniCar = {
  name: 'TiniCar',
  price: 2000,
  color: 'white',
  capacity: 8,
  policeNumber: 'BB-0000-BB',
  isEngineStarted: false,
 
  start() {
    console.log('Start the engine');
  },
  stop() {
    console.log('Stop the engine');
  },
  moveForward() {
    console.log('Move forward');
  },
  moveBackward() {
    console.log('Move backward');
  },
  break() {
    console.log('Break');
  },
};


Kami yakin, hal di atas dapat dengan sangat mudah kamu lakukan juga. Bagaimana jika ada 100 klien yang meminta 1000 mobil? Tentu sangat merepotkan dan melelahkan, bukan? Belum memulai pengerjaan pun sudah mengalami stres dan tekanan yang tinggi.

Oleh karena itu, ada konsep yang bernama class dan objek dalam bahasa pemrograman. Ada banyak sekali bahasa pemrograman yang mendukung paradigma tersebut. Contohnya, JavaScript, Python, C, Java, C# (dibaca: Si Sarp), dll. Kali ini, kita akan memperdalam konsep PBO/OOP dengan bahasa JavaScript.

Seharusnya kamu sudah tidak asing lagi dengan JavaScript, kan? Siapa yang tidak kenal dengannya atas popularitas yang paling tinggi selama bertahun-tahun.

Hasil stackoverflow developer survey 2023 tentang peringkat bahasa pemrograman

Berdasarkan survey dari Stack Overflow Developer Survey 2023, bahasa pemrograman yang selalu menepati podium pertama berdasarkan jumlah survey ialah JavaScript. Namun, tidak harus selalu menggunakan JavaScript untuk mempelajari paradigma OOP. Kamu bisa menggunakan bahasa apa pun yang mendukung paradigma ini.

Langsung saja, mari kita mulai ulas!

Objek dan Class

Telah kita pelajari bahwa paradigma OOP selalu dikaitkan dengan objek di dunia nyata. Kita telah melihat bahwa seluruh mobil memiliki karakteristik tertentu. Untuk membuat banyak mobil pun terbilang sangat sulit jika dilakukan secara manual. Oleh karena itu, kita membutuhkan sebuah class.

Class bertingkah seperti sebuah blueprint. Jika diambil dari Cambridge Dictionary dalam mengartikan istilah inggris, blueprint merupakan rencana atau desain awal yang menjelaskan bagaimana sesuatu dapat dicapai. Suatu objek yang sama dengan jumlah yang banyak dapat dibentuk berdasarkan blueprint yang didefinisikan.

Analogi sedang melakukan perancangan terhadap blueprint

Bayangkan sebuah mobil dibuat berdasarkan blueprint yang ada. Pembuatannya akan lebih cepat dan efektif, bukan?

Blueprint bisa kita analogikan dengan istilah lain, yaitu cetakan. Bayangkan sebuah cetakan agar-agar yang dapat membuat agar-agar dalam jumlah yang banyak dan bentuk yang sama dengan sangat mudah dan efisien. Hal ini sama dengan class. Ia merupakan sebuah blueprint atau cetakan dalam membuat sebuah atau banyak objek.

Bagaimana dengan objek? Mobil atau agar-agar yang dihasilkan menggunakan cetakan adalah sebuah objek. Silakan perhatikan gambar berikut.

Contoh blueprint untuk membuat mobil dalam OOP dengan JavaScript

Gambar di atas merupakan karakteristik yang banyak dimiliki oleh kebanyakan mobil. Hanya saja tipe-tipe mobil tertentu yang membuat nilainya berbeda, seperti jumlah lampu sorot, kapasitas penumpang, kecepatan berkendara, dst.

Dalam hal ini, kode untuk membuat class dan objek (dalam paradigma OOP) dengan JavaScript dicontohkan seperti berikut.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
// Membuat blueprint untuk membuat objek mobil
class Car {
  name;
  price;
  color;
  capacity;
  policeNumber;
  isEngineStarted = false;
 
  constructor({ name, price, color, capacity = 4, policeNumber }) {
    this.name = name;
    this.price = price;
    this.color = color;
    this.capacity = capacity;
    this.policeNumber = policeNumber;
  }
 
  start() {
    this.isEngineStarted = true;
    console.log('Start the engine');
  }
 
  stop() {
    this.isEngineStarted = false;
    console.log('Stop the engine');
  }
 
  moveForward() {
    console.log('Move forward');
  }
 
  moveBackward() {
    console.log('Move backward');
  }
 
  brake() {
    console.log('Brake');
  }
}
 
// Membuat objek mobil dengan constructor function Car
const budiCar = new Car({
  name: 'BudiCar',
  price: 1000,
  color: 'Silver',
  policeNumber: 'AA-0000-AA',
});
const tiniCar = new Car({
  name: 'TiniCar',
  price: 2000,
  color: 'Black',
  capacity: 8,
  policeNumber: 'BB-0000-BB',
});
 
// Menampilkan nilai dari objek mobil
console.log(budiCar);
console.log(tiniCar);
 
// Memanggil method dari objek mobil
budiCar.start();
budiCar.moveForward();
 
tiniCar.start();
budiCar.moveForward();
 
/* Output:
Car {
  name: 'BudiCar',
  price: 1000,
  color: 'Silver',
  capacity: 4,
  policeNumber: 'AA-0000-AA',
  isEngineStarted: false
}
Car {
  name: 'TiniCar',
  price: 2000,
  color: 'Black',
  capacity: 8,
  policeNumber: 'BB-0000-BB',
  isEngineStarted: false
}
 
Start the engine
Move forward
Start the engine
Move forward
*/


Objek dari sebuah class juga disebut dengan instance dari class. Dengan demikian, kita bisa membuat banyak mobil dengan mudah hanya dengan cetakan.

Contoh pembuatan objek secara cepat dengan blueprint dalam OOP dengan JavaScript

Komponen-Komponen dalam Class

Pada pembahasan sebelumnya, setiap mobil memiliki karakteristiknya masing-masing. Bahkan, satu mobil dengan mobil lainnya memiliki karakteristik yang berbeda. Dalam konsep PBO, ia disebut dengan properti.

Properti

Sebagaimana kamu lihat pada kode sebelumnya, class Car memiliki enam buah properti, yaitu name, price, color, capacity, policeNumber, dan isEngineStarted. Itulah karakteristik yang kita miliki untuk membuat mobil. Mobil yang sangat simpel meskipun kenyataannya ada banyak sekali karakteristik lainnya, kan?

Silakan perhatikan gambar berikut.

Beberapa komponen dalam sebuah mobil

Setiap properti menyimpan sebuah nilai. Ada properti yang telah diberi nilai sejak class dibuat. Biasanya, ia disebut sebagai nilai awal atau default value. Ada properti yang belum diberikan nilai dan ia akan bernilai undefined.

JavaScript
1
2
3
4
5
6
name;
price;
color;
capacity;
policeNumber;
isEngineStarted = false;


Tentu kita bisa memberikan nilai untuknya melalui metode. Apa itu metode?

Metode (Method)

Method bisa kita representasikan sebagai hal-hal yang dapat dilakukan oleh objek. Mobil dapat menyalakan mesin, berjalan maju, menghentikan mobil dengan rem, membunyikan klakson, menyalakan lampu, dsb. Tentunya, kamu sudah tahu hal apa yang merupakan method dari kode sebelumnya, kan?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
constructor(name, price, color, capacity, policeNumber) {
  this.name = name;
  this.price = price;
  this.color = color;
  this.capacity = capacity;
  this.policeNumber = policeNumber;
}
 
start() {
  this.isEngineStarted = true;
  console.log('Start the engine');
}
 
stop() {
  this.isEngineStarted = false;
  console.log('Stop the engine');
}
 
moveForward() {
  console.log('Move forward');
}
 
moveBackward() {
  console.log('Move backward');
}
 
brake() {
  console.log('Brake');
}


Tentunya, ada analogi juga konteks mobil.

Kemampuan mobil

Ada satu hal yang perlu kita perhatikan dari methods di atas, yaitu method bernama constructor. Ia bukan merupakan method biasa. Ia merupakan method spesial yang akan dijalankan setelah objek dibuat.

Penutup

Itulah beberapa insight yang dapat membantumu untuk berkenalan ke paradigma Pemrograman Berorientasi Objek. Tentunya, masih panjang perjalananmu untuk memahami paradigma ini. Kami (Dicoding) sudah menyediakan kelas yang super lengkap untuk menggali lebih dalam, Belajar Dasar Pemrograman JavaScript.

Kelas Belajar JavaScript di Dicoding

Tidak hanya PBO, kamu akan belajar banyak hal lain, seperti struktur data, fungsi, penanganan error, proses asynchronous, dan pengujian. Bahkan, kamu akan mempelajari paradigma lain yang dimiliki oleh JavaScript, yaitu Pemrograman Fungsional.

 

Incredible! Cukup sampai di sini sharing knowledge yang dapat kami sampaikan. Semoga artikel ini dapat menjadi berkah dan manfaat untuk menambah khazanah pengetahuanmu. Tentunya, ada banyak artikel-artikel yang inspiratif di masa mendatang. Sampai jumpa di blog berikutnya.

Belajar Pemrograman Gratis
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.
Coba Sekarang