Rangkuman Belajar JavaScript

 



Apa Itu Pemrograman

Pemrograman adalah proses atau kegiatan membuat instruksi yang sistematis untuk berinteraksi dengan komputer dalam memecahkan permasalahan. Manusia membuat beberapa instruksi yang harus dieksekusi oleh komputer dalam bahasa yang dimengertinya, yakni bahasa pemrograman.

Masih ada banyak hal lainnya yang bisa dilakukan oleh komputer melalui programming. Tingkat kompleksitas program berbanding lurus dengan jumlah instruksi. Artinya, makin besar tugas komputer maka makin banyak instruksi yang akan disusun. Bahkan tidak hanya ratusan, ribuan atau jutaan instruksi terstruktur dapat dibangun dalam sebuah program.


Scripting dan Compiled Language

Komputer memerlukan bahasa khusus sehingga perintah-perintah tersebut dapat terlaksana dengan baik. Serangkaian perintah komputer ditulis oleh developer dalam bentuk kode. Kode-kode ini hanya dipahami oleh manusia atau disebut dengan bahasa tingkat tinggi. Ada sangat beragam bahasa pemrograman di luar sana dan memiliki penulisan kode atau sintaksis yang bermacam-macam. Beberapa contohnya adalah JavaScript, Java, C, C++, Python, Matlab, dsb.

Hasil kegiatan menulis kode ini disebut sebagai source code. Berikutnya, source code tersebut akan diubah ke bahasa yang dapat dipahami oleh komputer sehingga bisa dianalisis dan dieksekusi perintah-perintahnya. Ini adalah bahasa tingkat rendah yang disebut dengan bahasa mesin. Bahasa ini sangat sulit dipahami oleh manusia dan komputer hanya memahami bahasa ini.

Dalam tahapan perubahan dari bahasa tingkat tinggi ke bahasa tingkat rendah, ada dua mekanisme yang dapat dilakukan serta setiap bahasa dapat menggunakan cara berbeda, yaitu compiler dan interpreter.

  • Compiled Language
    Ada beberapa bahasa pemrograman akan membutuhkan satu tahapan sebelum instruksinya dapat dijalankan oleh mesin, yaitu proses kompilasi atau compile. Sebelum diserahkan ke mesin, susunan instruksi perlu dikonversi ke bahasa mesin dahulu.

  • Scripting Language
    Tidak seperti compiled language, sebuah program atau source code yang ditulis dengan scripting language tidak memerlukan compiler. Source code dapat langsung diberikan, diterjemahkan, dan dijalankan oleh mesin. Mesin ini menggunakan interpreter dalam melakukannya. Contoh yang sangat dekat dengan kita adalah browser.


Pengenalan JavaScript

JavaScript termasuk dalam salah satu bahasa pemrograman yang menggunakan interpreter (scripting language). Artinya, kita dapat menulis kode dengan bahasa ini dan langsung diserahkan ke mesin. Baris per baris kode akan diterjemahkan dan dieksekusi oleh mesin. Jika ada kode yang salah, error akan langsung ditampilkan pada saat runtime (program berjalan).

Pesatnya perkembangan teknologi menuntun JavaScript berkembang. Saat ini, JavaScript sudah merambah ke berbagai platform. Selain aplikasi browser, banyak juga aplikasi server, desktop, dan lainnya yang dapat dibangun dengan JavaScript. Ini tercapai berkat runtime JavaScript, seperti Node.js dan Bun. Bahkan, beberapa database management system (DBMS), seperti MongoDB, juga menggunakan JavaScript sebagai bahasa scripting dan kuerinya.


Sejarah JavaScript

Berdasarkan survei dari Statista pada tahun 2023, JavaScript menjadi bahasa pemrograman dalam posisi peringkat teratas yang paling banyak digunakan oleh para developer. Pada mulanya, JavaScript atau sering disingkat dengan JS dikembangkan hanya untuk membuat website lebih “hidup”. Ia dilahirkan sekitar tahun 1995 oleh programmer dari perusahaan Netscape, yaitu Brendan Eich.

Sebelum bernama JavaScript, ia sempat dinamai LiveScript. Namun, karena berharap untuk lebih populer, LiveScript terinspirasi dari bahasa pemrograman bernama Java sehingga mengubah namanya menjadi JavaScript.

Beberapa waktu kemudian, JavaScript distandardisasi oleh organisasi bernama ECMA. Mereka menyusun standar agar setiap platform yang mendukung bahasa ini memiliki kesamaan standar, cara kerja, serta spesifikasi-spesifikasinya. Hal ini dinamai standar ECMAScript. Mulai sejak itu, ECMAScript melakukan peningkatan dari tahun ke tahun.

