JAVASCRIPT MODULES


00. Sebelum Belajar

Sebelum belajar pastikan sudah memahami:
  • HTTP
  • JavaScript Dasar
  • JavaScript Object Oriented Programming
  • JavaScript Standard Library

01. Pengenalan Javascript Modules

Latar Belakang
  • Dahulu kode program JavaScript biasanya dimulai dari kode yang kecil dan sedikit disetiap halaman, jadi jarang sekali kita akan menggunakan kode JavaScript dengan ukuran besar dalam satu halaman web
  • Namun saat ini, kebutuhan web sudah berbeda, semenjak makin populernya framework-framework JavaScript untuk membuat FrontEnd, kebutuhkan pembuatan kode JavaScript semakin kompleks dan besar
  • Oleh karena itu, sudah seharusnya saat ini, saat membuat kode JavaScript, kita perlu melakukan mekanisme memotong-motong kode JavaScript, sehingga tidak terlalu kompleks dan banyak dalam satu file JavaScript

Javascript Modules
  • JavaScript Modules merupakan fitur dimana kita bisa membuat module (kode JavaScript yang bisa digunakan ulang) untuk kode JavaScript lain
  • 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

Import & Export
  • Secara garis besar, ada dua kata kunci yang digunakan dalam JavaScript Modules, yaitu import dan export
  • import merupakan kata kunci yang digunakan untuk mengambil sesuatu dari module lain
  • Sedangkan export merupakan kata kunci yang digunakan untuk memberitahu module lain, bagian mana yang ingin kita ekspose keluar, sehingga bisa di-import oleh module lain

02. Tanpa module
  • Sebelum kita membahas JavaScript Module, sekarang kita akan coba dulu tanpa menggunakan module
  • Saat kita membuat file JavaScript, lalu kita load file JavaScript tersebut di web, secara default semua kode JavaScript di file tersebut bisa diakses, baik itu variable, function atau class


03. Dengan module
  • Namun jika kita menggunakan module, kita bisa secara selektif memilih bagian kode mana yang ingin kita ekspos keluar
  • Secara default kode yang kita buat menggunakan JavaScript Module tidak bisa digunakan dari luar file, kecuali kita memintanya untuk mengekspos keluar

Membuat Module
  • Membuat module sangat sederhana, kita cukup membuat file JavaScript saja
  • Yang membedakan adalah, saat kita akan meload file JavaScript dari HTML, kita tidak menggunakan type javascript lagi, melainkan menggunakan type module

File .js dan .mjs
  • Karena File JavaScript Module sebenarnya sama dengan JavaScript, kadang developer membedakan nama file untuk JavaScript Module menggunakan .mjs
  • Hal ini sebenarnya tidak ada kewajiban, hanya saja agar mempermudah ketika tahapan development, kita bisa dengan mudah membedakan mana file JavaScript biasa, mana file JavaScript module hanya dengan extension file nya saja
  • Pada kelas ini, kita akan tetap menggunakan file .js ketika membuat module, agar tidak membingungkan untuk pemula

Export
  • export merupakan kata kunci yang digunakan untuk mengekspos kode dari sebuah module
  • export bisa ditambahkan diawal sebuah variable, function atau class

Import
  • Export digunakan untuk mengekspos kode di module, jika kita ingin menggunakan kode yang sudah di ekspos di module, kita bisa menggunakan kata kunci import
  • Cara menggunakan kata kunci import adalah sebagai berikut :
  • import {namaFunction, namaVariable, NamaClass} from “lokasi-module.js”
  • Module hanya bisa digunakan di module lain, jadi pastikan ketika  membuat script, kita harus menggunakan type module
  • Saat menggunakan import, kita tidak perlu lagi menambahkan script module src satu per satu, karena sudah di handle oleh Browser secara otomatis ketika menggunakan module


04. Variable di Module
  • Salah satu hal yang membingungkan pada variable di JavaScript adalah ketika kita membuat variable di global scope, maka variable tersebut bisa diubah nilainya oleh file JavaScript lain
  • Saat kita menggunakan module, ketika kita buat variable, maka variable tersebut hanya berada pada module tersebut, tidak bisa digunakan di module lain

Export Variabel di Module
  • Jika kita ingin mengekspos variable ke luar module, kita juga bisa menggunakan kata kunci export di awal deklarasi variable nya


05. Class di Module
  • Selain function dan juga variable, di module juga kita bisa menambahkan class
  • Secara default, class tersebut hanya bisa diakses dari dalam module nya saja, tidak bisa diluar module
  • Jika kita ingin mengekspos class yang kita buat, kita juga bisa menggunakan kata kunci export di awal deklarasi class nya


