Belajar Dasar Pemrograman JavaScript

 

Belajar Dasar Pemrograman JavaScript

Pelajari dasar JavaScript, mulai dari fundamental, sintaks dan fitur ES6, hingga konsep automasi test menggunakan framework populer.

Silabus

Materi yang akan Anda pelajari pada kelas ini.

Pengantar Gerbang Dunia JavaScript

Mari kita mulai menapak sebagai Pengembang JavaScript! Ini menjadi penghargaan bagi kita dalam mengarungi luasnya samudra bahasa pemrograman, seperti JavaScript. Ya, sebagai salah satu bahasa yang paling populer, kita mampu membuka gerbang untuk melakukan dan membuat banyak hal dengan JavaScript. Anda ingin membuat aplikasi berbasis web, ponsel , desktop , baris perintah , hingga model dengan pembelajaran mesin pun dapat diwujudkan dengan JavaScript.

Semua tentang JavaScript! Kita akan menjelajahi dan membuka wawasan Anda tentang JavaScript di kelas ini. Sebagai langkah awal perjalanan, kita akan terlebih dahulu mengenal JavaScript. Berikut adalah tujuan pembelajaran yang akan dicapai dalam modul ini.

• Mampu membedakan antara ECMAScript dan JavaScript dengan baik.
• Mampu membedakan perilaku bahasa scripting dan bahasa terkompilasi .
• Mampu menunjukkan cara menjalankan kode JavaScript dalam berbagai lingkungan, baik Browser , Node.js , maupun Bun.
• Mampu membedakan konteks global JavaScript dari runtime browser , Node.js , dan Bun.

Dalam modul ini, kami akan membantu Anda mengenali JavaScript, mulai dari sejarahnya, cara kerja, konsep penting, dst. Setelah menyelesaikan modul ini, Anda diharapkan akan memiliki keahlian yang kuat saat menggunakan node biner dan mampu menerapkannya dalam pengembangan aplikasi dengan Node.js.

Apa Itu Pemrograman

Salah satu bahasa pemrograman untuk komputer adalah JavaScript. Apakah Anda tahu apa itu pemrograman atau bahasa pemrograman? Sebelum melangkah lebih jauh ke JavaScript, kita perlu mengetahui makna dari istilah tersebut.

Pemrograman adalah proses penyusunan instruksi yang sistematis dan akan dieksekusi oleh komputer. Dari pengertian tersebut, kita dapat memiliki gambaran bahwa ini mirip dengan instruksi kepada suatu objek seperti manusia dalam mengikuti panduan memasak, tetapi dalam dunia pemrograman, komputer adalah objeknya. Manusia membuat beberapa proses yang harus dieksekusi oleh komputer dalam bahasa yang dimengertinya, yaitu bahasa pemrograman. Menarik bukan?

Melalui pemrograman, ada banyak permasalahan yang dapat diatasi sehingga dapat memudahkan kehidupan manusia, contohnya di bawah ini.

• Melakukan pemesanan/pembelian tiket liburan, menonton film, makanan & minuman, dan sebagainya melalui aplikasi perangkat mobile .
• Membayar tagihan belanjaan di e-commerce dengan mengisi formulir informasi kartu kredit/debit dan klik tombol “Bayar” melalui browser .
• Melakukan pertemuan dengan banyak orang secara berani.
• Mengeksplorasi berbagai wilayah di dunia dengan aplikasi peta.

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

Namun, program sebenarnya tidak harus kompleks. Perhatikan hasil program pada gambar berikut.

Apakah gambar di atas juga disebut sebagai program? Gambar tersebut adalah hasil proses komputer yang hanya menampilkan teks “Hello, world!” ke layar ( konsol /terminal). Meskipun prosesnya terbilang sangat sederhana dan sedikit, ia juga merupakan sebuah program.

Setelah mengetahui maksud dari pemrograman, kita mendapat gambaran lebih jelas tentang fungsi atau kemampuan yang bisa dilakukan oleh komputer. Disadari atau tidak, mungkin kita sudah sering menjadikan komputer sebagai alat untuk mempermudah pekerjaan. Namun, tidak hanya itu saja. Kita dapat menjadikan komputer sebagai alat yang sangat hebat dengan belajar membangun program di kelas ini!