Expression dan Statement

Pemrograman pada dasarnya adalah cara kita berkomunikasi dengan komputer. Komunikasi ini melibatkan pemberian instruksi kepada komputer agar menjalankan tugas-tugas tertentu dengan benar. Tentu saja, kita perlu mengikuti aturan tertentu untuk memberikan instruksi kepada komputer.

Pada pemrograman, satu instruksi umumnya ditulis dalam satu baris kode. Jadi, tiga instruksi umumnya ditulis dalam tiga baris kode. Istilah yang digunakan untuk "instruksi" dalam bahasa pemrograman adalah "statement".

Bisa disimpulkan bahwa statement adalah instruksi yang akan dieksekusi oleh komputer.

Selain statement, ada istilah lain yang penting untuk diketahui, yaitu expression. Ini merupakan bagian dari sebuah statement yang menghasilkan nilai. Setiap statement biasanya mengandung setidaknya satu expression.

Variabel

Variabel adalah wadah untuk menampung sebuah nilai. Nilai yang ditampung dapat berupa angka, teks, atau apa pun yang menghasilkan nilai (expression). Pada JavaScript, kita bisa membuat variabel melalui dua cara, yakni dengan sintaksis const dan let.

Perbedaan dari variabel yang dibuat dengan const dan let adalah variabel yang dibuat dengan const tidak dapat diinisialisasi ulang (sederhananya, diubah) nilainya, sedangkan jika variabel dibuat dengan let, kita bisa menginisialisasi ulang nilainya.

Variabel yang dibuat dengan const juga umum disebut sebagai constant (konstan) karena dalam matematika istilah tersebut memiliki arti tetap atau tidak berubah-ubah.

Dalam membuat variabel, kita tidak bisa memberikan nama secara sembarang. Ada aturan yang perlu kita taati. Berikut adalah beberapa aturan dalam penamaan variabel pada JavaScript.

  • Tidak Boleh Memberikan Nama yang Sama dalam Cakupan yang Sama.
  • Nama Variabel Hanya Terdiri dari Karakter Tertentu.
  • Nama Variabel Tidak Boleh Diawali dengan Angka.

Mengubah Nilai Antar Tipe Data

JavaScript adalah bahasa pemrograman yang dinamis dan fleksibel, ia menyediakan berbagai cara untuk mengonversi tipe data. Konversi tipe data dapat dilakukan secara eksplisit oleh developer atau secara implisit oleh interpreter.

Pengertian Function

Function adalah program kecil berisi sekumpulan perintah sehingga bisa dijalankan saat dibutuhkan. Hal tersebut sangat kita perlukan untuk mencegah aktivitas redundan dalam mencapai penyelesaian masalah.

Misalnya, daripada menuliskan formula konversi suhu sebanyak lima kali, kita dapat membungkus formula tersebut dalam function dan menjalankannya sebanyak lima kali. Ini lebih mudah ditulis dan dibaca oleh manusia.

Deklarasi Function

Ada tiga istilah yang perlu dipahami dalam mendefinisikan function, yakni function keyword, identifier, dan function body.

  • Function keyword: syarat paling utama saat membuat function.
  • Identifier: identitas function.
  • Function body: block of code yang membungkus banyak perintah.

Berikut adalah contoh dari pembuatan function.

  1. function convertCelsiusToFahrenheit(temperature) {
  2.   const temperatureInFahrenheit = 9 / 5 * temperature + 32;
  3.  
  4.   console.log('Hasil konversi:', temperatureInFahrenheit);
  5. }


Pemanggilan Function

Sebagaimana sebuah variabel dipanggil setelah dibuat, dalam menjalankan function, kita cukup panggil identifier-nya. Namun, tambahkan sintaks “()” setelahnya tanpa diikuti dengan white-space (spasi).

  1. function convertCelsiusToFahrenheit(temperature) {
  2.   const temperatureInFahrenheit = (9 / 5) * temperature + 32;
  3.  
  4.   console.log('Hasil konversi:', temperatureInFahrenheit);
  5. }
  6.  
  7. const temperatureInCelsius = 90;
  8. convertCelsiusToFahrenheit(temperatureInCelsius);


Parameter dan Argument

