ES6 - Modul

pengantar

Pertimbangkan skenario di mana bagian dari kode JavaScript perlu digunakan kembali. ES6 datang untuk menyelamatkan Anda dengan konsep Modules.

Modul mengatur sekumpulan kode JavaScript terkait. Sebuah modul dapat berisi variabel dan fungsi. Sebuah modul tidak lebih dari sepotong kode JavaScript yang ditulis dalam sebuah file. Secara default, variabel dan fungsi modul tidak tersedia untuk digunakan. Variabel dan fungsi di dalam modul harus diekspor agar dapat diakses dari dalam file lain. Modul di ES6 hanya berfungsi district mode. Artinya variabel atau fungsi yang dideklarasikan dalam modul tidak akan dapat diakses secara global.

Mengekspor Modul

Kata kunci ekspor dapat digunakan untuk mengekspor komponen dalam modul. Ekspor dalam modul dapat diklasifikasikan sebagai berikut -

Ekspor Bernama
Ekspor Default

Ekspor Bernama

Ekspor yang diberi nama dibedakan menurut namanya. Ada beberapa ekspor bernama dalam sebuah modul. Sebuah modul dapat mengekspor komponen yang dipilih menggunakan sintaks yang diberikan di bawah ini -

Syntax 1

//using multiple export keyword
export component1
export component2
...
...
export componentN

Syntax 2

Alternatifnya, komponen dalam modul juga bisa diekspor menggunakan kata kunci ekspor tunggal dengan sintaksis {} pengikat seperti yang ditunjukkan di bawah ini -

//using single export keyword

export {component1,component2,....,componentN}

Ekspor Default

Modul yang hanya perlu mengekspor satu nilai dapat menggunakan ekspor default. Hanya ada satu ekspor default per modul.

Syntax

export default component_name

Namun, sebuah modul dapat memiliki ekspor default dan beberapa ekspor bernama pada saat yang bersamaan.

Mengimpor Modul

Untuk dapat menggunakan modul, gunakan import keyword. Sebuah modul dapat memiliki banyak fileimport statements.

Mengimpor Ekspor Bernama

Saat mengimpor ekspor bernama, nama-nama komponen terkait harus cocok.

Syntax

import {component1,component2..componentN} from module_name

Namun, saat mengimpor ekspor bernama, mereka dapat diganti namanya menggunakan sebagai kata kunci. Gunakan sintaks yang diberikan di bawah ini -

import {original_component_name as new_component_name }

Semua ekspor bernama dapat diimpor ke objek dengan menggunakan tanda bintang * operator.

import * as variable_name from module_name

Mengimpor Ekspor Default

Tidak seperti ekspor bernama, ekspor default dapat diimpor dengan nama apa pun.

Syntax

import any_variable_name from module_name

Contoh: Ekspor Bernama

Step 1 - Buat file company1.js dan tambahkan kode berikut -

let company = "TutorialsPoint"

let getCompany = function(){
   return company.toUpperCase()
}

let setCompany = function(newValue){
   company = newValue
}

export {company,getCompany,setCompany}

Step 2- Buat file company2.js. File ini menggunakan komponen yang ditentukan dalam file company1.js. Gunakan salah satu pendekatan berikut untuk mengimpor modul.

Approach 1

import {company,getCompany} from './company1.js'

console.log(company)
console.log(getCompany())

Approach 2

import {company as x, getCompany as y} from './company1.js'

console.log(x)
console.log(y())

Approach 3

import * as myCompany from './company1.js'

console.log(myCompany.getCompany())
console.log(myCompany.company)

Step 3 - Jalankan modul menggunakan file HTML

Untuk menjalankan kedua modul kita perlu membuat file html seperti yang ditunjukkan di bawah ini dan menjalankannya di server langsung. Perhatikan bahwa kita harus menggunakanattribute type="module" di tag script.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

Output dari kode di atas akan seperti yang dinyatakan di bawah ini -

TutorialsPoint
TUTORIALSPOINT

Ekspor Default

Step 1 - Buat file company1.js dan tambahkan kode berikut -

let name = 'TutorialsPoint'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name = newName
   }
}

export default company

Step 2 - Buat file company2.js. File ini menggunakan komponen yang ditentukan dalam file company1.js.

import c from './company1.js'
console.log(c.getName())
c.setName('Google Inc')
console.log(c.getName())

Step 3 - Jalankan modules menggunakan HTML file

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

Output dari kode di atas akan seperti yang disebutkan di bawah ini -

TutorialsPoint
Google Inc

Contoh: Menggabungkan Ekspor Default dan Bernama

Step 1 - Buat file company1.js dan tambahkan kode berikut -

//named export
export let name = 'TutorialsPoint'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name =newName
   }
}
//default export
export default company

Step 2 - Buat file company2.js. File ini menggunakan komponen yang ditentukan dalamcompany1.jsmengajukan. Impor ekspor default terlebih dahulu, diikuti dengan ekspor bernama.

import c, {name} from './company1.js'

console.log(name)
console.log(c.getName())
c.setName("Mohtashim")
console.log(c.getName())

Step 3 - Jalankan modul menggunakan file HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
   </head>
   <body>
      <script src="company2.js" type="module"></script>
   </body>
</html>

Output dari kode di atas akan seperti gambar di bawah ini -

TutorialsPoint
TutorialsPoint
Mohtashim