Scripting dan Compiled Language

Pada dasarnya, pemrograman memungkinkan komputer menjalankan perintah-perintah sistematis dalam bahasa yang dimengerti. Yup, komputer memerlukan bahasa khusus sehingga perintah-perintah tersebut dapat terlaksana dengan baik. Sebagai pemrogram atau developer, kita perlu menggunakan bahasa yang tepat dan nantinya dapat dimengerti oleh komputer.

Serangkaian perintah komputer ditulis oleh developer dalam bentuk kode. Kode dapat berupa sekumpulan karakter, angka, dan simbol. 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. Inilah yang disebut dengan bahasa mesin. Bahasa ini sangat sulit dipahami oleh manusia dan komputer hanya memahami bahasa ini.

Tahukah kamu bahwa bahasa mesin juga disebut sebagai bahasa tingkat rendah (low-level language)? Ia disebut demikian karena dapat dieksekusi langsung oleh mesin alias bahasa yang lebih dekat dengannya. Tentu ada bahasa tingkat tinggi (high-level language) juga. Namun, ia hanya lebih dekat dengan manusia sehingga mudah ditulis, dibaca, dan dipahami olehnya. Agar bahasa tingkat tinggi bisa dieksekusi oleh mesin, kita perlu mengonversi atau mengolah source code ini ke bahasa rendah.

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. Mari kita bahas satu per satu.

Compiled Language

Ada beberapa bahasa pemrograman yang membutuhkan satu tahapan sebelum instruksinya dapat dijalankan oleh mesin, yaitu proses kompilasi atau compile. Bagi bahasa yang membutuhkan ini, mereka memiliki compiler-nya masing-masing.

Untuk lebih jelasnya, perhatikan gambar berikut.

Misalnya, developer membuat sebuah program dengan suatu bahasa yang menggunakan compiler. Agar instruksi dapat dijalankan oleh komputer, source code perlu diubah dahulu ke bahasa mesin menggunakan compiler. Terakhir, program tersebut dapat diserahkan ke mesin agar dijalankan.

Beberapa bahasa yang menggunakan compiler adalah Java, C++, Swift, dsb.

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. Masing-masing aplikasi pasti membawa kode JavaScript dan langsung dibaca oleh browser.

Untuk lebih jelasnya, perhatikan gambar berikut.

Beberapa bahasa pemrograman yang menggunakan interpreter adalah JavaScript, PHP, Python, dsb.

Jadi, sekarang kita sudah paham bahwa mesin tidak dapat begitu saja menjalankan perintah yang ditulis menggunakan bahasa yang lebih dekat dengan manusia (high-level language). Kita membutuhkan sebuah alat yang menerjemahkannya menjadi bahasa yang lebih mudah dipahami oleh mesin.

Selanjutnya, kita akan berkenalan dengan salah satu bahasa pemrograman yang memanfaatkan interpreter, yaitu JavaScript.

Pengenalan JavaScript

Sebelumnya, kita sudah mengenal pemrograman dan bahasa pemrogramannya. Bahasa pemrograman dibagi menjadi dua, yaitu bahasa tingkat rendah dan bahasa tingkat tinggi. JavaScript merupakan salah satu bahasa pemrograman yang lebih dekat dengan manusia alias high-level language. Oleh karena itu, ia perlu diterjemahkan agar dipahami oleh mesin.

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).

JavaScript sudah sangat marak digunakan dalam pengembangan aplikasi web. Bagi developer web, mereka sudah sangat andal dalam membangun beragam website dengan HTML (HyperText Markup Language) sebagai pembentuk struktur halaman dan CSS (Cascading Style Sheet) untuk styling agar terlihat cantik.

Namun, masalahnya adalah website agak statis. Tidak ada perubahan apa pun yang terjadi secara dinamis, baik dari sisi konten maupun styling. Misalnya, developer web ingin adanya interaktivitas elemen, perubahan styling, memiliki kendali terhadap struktur halaman, meminta data ke server, dll. Semua ini dilakukan hanya dengan JavaScript. Website menjadi lebih interaktif dan dinamis atas datangnya JavaScript.