Walaupun dapat mengeksekusi sekumpulan kode, sebuah subprogram bisa saja membutuhkan data agar tugasnya terpenuhi. Tentu ini akan meningkatkan reusability darinya. Oleh karena itu, kita membutuhkan parameter dan argumen function.

Apa perbedaan antara parameter dan argumen? Parameter function berperan sebagai input data atau variabel yang mengantarkan nilai, sedangkan argumen adalah nilai yang diberi saat function dipanggil.

Return Value

Pada dasarnya, function akan mengembalikan undefined ketika dipanggil. Ini berlaku jika function tidak mengembalikan nilai apa pun setelah dieksekusi. Ada kalanya, kita akan membutuhkan agar function bisa mengembalikan suatu nilai. Ini dicapai dengan return keyword dan diikuti nilai kembaliannya.

  1. function convertCelsiusToFahrenheit(temperature) {
  2.   return (9 / 5) * temperature + 32;
  3. }


Function Expression

Anda masih ingat perbedaan antara statement dan expression, bukan? Cara deklarasi function yang kita pelajari sebelumnya adalah cara statement. Namun, ada juga versi expression-nya, lo. Ini dinamakan dengan function expression.

Perbedaannya hanya pada penentuan identifier. Tidak ada penentuan setelah function keyword. Sebagai gantinya, nilai function bisa disimpan dalam variabel dan nama variabel menjadi identifier-nya.

  1. const convertCelsiusToFahrenheit = function (temperature) {
  2.   return (9 / 5) * temperature + 32;
  3. };

Salah satu keuntungan dari function expression adalah dapat disebut sebagai first-class citizen. Tidak hanya disimpan dalam variabel, function dapat dijadikan sebagai argumen dan bahkan dijadikan sebagai return value dari suatu function.

  1. // Dijadikan sebagai argumen dari parameter 'operation'
  2. function calculate(operation, numA, numB) {
  3.   return operation(numA, numB);
  4. }
  5.  
  6. // Dijadikan sebagai return value
  7. function multiplier(x) {
  8.   return function (num) {
  9.     return x * num;
  10.   };
  11. }


Arrow Function

Ada gaya lain dalam membuat function dalam JavaScript, yaitu arrow function. Arrow function hanya tersedia dengan cara expression. Perbedaannya ada pada function keyword yang hilang dan penambahan notasi fat arrow sebelum body function.


Sintaks di atas mungkin sudah cukup singkat bagi kita, tetapi belum singkat lagi menurut JavaScript. Ternyata arrow function dapat dicapai tanpa kurung kurawal alias seakan-akan tidak memiliki body function.

Pengantar Menyelami Dunia OOP

“All Roads Lead to Rome” - Pepatah Romawi.

Banyak jalan menuju Roma adalah pepatah populer di Indonesia yang mengajarkan bahwa ada banyak rute menuju kota tersebut. Begitu pula dalam menyelesaikan masalah, terdapat berbagai cara yang bisa ditempuh. Di dunia pemrograman, terdapat berbagai teknik dan metode. 

Meskipun berbeda dalam pendekatan dan langkah-langkahnya, metode-metode ini menghasilkan hasil akhir yang sama. Misalnya, paradigma OOP dan functional, meskipun memiliki langkah-langkah berbeda, hasilnya tetap sama. Dengan begitu, kita tidak terpaku pada satu metode saja sehingga solusi yang dihasilkan bisa lebih beragam.

Object akan berinteraksi satu sama lain untuk menyelesaikan tugas sehingga membentuk keseluruhan program. Selain itu, object merupakan representasi dari entitas.

Object terdiri dari atribut informasi (property) dan perilaku (method). Property adalah informasi tentang objek tersebut seperti nama, warna, dan jenis, sedangkan method adalah aksi atau perilaku yang dapat dilakukan oleh objek seperti berjalan, berlari, dan terbang.

Constructor function

JavaScript bukanlah bahasa pemrograman berbasis class sehingga JavaScript tidak mengenal class. Meskipun tidak mengenal class, prinsip OOP tetap dapat diterapkan. Constructor function adalah cara yang digunakan untuk membuat object dan class sebelum adanya ES6. Cara membuat object dan class menggunakan constructor function dapat dilihat pada contoh berikut.

  1. function Person(name, age) {
  2.   this.name = name;
  3.   this.age = age;
  4. }
  5.  
  6. Person.prototype.eat = function() {
  7.   console.log(`${this.name} is eating`);
  8. }

Kode di atas merupakan contoh membuat blueprint dari entitas person. JavaScript bukan bahasa pemrograman berbasis class, melainkan bahasa pemrograman berbasis prototype (prototype-based language). Oleh karena itu, Anda melihat penggunaan prototype pada contoh kode di atas. 

