Belajar Module Javascript Pada ES2015

Semakin besar sebuah aplikasi, maka akan semakin kompleks juga kode-kode pada aplikasi yang dibuat tersebut. Untuk memudahkan melakukan maintainance atau perawatan maka biasanya kode-kode tersebut akan displit atau dipisah ke dalam beberapa file atau berupa module-module.

Pada ES2015 kita bisa membuat module javascript. Ada dua statements yang biasa digunakan dalam membuat atau memakai module javascript pada es2015 yaitu export statement dan import statement.

Export

Export digunakan untuk mengexport function, objek atau nilai primitif pada sebuah module sehingga bisa digunakan pada program lain dengan menggunakan statement import.

Import

Import bisa dikatakan adalah pasangan dari statement export. Jadi import digunakan tentunya untuk mengimport function,objek,variabel yang sudah di export pada module lain.

Contoh Penggunaan Export dan Import

1. Menggunakan nama untuk export :

buat sebuah file dengan nama module.js

//module.js
function say() {
  return “hello world”;
}
const name = “Budi”;
const age = 20;
//mengekspor function say dan variabel name sekaligus
export { say, name, age };

Untuk menggunakan module.js pada file atau program lain kita bisa menggunakan perintah import. buat sebuah file dalam folder yang sama dengan nama main.js.

// main.js
/**
* Import single export. (function say dari module lain)
**/
import {say} from ’./module.js’;
console.log(say()); //hello world
/**
* mengimport sekaligus dua objek export yaitu function say dan variabel const name
**/
import {name, age} from ‘./module.js’;
console.log(name); //Budi
console.log(age); //20

2. Menggunakan Default untuk export

Jika kita ingin mengekspor single value atau hanya satu nilai kita bisa menggunakan default export seperti contoh berikut :

// module.js
const  text = “Belajar ES2015”;
export default  text;

Pada file main.js, untuk mengimportnya kodenya seperti ini:

import text from ‘./module.js’;
console.log(text); // Belajar ES2015

Oya untuk contoh kode di atas jika kita jalankan pada browser akan menghasilkan error. Untuk menjalankannya kita perlu mengcompilenya terlebih dahulu menggunakan plugin BabelJS dan Webpack.

Dan Insya Allah pada artikel selanjutnya Saya akan membahas sedikit tentang penggunaan babel + webpack untuk mengcompile kode javascript yang ditulis dengan standard es2015. Terima kasih. happy coding :)

Referensi :

export

import