Pesannya perkembangan teknologi menyebabkan JavaScript berkembang. Saat ini, JavaScript sudah merambah 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 sistem manajemen basis data (DBMS), salah satunya 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 terbaik yang paling banyak digunakan oleh para pengembang. Angkanya sebesar 63,61%. Namun, JavaScript memiliki cerita perjalanan yang cukup bersejarah. Pada awalnya,  JavaScript  atau sering disingkat dengan  JS  dikembangkan hanya untuk membuat situs web lebih “hidup”. Ia dilahirkan sekitar tahun 1995 oleh programmer dari perusahaan Netscape, yaitu Brendan Eich.

Mungkin Anda pernah mendengar nama bahasa pemrograman yang mirip dengan JavaScript. Dia adalah Jawa. Meskipun mirip dengan namanya, JavaScript tidak memiliki hubungan apa pun dengan bahasa itu, kecuali perihal “pemasaran”. Dengan adanya elemen “Java” pada penamaannya, JavaScript menjadi semakin populer harapannya. Namun, pada awalnya, JavaScript sempat dinamai LiveScript saat pertama kali dibuat.

Setelah diadopsi di luar Netscape, JavaScript distandarisasi oleh organisasi internasional bernama European Computer Produsen Association, yang disingkat ECMA. Mereka menyusun standar untuk JavaScript yang menjelaskan cara ia bekerja serta spesifikasi-spesifikasinya. Ini dinamakan standar  ECMAScript  . Harapannya, seluruh platform yang mendukung JavaScript dapat dipastikan menggunakan spesifikasi yang sama. Sejak saat itu, istilah JavaScript atau ECMAScript sering tertukar padahal keduanya tidaklah sama. JavaScript termasuk bahasa pemrograman, sedangkan ECMAScript adalah standar dari bahasa pemrogramannya, salah satunya JavaScript.

Ada beberapa versi JavaScript yang sudah distandardisasi oleh  ECMAScript  . Pada tahun 2000 hingga 2010, ECMAScript 3 merupakan versi yang banyak digunakan ketika JavaScript sedang mendominasi. Selama waktu tersebut, sebuah pengerjaan yang ambisius terjadi untuk membentuk ECMAScript 4. Pengerjaan ini direncanakan akan membawa jumlah peningkatan yang sangat banyak. Namun, ambisi tersebut tidak berjalan mulus sehingga pada tahun 2008 pengembangannya dihentikan. Meskipun demikian, ini bukan akhir dari JavaScript.

ECMAScript  tetap melanjutkan pengembangannya untuk merilis ECMAScript versi ke-5. Peningkatan ini dilakukan dengan mengurangi ambisinya dan hanya melakukan perbaikan pada hal yang tidak kontroversial. Ini terjadi pada tahun 2009.

Pada tahun 2015, ECMAScript melakukan peningkatan kembali dalam versi keenam. Versi ini membawa perubahan yang cukup besar, termasuk beberapa inovasi yang sempat diurungkan ketika menggarap versi keempat. Sejak saat itu, ECMAScript terus melakukan pembaruan kecil setiap tahunnya.

Dengan semakin berkembangnya JavaScript, browser dan beberapa platform yang mendukung JavaScript juga perlu mengikuti perkembangannya. Jika masih menggunakan platform versi terdahulu, beberapa fitur JavaScript yang baru mungkin saja tidak akan berjalan. Terlebih lagi, hal ini menjadi perhatian yang mendalam bagi pengembang JavaScript. Mereka harus tetap memastikan kompatibilitas dengan beberapa aplikasi lama sehingga browser masih dapat menjalankannya. Terlebih lagi, JavaScript belum dapat memastikan adopsinya saat ada spesifikasi terbaru dari standar ECMAScript .

Demikian sejarah dari perkembangan JavaScript. Kami harap Anda mendapatkan wawasan yang lebih luas sebelum terjun ke fundamentalnya. Selanjutnya kita akan melihat berbagai runtime yang dapat menjalankan program JavaScript.

Mari kita periksa!

JavaScript Runtime Environment