Prototype adalah salah satu konsep fundamental dalam JavaScript yang memungkinkan pewarisan sifat dan method antar object (akan dibahas nanti). Semua object di JavaScript memiliki properti tersembunyi bernama [[Prototype]] yang mengarah ke object prototype lain atau null.

Inheritance

Pilar yang akan kita bahas pertama adalah inheritance. Inheritance jika diterjemahkan ke dalam bahasa Indonesia artinya adalah pewarisan. Sesuai dengan namanya, kita bisa mewariskan harta property dan method dari sebuah class ke class lain. Umumnya, properti dan method yang diwariskan berasal dari class (induk) dan digunakan oleh class baru (anak). Sama halnya di kehidupan sehari-hari, sedikit banyaknya sebagai anak, kita memperoleh sifat dan perilaku dari orang tua.


Di OOP, inheritance memungkinkan class untuk mewarisi property dan method yang dimilikinya sehingga membantu mengurangi penulisan kode secara berulang (mengurangi redundancy kode). Misalnya, ketika kita membuat sebuah class dengan property dan method, keduanya dapat digunakan kembali oleh class lainnya melalui inheritance. Berikut adalah contohnya.



class SuperClass { }

 

class SubClass extends SuperClass { }

Istilah SuperClass dan SubClass akan sering kita dengar ketika bahas inheritance di OOP. Class yang mewariskan property dan method-nya disebut dengan SuperClass, Induk, Base, atau Parent Class. Class yang mewarisi property dan method dari class lain disebut dengan SubClass dan Children Class (Anak).


Misalnya, Anda memiliki smartphones dengan jenis Android dan iOS, setiap smartphones tersebut pasti memiliki property color, brand, model, dan method-nya adalah charging. Dengan paradigma OOP, property dan method yang memiliki kesamaan bisa kita abstraksikan menjadi sebuah class baru bernama Smartphones. Kemudian kita bisa membuat dua class baru, yaitu Android dan iOS.




Android dan iOS akan mewariskan property dan method dari class Smartphones seperti yang ada pada gambar di atas. Dengan begitu, class Android dan iOS akan memiliki property color, brand, model dan method charging. Selain itu, di masing-masing class kita dapat menambahkan property yang hanya ada pada dirinya. Misalkan, class Android memungkinkan untuk memiliki method split screen, sedangkan class iOS memungkinkan untuk memiliki method AirDrop.




Jika contoh di atas kita terapkan pada kode JavaScript, kodenya akan menjadi seperti berikut ini.


main.js


1

class SmartPhones {

2

  constructor(color, brand, model) {

3

    this.color = color;

4

    this.brand = brand;

5

    this.model = model;

6

  }

7

​

8

  charging() {

9

    console.log(`Charging ${this.model}`);

10

  }

11

}

12

​

13

class iOS extends SmartPhones {

14

  airDrop() {

15

    console.log('iOS have a behavior AirDrop');

16

  }

17

}

18

​

19

class Android extends SmartPhones {

20

  splitScreen() {

 Input  Reset

 Jalankan


            

Di implementasi kode, SubClass (Android, iOS) hanya mendefinisikan method yang hanya ada pada dirinya. Selain itu, kita tetap dapat mengakses property dan method yang ada pada SuperClass (color, brand, model, charging) sehingga mengurangi penulisan kode yang berulang.


Ternyata, mengimplementasikan pewarisan di JavaScript dengan ES6 Class sangat mudah, ya. Masih ingatkah Anda bahwa sebelum adanya ES6 Class, untuk membuat class di JavaScript menggunakan constructor function. Sekarang, kita akan kilas balik ke masa sebelum adanya ES6. Kita akan mencoba merasakan penderitaan orang terdahulu dalam mengimplementasikan pewarisan sebelum adanya ES6 Class.


Tanpa menggunakan ES6 Class, pewarisan akan menggunakan teknik prototype inheritance seperti berikut ini.


main.js


1

function SmartPhones(color, brand, model) {

2

  this.color = color;

3

  this.brand = brand;

4

  this.model = model;

5

}

6

​

7

SmartPhones.prototype.charging = function() {

8

  console.log(`Charging ${this.model}`);

9

};

source: by Dicoding (Belajar Javascript Dasar)

Komentar

Postingan populer dari blog ini

Kenapa?

Apa yang terlambat kamu pelajari dalam hidup?

The New Friends