การใช้งาน Module (import/export) ใน JavaScript

---

1. Module คืออะไร

Module คือการแยกโค้ดออกเป็นหลายไฟล์ แล้วสามารถนำเข้ามาใช้งานข้ามไฟล์ได้

• ช่วยจัดระเบียบโค้ด

• เขียนซ้ำง่าย

• แก้ไขง่าย

• ลดความซับซ้อนของโปรเจกต์ใหญ่

ตั้งแต่ ES6 (ปี 2015)
JavaScript สนับสนุน ES Modules (import/export) อย่างเป็นทางการ

---

2. รูปแบบการ Export

2.1 Named Export (ส่งออกหลายตัว)

ไฟล์ math.js

javascript

export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

หมายเหตุ

• สามารถ export ได้หลายตัว

• ใช้ export หน้าตัวแปร หรือฟังก์ชันแต่ละตัว

2.2 Default Export (ส่งออกได้ตัวเดียว)

ไฟล์ greeting.js

javascript

export default function greet(name) {
  console.log(`สวัสดี ${name}`);
}

• 1 ไฟล์ มี export default ได้เพียงตัวเดียว

• ไม่ต้องใส่ชื่อเวลา import (ตั้งชื่อเองได้ตอน import)

---

3. รูปแบบการ Import

3.1 Import Named Export

ไฟล์ main.js

javascript

import { PI, add, subtract } from './math.js';

console.log(PI);
console.log(add(5, 3));

3.2 Import Default Export

javascript

import greet from './greeting.js';

greet("มิว");

3.3 Import พร้อมตั้งชื่อใหม่ (alias)

javascript

import { add as plus } from './math.js';

console.log(plus(10, 5));

3.4 Import ทั้งหมด

javascript

import * as math from './math.js';

console.log(math.PI);
console.log(math.add(2, 3));

---

4. การผสม Export แบบ Named + Default ในไฟล์เดียว

ไฟล์ utils.js

javascript

export const version = "1.0";

export function sum(a, b) {
  return a + b;
}

export default function sayHi(name) {
  console.log(`สวัสดี ${name}`);
}

import แบบผสม

javascript

import sayHi, { version, sum } from './utils.js';

sayHi("มิว");
console.log(version);
console.log(sum(1, 2));

---

5. คำสำคัญเกี่ยวกับ Path

• ./ หมายถึง ไฟล์เดียวกันในโฟลเดอร์ปัจจุบัน

• ../ หมายถึง โฟลเดอร์ก่อนหน้า

เช่น

javascript

import { PI } from './math.js';
import greet from '../utils/greeting.js';

---

6. ข้อควรระวัง

• ไฟล์ module ต้องระบุ .js ใน path

• ใน Node.js เวอร์ชันใหม่, หรือใน Browser (modern) รองรับ ES Module ได้เลย

• ถ้าเขียนใน browser บางครั้งต้องเพิ่ม type="module" ใน <script>

ตัวอย่าง:

html

<script type="module" src="main.js"></script>

---

7. ตัวอย่างโครงสร้างโปรเจกต์จริงแบบใช้ Modules

css

project/
│
├── main.js
├── math.js
├── greeting.js
└── utils.js

math.js

javascript

export const PI = 3.14;
export function add(a, b) { return a + b; }

greeting.js

javascript

export default function greet(name) {
  console.log(`สวัสดี ${name}`);
}

utils.js

javascript

export function sayBye(name) {
  console.log(`ลาก่อน ${name}`);
}

main.js

javascript

import { PI, add } from './math.js';
import greet from './greeting.js';
import { sayBye } from './utils.js';

greet("มิว");
console.log("PI =", PI);
console.log("1 + 2 =", add(1, 2));
sayBye("มิว");

---

8. เมื่อใช้กับ Node.js

• ตั้งแต่ Node 14+ รองรับ ES Modules

• ต้องตั้งค่า "type": "module" ในไฟล์ package.json ก่อน

json

{
  "type": "module"
}

หรือเปลี่ยนชื่อไฟล์เป็น .mjs

---

สรุปสั้นที่สุด

• ใช้ export / export default เพื่อส่งออก

• ใช้ import เพื่อเรียกใช้ข้ามไฟล์

• Module ทำให้โปรเจกต์ใหญ่ๆ เขียนง่ายขึ้นมาก