Tidak bisa dimungkiri bahwa setiap aplikasi untuk platform berbeda biasanya menggunakan bahasa pemrograman yang berbeda pula. Katakanlah aplikasi web menggunakan JavaScript, aplikasi Android menggunakan Kotlin, aplikasi iOS menggunakan Swift, aplikasi Windows mayoritas menggunakan C#, dan sebagainya. Kini, ternyata JavaScript dapat dimanfaatkan untuk berbagai platform berkat runtime environment di luar browser. Apa itu runtime environment?

Runtime environment adalah tempat sebuah program akan dieksekusi. Ia akan menentukan global object yang dapat diakses oleh program JavaScript. Lalu, apa yang dimaksud dengan global object? Nah, kita akan memahaminya ketika mempelajari masing-masing runtime environment.

Ada tiga macam yang akan kita bahas dalam materi ini, yaitu Browser, Node.js, dan Bun.

Browser

Kebanyakan program JavaScript dijalankan melalui lingkungan browser untuk membuat aplikasi browser interaktif dan dapat menampilkan data yang dinamis. Contohnya, kita memiliki satu buah proyek aplikasi web yang berisi berkas index.html dan index.js dengan isi berikut.

• index.html

<!DOCTYPE html>
<html>
  <body>
    <h1>My Website</h1>
 
    <script>
      window.alert('Hello, world!');
    </script>
  </body>
</html>

Berkas di atas adalah index.html yang dibutuhkan untuk menampilkan konten dan struktur halaman web. Jika dilihat, ada program JavaScript di dalamnya yang dibungkus oleh elemen <script>. Jika dijalankan, hasilnya akan seperti berikut.

Sebagian besar dari Anda mungkin bingung asal mula kode window.alert('Hello, world!'). Mengapa alert dapat menampilkan browser alert? Inilah yang dimaksud dari global object yang disinggung sebelumnya. Program JavaScript yang dijalankan dalam lingkungan browser memiliki akses terhadap global object window. Selain menampilkan alert saja, ia juga memberikan akses developer untuk memanipulasi seluruh konten yang tampil di browser. Caranya adalah mengakses properti window.document. Program apa pun yang dijalankan dalam runtime ini dapat mengakses objek tersebut. Keren, ya?

Jika mau, Anda dapat bermain program JavaScript dalam runtime browser dengan interactive code berikut.

Cara di atas adalah embedded JavaScript. Ada cara lain untuk menjalankan kode pada browser, yaitu berkas eksternal JavaScript dan Read-Eval-Print-Loop (REPL) versi browser.

External JavaScript

Kode program dalam cara ini ditulis secara terpisah dari berkas HTML. Berkas JavaScript ditulis dengan berkas berekstensi “js”. Kita pindah contoh kode di atas dalam berkas index.js berikut.

• index.html
• index.js

<!DOCTYPE html>
<html>
  <body>
    <h1>My Website</h1>
 
    <script src="index.js"></script>
  </body>
</html>

Pemisahan ini membuat program JavaScript tidak lagi terhubung dengan HTML. Oleh karena itu, kita gunakan <script> untuk mengimpornya.

REPL versi Browser

Cara ketiga adalah menjalankannya secara langsung melalui browser atau REPL. Read-Eval-Print-Loop atau disingkat REPL dimiliki juga oleh browser. Caranya sangatlah mudah.

Buka browser kesukaan Anda dan Developer Tools di dalamnya. Developer Tools adalah fitur browser untuk mendukung proses pengembangan aplikasi web. Salah satu fitur yang dimiliki adalah REPL. Ini dapat kita akses dengan membuka tab Console dan mulai menuliskan kode JavaScript.

Lebih jelasnya, silakan perhatikan gambar bergerak berikut.

Program yang dibuat dan dieksekusi di lingkungan browser biasanya dikenal dengan aplikasi front-end atau aplikasi client. Jika ingin menjalankan program JavaScript dalam sistem komputer atau membangun aplikasi back-end, kita memerlukan runtime environment lain, seperti Node.js dan Bun.

Catatan:
Anda tidak perlu khawatir jika kesulitan dalam memahami contoh kode di atas. Dalam kelas ini, kita akan belajar dari nol hingga mahir menuliskan kode JavaScript.

Node.js