06. Export multiple
  • Sebelumnya kita selalu menggunakan kata kunci export diawal variable, function atau class
  • Sebenarnya kita bisa menggunakan export sekaligus beberapa data sekaligus, caranya cukup gunakan perintah :
  • export { variable, function, class, danLainLain }


07. Alias di Export
  • Saat kita membuat aplikasi JavaScript, semakin lama kemungkinan module akan semakin banyak
  • Dan bisa saja akan ada nama variable atau nama function atau nama class yang sama antar module
  • Hal ini akan menyulitkan ketika ada module yang menggunakan beberapa module, namun ternyata variable, function atau class nya memiliki nama yang sama
  • Untungnya, module memiliki fitur alias, dimana kita bisa mengubah nama variable, function atau class nya

Alias di Export
  • Kita dapat menggunakan alias ketika melakukan export di module
  • Caranya menggunakan kata kunci as, lalu diikuti dengan nama alias :
  • export { variable as variableLain, function as functionLain, Class as ClassLain }

Note:
  • Alias di Export tidak direkomendasikan



08. Alias di Import
  • Atau rekomendasinya sebenarnya melakukan alias ketika melakukan import
  • Sehingga ketika export, nama tidak perlu berubah
  • Untuk melakukan alias ketika import, kita bisa gunakan kata kunci as, diikuti dengan nama alias :
  • import { function as functionLain } from “./module.js”


09. Export Default
  • Sampai saat ini, kita selalu melakukan export dengan nama, baik itu nama variable, function dan yang lainnya
  • Ada juga fitur yang bernama export default, ini adalah fitur yang digunakan untuk mempermudah untuk membuat default data di module, dan membantu JavaScript agar kompatibel dengan CommonJS dan AMD module system

Cara Export Default
  • export default namaFunction;
  • export default function(){ ... }
  • export default namaVariable;
  • export default namaVariable = value;
  • export default NamaClass;
  • export default class { ... }

Cara Import Default
  • import aliasFunction from “./module-default.js”
  • import {default as aliasVariable} from “./module-default.js”
  • import aliasVariable from “./module-default.js”
  • import {default as aliasVariable} from “./module-default.js”
  • import AliasClass from “./module-default.js”
  • import {default as AliasClass} from “./module-default.js”

10. Default function

11. Default variable

12. Default class

13. Default and Named Export
  • Dalam satu module, kita bisa menggabungkan export default dan export named
  • Yang tidak boleh adalah, dalam satu module, membuat lebih dari satu default
  • Cara import default dan named secara bersamaan bisa menggunakan perintah :
import defaultAlias, {named1, named2} from “./module.js”;
import {default as defaultAlias, named1, named2} from “./module.js”;

Rekomendasi:
  • Bedakan antara default dan named, karena jika digabungkan kadang akan membingungkan ketika melakukan import
  • Sebisa mungkin selalu gunakan export named dibandingkan export default 


14. Module object
  • Ketika sebuah module berisikan banyak sekali export data, maka melakukan import satu persatu akan terlihat berantakan
  • Rekomendasinya ketika kita ingin mengimport module yang sangat banyak export data nya, gunakan Module Object
  • Module Object sederhananya adalah object JavaScript yang berisi attribute hasil yang di export pada module
  • Cara membuat module object bisa kita lakukan misal seperti ini : import * as NamaModule from “./module.js”
  • Selanjutnya kita bisa gunakan NamaModule sebagai object untuk module tersebut


15. Aggregate (menyatukan beberapa module dalam satu module)
  • Ada waktunya kadang kita ingin meng agregate beberapa module menjadi satu agar penggunaannya lebih sederhana
  • Jika module sudah banyak, maka ketika butuh banyak kode dari banyak module, kita harus sebutkan nama module tersebut tiap kalo import
  • Dengan melakukan aggregate, kita bisa membuat module aggregate, yang isinya menggabungkan export dari module lain
  • Caranya sangat mudah, cukup gunakan perintah : export {a, b, c} from “./module.js”


16. Dynamic module loading
  • Saat kita menggunakan module dengan cara import, maka semua module akan di load
  • Pada kenyataannya, kadang kita tidak ingin meload semua module diawal, kita ingin meload module ketika dibutuhkan saja, ini akan menghemat bandwith jaringan juga, karena kita tidak perlu download semua module diawal
  • JavaScript mendukung dynamic module loading, caranya kita bisa menggunakan function import(), dimana hasilnya berupa Promise<ModuleObject> (Promise adalah materi yang kompleks, ini akan dibahas di kelas JavaScript Async)

Source: Youtube Programmer Zaman Now