30 Hari Belajar JavaScript : Hari Ke 20 (JavaScript Module Part : 1)
--
Halo semuanya! Selamat datang kembali di series 30 hari belajar JavaScript. Pada hari ke 20 ini, saya akan share tentang JavaScript modules beserta praktiknya dan nanti akan saya bagi menjadi beberapa part agar lebih mantap :v . Oke langsung saja.
Jadi apa itu JavaScript Module?
JavaScript module merupakan suatu teknik keren yang dapat kita gunakan untuk membuat code JavaScript menjadi lebih powerfull, maintenable, scalable dan meningkatkan produktivitas 💹. Maksudnya apa bang? Oke biar lebih mudah saya akan mencoba menjelaskan dengan ilustrasi saja ya hehe.
Pada ilustrasi tersebut, katakanlah kita mempunyai satu buah file index.js yang berisi kumpulan fungsi (library) untuk melakukan operasi perhitungan matematika. Ada penjumlahan, pengurangan, pembagian, perkalian dan lain-lain. Tapi seiring perkembangan waktu dan permintaan konsumen, maka ditambahkanlah fitur-fitur lain. Tapi kok! Code yang kita buat malah jadi banyak bug! kemudian kita pusing dan kesulitan membaca code, karena kodenya sudah banyak dan akhirnya produktivitas kita menurun! Ya hal ini memang wajar dan dulu sewaktu saya masih bau kencur untuk management file juga begitu hehe, santai saja! namanya ketika kita belajar dan salah itu tidak apa-apa. Take it Easy!
Sekarang bandingkan jika kita menerapkan JavaScript module.
Dengan hadirnya JavaScript module ini membawa era keemasan bagi JavaScript, karena mengapa? berkat konsep ini tercipta banyak sekali library dengan sifat reusable component seperti ReactJS.
JavaScript Modules diawali pada teknologi bernama NodeJS, selanjutnya banyak library yang mengadopsi penggunaan JavaScript Modules di NodeJS agar bisa berjalan di Web Browser, seperti library CommonJS, AMD, RequireJS, dan lain-lain. Namun untungnya, saat ini Browser modern sudah banyak mendukung JavaScript Modules, kecuali jika masih menggunakan Internet Explorer.
Dengan menggunakan JavaScript module, kita dapat dengan mudah untuk melakukan maintenance, scalable dan tentu saja meningkatkan produktivitas kita. Karena code yang sebelumnya ditulis dalam satu file besar, kini dipecah-pecah menjadi module yang ter isolate sesuai dengan tujuannya dan ini akan menjadi hal yang menyenangkan bukan?
Import dan Export pada JavaScript Module
Ketika kita mulai mempelajari dan menerapkan JavaScript module, ada dua kata kunci ajaib yang akan sering kita gunakan, yaitu Export dan Module. Export merupakan kata kunci yang digunakan untuk memberitahu module lain, bagian mana yang ingin kita ekspose keluar, sehingga bisa di-import oleh module lain. Sedangkan untuk Import merupakan kata kunci yang digunakan untuk mengambil sesuatu dari module lain. Jadi jangan lupakan import dan export ya hehe!.
Membuat Project
Tibalah saatnya kita untuk praktik menerapkan JS module, tapi sebelum itu mari kita lakukan konfigurasi dan setup untuk development environtmentnya.
Silahkan buat satu buah folder bernama aplikasiMath. Kemudian di dalam folder tersebut buat satu buah file index.html dan satu buah file index.js
Setelah itu, silahkan tuliskan code berikut pada file.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AplikasiMath</title>
<meta name="description" content="bahrul-rozak">
</head>
<body>
<script src="index.js"></script>
</body>
</html>Dan pada file index.js
function penjumlahan(a, b) {
return a + b;
}
function pengurangan(a, b) {
return a - b;
}
function pembagian(a, b) {
return a / b;
}
function perkalian(a, b) {
return a * b;
}
console.log(penjumlahan(5, 5));
console.log(pengurangan(5, 5));
console.log(pembagian(5, 5));
console.log(perkalian(5, 5));Sekarang, mari kita lihat hasilnya pada browser.
Nah sekarang, mari kita ubah file index.js tersebut ke dalam bentuk module-module sesuai dengan tujuannya. Misalkan module penjumlahan.js berarti berisi fungsi untuk melakukan operasi penjumlahan, gitu deh.
Jika bingung berikut isi dari file-file tersebut.
Kemudian pada file index.html kita ubah codenya menjadi seperti berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AplikasiMath</title>
<meta name="description" content="bahrul-rozak">
</head>
<body>
<script src="penjumlahan.js" type="module"></script>
<script src="pengurangan.js" type="module"></script>
<script src="pembagian.js" type="module"></script>
<script src="perkalian.js" type="module"></script>
</body>
</html>Pada src kita menambahkan type="module" artinya kita memberitahukan bahwa sedang menggunakan JS Module. Sekarang mari kita lihat hasilnya pada browser.
Sampai sini, artinya teman-teman sudah bisa dan paham bagaimana cara menggunakan JS Module, tapi tenang saja masih ada part selanjutnya yang akan saya bagikan tentang JS Module. Semoga bermanfaat dan terima kasih.
Halo! Saya Bahrul Rozak, seorang mahasiswa dari Universitas Muhammadiyah Prof. DR. HAMKA. Saya memiliki pengalaman sebagai web developer di sebuah institusi dan telah membuat serta mengembangkan aplikasi internal menggunakan bahasa pemrograman JavasScript dan PHP, serta menggunakan framework PHP seperti Laravel, codeigniter, dan Vue Js. Saya juga pernah memimpin sebuah tim proyek yang terdiri dari divisi Front End dan Back End, di sana saya belajar banyak hal, terutama tentang kolaborasi dalam tim. Selain itu, saya memiliki hobi terkait desain web dan menulis artikel tentang teknologi. Saya sangat suka tantangan yang memacu adrenalin karena saya percaya bahwa more complex more adrenaline. Jika Anda ingin tahu lebih banyak tentang saya atau ingin berkolaborasi, silakan hubungi saya melalui email di bahrulrozak02@gmail.com atau follow media sosial saya untuk mendapatkan insight terbaru dalam perduniawian di.
Instagram : https://instagram.com/rozak.dexamethasone
Linkedin : https://linkedin.com/in/bahrul-rozak
Stackoverflow : https://stackoverflow.com/users/20835639/bahrul-rozak
Github : https://github.com/Bahrul-Rozak