Node.js adalah runtime environment untuk JavaScript yang berbeda dari browser. Meskipun berbeda, seluruh fitur dari bahasa pemrograman JavaScript, yakni membuat variabel, melakukan operasi aritmetika, dsb. dapat dilakukan juga di sana. Hanya saja kita tidak memiliki akses lagi terhadap global object milik browser, seperti alert. Sebagai gantinya, Node.js memberikan akses kepada developer untuk mengakses file system, mengatur database, dan lainnya.

Misalnya, kita dapat mengetahui sistem operasi yang digunakan oleh komputer dengan kode berikut.

console.log(process.platform);

Untuk menjalankan kode di atas, kita perlu memasang Node.js sebagai runtime environment dalam komputer. Anda dapat mengunjungi alamat nodejs.org untuk mendapatkan panduan pemasangan. Jika telah terpasang, Anda akan memiliki akses ke aplikasi yang bernama node di terminal.

Contoh kode di atas mengakses global object bernama process. Objek ini berisi data-data yang berelasi dengan berkas JavaScript yang sedang dieksekusi. Lalu, properti platform dipanggil untuk mengembalikan jenis sistem operasi yang dipakai dalam menjalankan program ini. Ini sama halnya dengan window dalam runtime browser.

Katakanlah kode tersebut kita simpan dalam berkas app.js. Untuk menjalankannya, kita dapat menggunakan perintah berikut.

node app.js

Perintah node di atas memberi tahu komputer untuk menjalankan berkas JavaScript dalam Node.js environment. Berikut hasil eksekusinya.

Node.js memiliki alternatif lain untuk menjalankan program tanpa mengeksekusi berkas JavaScript, yaitu memanfaatkan Read-Eval-Print-Loop (REPL). Caranya sangat mudah:

• buka terminal;
• jalankan perintah node;
• tulis kode programnya; dan
• tekan tombol Enter.

Silakan perhatikan gambar bergerak berikut untuk lebih jelasnya.

Bun

Ada alternatif yang dapat digunakan untuk menjalankan program dalam sistem komputer selain Node.js, yaitu Bun. Ia adalah JavaScript runtime baru yang menyajikan ekosistem JavaScript terkini dan berbagai fitur yang mengedepankan kecepatan. Jika mengacu ke halaman resminya, ia dibangun agar tetap kompatibel dengan berbagai fitur dari Node.js.

Sama seperti Node.js, Bun mendukung berbagai sistem operasi, seperti Linux, MacOS, dan Windows. Untuk menjalankan program dengan Bun, kita perlu memasangnya terlebih dahulu dan kita dapatkan perintah bun di terminal setelahnya.

Ada dua cara untuk menjalankan programnya, yaitu mengeksekusi berkas dan REPL. Kita akan gunakan kembali contoh kode sebelumnya sebagai contoh, yaitu app.js.

Untuk menjalankan berkas JavaScript, kita dapat gunakan perintah berikut.

bun run app.js

Wah, ternyata butuh tambahan perintah lagi, yaitu run, ya? Betul, tetapi kita juga dapat menghilangkan perintah itu alias hanya mengetikkan bun app.js. Jangan khawatir karena dua cara ini sebetulnya masih identik (tidak ada perbedaan).

Bagaimana dengan cara REPL? Mudah saja, cukup jalankan perintah berikut.

bun repl

Bagi Anda yang baru pertama kali menjalankan perintah di atas, biasanya Bun akan melakukan beberapa proses sebelum REPL siap digunakan. Jika sudah muncul, jangan ragu untuk menulis kode program apa pun di sana.

Itu dia beberapa runtime environment untuk bahasa pemrograman JavaScript. Ternyata ada beberapa runtime, ya. Meskipun demikian, JavaScript memiliki fitur yang seragam dengan beberapa platform atau runtime lainnya. Ya, hal ini karena mereka tetap patuh terhadap standar ECMAScript.

Kami yakin Anda sudah tidak sabar belajar membuat program dengan JavaScript, kan? Ini adalah rasa pada diri kita yang perlu dipertahankan agar dapat menjadi JavaScript developer yang andal. Pada beberapa modul berikutnya, kita akan mulai berkarya dengan JavaScript. Fighting!