{"id":278,"date":"2022-04-17T06:37:51","date_gmt":"2022-04-17T06:37:51","guid":{"rendered":"https:\/\/sentraldigitalindonesia.co.id\/blog\/2022\/04\/17\/javascript-module-dan-keribetannya-mazipan-space\/"},"modified":"2022-04-17T06:39:10","modified_gmt":"2022-04-17T06:39:10","slug":"javascript-module-dan-keribetannya-mazipan-space","status":"publish","type":"post","link":"https:\/\/sentraldigitalindonesia.co.id\/blog\/2022\/04\/17\/javascript-module-dan-keribetannya-mazipan-space\/","title":{"rendered":"JavaScript Module dan keribetannya"},"content":{"rendered":"
\n
\n

Hal yang lucu ketika sebuah bahasa pemrograman sebesar JavaScript ternyata memiliki variasi dalam penerapan module system<\/em>. Sebelum membaca lebih jauh, mari kita bahas bersama dahulu apa itu module system<\/em> dan bagaimana seluk-beluknya di JavaScript hingga hari ini.<\/p>\n

Apa itu module system?<\/h2>\n

Module System<\/strong> adalah sebuah cara bagi bahasa pemrograman agar bisa menerapkan isolasi kode dari satu file terhadap file lain, serta memudahkan untuk menyertakan kode dari file lain ke dalam file yang membutuhkannya.<\/p>\n

Ini adalah sistem yang sudah sangat jamak di berbagai bahasa pemrograman. Bukan barang baru, bukan juga barang mewah. Module System biasanya sudah diatur oleh bahasa itu sendiri sehingga tidak diperlukan lagi persepsi tambahan dari komunitas dan berbagai pihak dalam menerapkan module system<\/em> di dalam suatu bahasa.<\/p>\n

Sebelum masuk ke JavaScript, mari kita tengok ke bahasa bapaknya JavaScript, yakni Java. Agar kita bisa belajar bagaimana Java menerapkan module system<\/em>.<\/p>\n

Di Java, untuk menggunakan kode dari file lain baik standar dari Java maupun dari pihak lain bisa semudah dengan menambahkan import<\/code> terhadap package<\/em> yang dibutuhkan, contoh kodenya:<\/p>\n

import<\/span> java.util.ArrayList;<\/span><\/span>\n<\/span>\nclass<\/span> <\/span>ArrayListUtilization<\/span> {<\/span><\/span>\n  <\/span>public<\/span> <\/span>static<\/span> <\/span>void<\/span> <\/span>main<\/span>(<\/span>String<\/span>[] <\/span>args<\/span>) {<\/span><\/span>\n    <\/span>ArrayList<\/span> myList <\/integer><\/span>=<\/span> <\/span>new<\/span> <\/span>ArrayList<\/span><>(<\/span>3<\/span>);<\/span><\/span>\n    myList.<\/span>add<\/span>(<\/span>3<\/span>);<\/span><\/span>\n    myList.<\/span>add<\/span>(<\/span>2<\/span>);<\/span><\/span>\n    myList.<\/span>add<\/span>(<\/span>1<\/span>);<\/span><\/span>\n    System.out.<\/span>println<\/span>(myList);<\/span><\/span>\n  }<\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre>\n
Kalian bisa melihat potongan kode import java.util.ArrayList;<\/code> pada baris paling atas, kode tersebut menandakan kalau di bawahnya kita akan menggunakan kode yang berasal dari package<\/em> bersangkutan, dalam kasus ini ya ArrayList<\/code>.
\nTidak perlu bingung atau khawatir bagaimana cara menghafal nama-nama package<\/em> tersebut, di Java sebagian besar waktu koding bisa dipangkas karena dukungan IDE (Integrated Development Environment<\/em>) yang memang sudah sangat baik.<\/p>\n
Cara import<\/em> seperti di atas sudah menjadi standar di Java, tidak perlu lagi ada cara lain yang membuat hal sederhana malahan menjadi membingungkan.<\/p>\n
Berbicara soal bagaimana cara isolasi kode, dengan dukungan Class System<\/strong>-nya, di Java bukanlah barang susah.
\nIni ibarat kata, anak yang baru belajar Java pun seharusnya tahu bagaimana cara membuatnya.
\nMari kita lihat contoh kode berikut:<\/p>\n
public<\/span> <\/span>class<\/span> <\/span>Person<\/span> {<\/span><\/span>\n  <\/span>private<\/span> <\/span>String<\/span> firstName;<\/span><\/span>\n  <\/span>private<\/span> <\/span>String<\/span> lastName;<\/span><\/span>\n<\/span>\n  <\/span>public<\/span> <\/span>String<\/span> <\/span>getFirstName<\/span>() {<\/span><\/span>\n    <\/span>return<\/span> firstName;<\/span><\/span>\n  }<\/span><\/span>\n<\/span>\n  <\/span>public<\/span> <\/span>String<\/span> <\/span>getLastName<\/span>() {<\/span><\/span>\n    <\/span>return<\/span> lastName;<\/span><\/span>\n  }<\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre>\n
Kode di atas adalah contoh POJO<\/strong> (Plain Old Java Object<\/em>) yakni objek entitas biasa tanpa ada tambahan logika bisnis di dalamnya.
\nDari kode tersebut di atas, kita sudah jelas tidak bisa mengakses properti firstName<\/code> karena memang dibuat sebagai private<\/em> sehingga hanya bisa diakses lewat internal Class itu sendiri.
\nUntuk mengambil nilai dari firstName<\/code> maka dibuatlah getters<\/code> untuk properti ini yakni getFirstName<\/code> yang mana dibuat agar bisa diakses dari luar.<\/p>\n
Setelah berkaca pada Java, mari kita bawa arah tulisan ini agar spesifik pada bahasa yang menjadi idola para remaja yakni JavaScript.<\/p>\n
Sebelum ada module system<\/h2>\n
JavaScript sudah ada sejak lama, namun karena memang sejak lama kode JavaScript biasanya tidak begitu besar, jadi dukungan Module System<\/em> tidak ada sedari dulu sampai belakangan ini.
\nKalau tidak ada Module System<\/em> apakah JavaScript tidak bisa melakukan dua hal yang kita bahas di atas sebelumnya?
\nJawabnya, tentu saja bisa. Tapi ya butuh perjuangan yang lebih susah pastinya.<\/p>\n
Jaman dulu, ketika JavaScript hanya bisa jalan di browser, satu-satunya cara untuk menyematkan suatu file ke dalam file lain adalah memanfaatkan kemampuan browser itu sendiri dalam memuat sebuah file JavaScript.<\/p>\n
Mari kita lihat kode berikut:<\/p>\n
DOCTYPE<\/span> <\/span>html<\/span>><\/span><\/span>\n<<\/span>html<\/span> <\/span>lang<\/span>=<\/span>\"<\/span>en<\/span>\"<\/span>><\/span><\/span>\n  <<\/span>head<\/span>><\/span><\/span>\n    <<\/span>meta<\/span> <\/span>charset<\/span>=<\/span>\"<\/span>utf-8<\/span>\"<\/span> \/><\/span><\/span>\n    <<\/span>title<\/span>>JavaScripttitle<\/span>><\/span><\/span>\n  head<\/span>><\/span><\/span>\n  <<\/span>body<\/span>><\/span><\/span>\n    <<\/span>script<\/span> <\/span>src<\/span>=<\/span>\"<\/span>https:\/\/mazipan.space\/file-1.js<\/span>\"<\/span>>script<\/span>><\/span><\/span>\n    <<\/span>script<\/span> <\/span>src<\/span>=<\/span>\"<\/span>.\/file-2.js<\/span>\"<\/span>>script<\/span>><\/span><\/span>\n  body<\/span>><\/span><\/span>\nhtml<\/span>><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n
Kode diatas adalah cara kita dulu memanfaatkan browser untuk saling menyematkan satu file dengan file lainnya.
\nKita buat contoh misalnya di file-1.js<\/code>, kita membuat fungsi sederhana seperti berikut:<\/p>\n
var<\/span> person <\/span>=<\/span> {<\/span><\/span>\n  firstName<\/span>:<\/span> <\/span>'<\/span>Irfan<\/span>'<\/span>,<\/span><\/span>\n  lastName<\/span>:<\/span> <\/span>'<\/span>Maulana<\/span>'<\/span>,<\/span><\/span>\n};<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>getFirstName<\/span>() {<\/span><\/span>\n  <\/span>return<\/span> person.firstName;<\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre>\n
Kita bisa menggunakan fungsi tersebut di file-2.js<\/code> dengan cara:<\/p>\n
console.<\/span>log<\/span>(<\/span>getFirstName<\/span>());<\/span><\/span>\n<\/span><\/code><\/pre>\n
Hal di atas bisa mungkin terjadi, namun sangat rapuh.
\nIni dikarenakan cara ini bergantung pada beberapa hal, diantaranya:<\/p>\n
    \n
  1. Saat kita menyematkan kode