Import / Export

Module คืออะไร — ทำไมต้องแยกโค้ดเป็นไฟล์

เวลาเราเขียนโค้ด JavaScript ไปเรื่อย ๆ ไฟล์เดียวจะเริ่มยาวขึ้นจนอ่านยากและแก้ไขลำบาก ลองคิดภาพว่าเราเขียนฟังก์ชัน 10 ฟังก์ชัน กับตัวแปรอีก 20 ตัว ทั้งหมดอยู่ในไฟล์เดียว — เวลาจะหาว่าฟังก์ชัน `calculateTotal` อยู่ตรงไหน ต้อง scroll ขึ้นลงจนเสียเวลา JavaScript มีระบบ **ES Module** (ECMAScript Modules) ที่ช่วยแก้ปัญหานี้ หลักการคือ: แยกโค้ดออกเป็นไฟล์ย่อย ๆ ตามหน้าที่ แล้วใช้ `import` ดึงเฉพาะส่วนที่ต้องการมาใช้ในอีกไฟล์หนึ่ง บทนี้เราจะเรียน `import` แบบพื้นฐานที่สุด: การดึง **named export** จากอีกไฟล์หนึ่งเข้ามาใช้ — syntax คือ `import { ชื่อ } from './ไฟล์.js'` (ส่วนการ `export` เราจะเรียนในบท export-module)

// ❌ ก่อน — ทุกอย่างอยู่ในไฟล์เดียว อ่านยาก
// ไฟล์: app.js — ยาว 200 บรรทัด

function greet(name) {
  return "สวัสดี " + name;
}

function calculateTax(price) {
  return price * 0.07;
}

function formatCurrency(amount) {
  return "฿" + amount.toFixed(2);
}

// ... อีก 20 ฟังก์ชันต่อจากนี้
// เวลาจะหาอะไรสักอย่างคือ scroll จนตาลาย

// ไฟล์: math.js — เตรียมฟังก์ชันคำนวณไว้
// (export จะเรียนในบท export-module)
export function calculateTax(price) {
  return price * 0.07;
}

// ไฟล์: format.js — เตรียมฟังก์ชันจัดรูปแบบไว้
export function formatCurrency(amount) {
  return "฿" + amount.toFixed(2);
}

// ไฟล์: app.js — import เฉพาะที่ต้องใช้
import { calculateTax } from './math.js';
import { formatCurrency } from './format.js';

let total = calculateTax(1000);
console.log(formatCurrency(total));
// output: "฿70.00"

• **Module** คือไฟล์ JavaScript ที่แยกโค้ดออกจากกัน — แต่ละไฟล์ดูแลหน้าที่ของตัวเอง
• `import` ใช้ดึงค่า ฟังก์ชัน object array หรืออะไรก็ได้จาก module อื่นเข้ามาใช้
• `export` คือการประกาศว่าอะไรใน module นั้นให้ไฟล์อื่น import ได้ (เรียนในบท export-module)
• ไม่ต้อง import ทุกอย่าง — import เฉพาะตัวที่จำเป็นต้องใช้จริง ๆ ก็พอ

syntax พื้นฐาน — import { } from './path.js'

รูปแบบพื้นฐานของ `import` สำหรับ named export คือ: `import { ชื่อที่ต้องการ } from './path/to/file.js';` มาแยกส่วนประกอบทีละตัว:

//  ส่วนประกอบของ import statement:
//
//  ① keyword    ② curly braces     ③ from keyword    ④ path string
//     ↓              ↓                   ↓                ↓
//  import { calculateTax } from './math.js';
//             ↑                              ↑
//       ชื่อที่ import                 path ไปยัง module
//    (ต้องตรงกับชื่อที่ถูก export)     (relative path + .js)

// ตัวอย่าง: สมมุติ math.js มี export 3 ตัวคือ add, subtract, multiply
// เราเลือก import แค่ add กับ multiply:

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

console.log(add(5, 3));
// output: 8
console.log(multiply(4, 2));
// output: 8

• `import` — keyword บอก JavaScript ว่ากำลังดึงของจาก module อื่น
• `{ }` — ใส่ชื่อที่ต้องการ import — ต้อง**ตรงกันเป๊ะ**กับชื่อที่ module นั้น export ไว้ (case-sensitive)
• `from` — keyword บอกว่า module ต้นทางอยู่ที่ไหน
• `'./path/to/file.js'` — path ไปยัง module — ต้องเป็น **relative path** และต้องลงท้ายด้วย `.js`
• `.js` ต้องใส่เสมอ — ES module ในเบราว์เซอร์ไม่ infer นามสกุลไฟล์ให้

**Relative path** คือ path ที่อ้างอิงจากตำแหน่งของไฟล์ปัจจุบัน: - `'./math.js'` — module อยู่ใน folder เดียวกับไฟล์ปัจจุบัน - `'../utils/math.js'` — module อยู่ใน folder ด้านบน 1 ระดับ แล้วเข้า folder utils - `'./helpers/format.js'` — module อยู่ใน folder helpers ที่อยู่ใน folder เดียวกับไฟล์ปัจจุบัน ห้ามใช้ absolute path (`C:\...`) หรือ path แบบไม่มี `./` หรือ `../` ขึ้นต้น — JavaScript จะมองว่าเป็น package name ไม่ใช่ไฟล์

import หลายตัวในบรรทัดเดียว

เวลา module หนึ่งมี export หลายตัว คุณไม่ต้องเขียน `import` ทีละบรรทัด — รวมไว้ใน `{ }` เดียวกันได้เลย คั่นด้วย `,`

// สมมุติ math.js export มาดังนี้ (export เรียนบท export-module):
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}
export function multiply(a, b) {
  return a * b;
}
export const PI = 3.14159;

// ❌ เขียนแยกบรรทัด — ยืดเยื้อไม่จำเป็น
import { add } from './math.js';
import { subtract } from './math.js';
import { multiply } from './math.js';
import { PI } from './math.js';

// ✅ รวมในบรรทัดเดียว — อ่านง่ายกว่า
import { add, subtract, multiply, PI } from './math.js';

console.log(add(10, 5));
// output: 15
console.log(subtract(10, 5));
// output: 5
console.log(multiply(10, 5));
// output: 50
console.log(PI);
// output: 3.14159

• import ทุกสิ่งที่ต้องการจาก module เดียวกันใน `import` บรรทัดเดียว — คั่นด้วย `,`
• import เฉพาะชื่อที่ต้องใช้ — ไม่ต้อง import ทั้ง module
• ชื่อใน `{ }` ต้องตรงกับชื่อที่ module นั้น export — ตัวเล็กตัวใหญ่ต้องตรงกัน (case-sensitive)
• ลำดับของชื่อใน `{ }` ไม่สำคัญ — เขียน `add` ก่อน `PI` หรือ `PI` ก่อน `add` ก็ได้ผลเหมือนกัน

ใช้ import ในเบราว์เซอร์ — <script type='module'>

ES Module ใช้ได้ทั้งใน **Node.js** (ใหม่) และ **เบราว์เซอร์** — ในบทนี้เราโฟกัสที่เบราว์เซอร์เพราะเห็นผลลัพธ์ทาง console ได้ทันที สิ่งที่ต้องรู้ก่อน: - `<script>` ธรรมดา **ไม่สามารถใช้ `import` ได้** - ต้องใช้ `<script type="module">` แทน - เบราว์เซอร์จะโหลด module ผ่าน HTTP — เปิดไฟล์ HTML ตรง ๆ ด้วย `file://` ไม่ได้ - ต้องรันผ่าน **web server** เช่น Live Server extension ใน VS Code

<!-- ไฟล์: index.html -->
<!-- วิธีเปิด: ใช้ Live Server (VS Code) — ห้ามเปิดไฟล์ตรง ๆ -->
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>ทดสอบ import</title>
</head>
<body>
  <h1>ดูผลลัพธ์ที่ console</h1>
  <!-- ใช้ type="module" — ถ้าไม่มี import จะ error -->
  <script type="module" src="main.js"></script>
</body>
</html>

// ไฟล์: math.js — module ที่เตรียม export ไว้
// (export จะเรียนในบท export-module)
export function add(a, b) {
  return a + b;
}

export const VERSION = "1.0.0";

// ไฟล์: main.js — ไฟล์หลักที่ import math.js เข้ามาใช้
import { add, VERSION } from './math.js';

console.log("VERSION:", VERSION);
console.log("10 + 20 =", add(10, 20));
// console output:
// VERSION: 1.0.0
// 10 + 20 = 30

• `<script type='module'>` — บอกเบราว์เซอร์ว่ากำลังโหลด ES module อยู่
• `src='main.js'` เรียกเฉพาะไฟล์ entry point — เบราว์เซอร์จะตามไปโหลด `math.js` ให้อัตโนมัติ (เพราะ `main.js` import มัน)
• `<script type='module'>` จะถูก defer โดยอัตโนมัติ — ทำงานหลังจาก HTML ถูก parse หมดแล้ว
• ต้องรันผ่าน HTTP server — `file://` ถูก CORS block

**Live Server** ใน VS Code เป็นวิธีง่ายที่สุดในการรัน module — คลิกขวาที่ `index.html` แล้วเลือก "Open with Live Server" เบราว์เซอร์จะเปิดแท็บใหม่ที่ URL ขึ้นต้นด้วย `http://127.0.0.1:...` ซึ่งใช้ได้กับ `import` ทันที

ข้อควรระวังและความเข้าใจผิดที่พบบ่อย

มือใหม่ที่เริ่มใช้ `import` มักเจอ error แปลก ๆ ที่เกิดจาก setup ไม่ใช่จาก logic — มาดูเรื่องที่พบบ่อยและวิธีแก้:

// ❌ ลืม type="module" ใน <script>
// (ใน HTML: <script src="main.js"></script>)
import { add } from './math.js';
// ❌ SyntaxError: Cannot use import statement outside a module

// ❌ ลืม .js
import { add } from './math';
// ❌ TypeError: Failed to resolve module specifier "math"

// ❌ ลืม ./
import { add } from 'math.js';
// ❌ TypeError: Failed to resolve module specifier "math.js"

// ❌ import ชื่อที่ไม่มีอยู่จริงใน module
import { subtract } from './math.js';
// ❌ math.js ไม่ได้ export ชื่อ "subtract"
// SyntaxError: does not provide an export named 'subtract'

// ✅ ถูกต้อง
import { add } from './math.js';
console.log(add(1, 2));
// output: 3

สรุป — ES import พื้นฐาน

• **Module** คือไฟล์ JavaScript ที่จัดการโค้ดแยกออกจากกัน — แต่ละไฟล์ดูแลหน้าที่ตัวเอง
• **`import { ชื่อ } from './path.js'`** — syntax พื้นฐานสำหรับดึง named export จาก module อื่น
• **ชื่อใน `{ }`** ต้องตรงกับชื่อที่ module ต้นทาง export — case-sensitive
• **path** ต้องเป็น relative path และลงท้ายด้วย `.js` — `'./file.js'` หรือ `'../folder/file.js'`
• **`<script type='module'>`** — ต้องใช้ tag นี้แทน `<script>` ธรรมดา เมื่อใช้ `import` ใน HTML
• **ต้องใช้ HTTP server** — Live Server ใน VS Code เป็นวิธีง่ายที่สุด
• **import หลายตัวจาก module เดียว** — เขียนรวมใน `{ }` เดียวคั่นด้วย `,`

ลองทำ — สร้าง module และ import ใช้งานจริง

ถึงเวลาลองใช้ `import` ด้วยตัวเองแล้ว! เราจะสร้าง project เล็ก ๆ ประกอบด้วย **3 ไฟล์**: 1. **`math.js`** — module ที่ export ฟังก์ชันคำนวณ 2. **`main.js`** — ไฟล์หลักที่ import ฟังก์ชันจาก `math.js` มาใช้ 3. **`index.html`** — หน้าเว็บที่โหลด `main.js` ผ่าน `<script type="module">` เปิด editor ของคุณ สร้าง folder ใหม่ (ตั้งชื่ออะไรก็ได้ เช่น `my-first-import`) แล้วสร้างไฟล์ตามด้านล่าง

// math.js — module ที่ export ฟังก์ชันคำนวณ
// (export จะเรียนในบท export-module)

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

export function multiply(a, b) {
  return a * b;
}

export const PI = 3.14159;

// main.js — import ฟังก์ชันจาก math.js มาใช้

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

console.log("PI =", PI);
console.log("5 + 3 =", add(5, 3));
console.log("7 × 6 =", multiply(7, 6));
console.log("ครึ่งหนึ่งของ PI =", multiply(PI, 0.5));

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>My First Import</title>
</head>
<body>
  <h1>เปิด Console (F12) เพื่อดูผลลัพธ์</h1>
  <script type="module" src="main.js"></script>
</body>
</html>

ไฟล์ทั้ง 3 ต้องอยู่ใน **folder เดียวกัน** โครงสร้างจะเป็นแบบนี้: ``` my-first-import/ ├── math.js ├── main.js └── index.html ``` **วิธีรัน**: คลิกขวาที่ `index.html` ใน VS Code → เลือก **"Open with Live Server"** เบราว์เซอร์จะเปิดแท็บใหม่ จากนั้นกด **F12** เพื่อเปิด Console ⚠️ ห้ามเปิดไฟล์ HTML ตรง ๆ จาก file explorer — ต้องรันผ่าน **Live Server** เท่านั้น (URL ต้องเป็น `http://127.0.0.1:...`)

PI = 3.14159
5 + 3 = 8
7 × 6 = 42
ครึ่งหนึ่งของ PI = 1.570795

• ถ้า console **ไม่แสดงอะไรเลย** → เช็คว่า `index.html` มี `type="module"` ใน `<script>` หรือยัง
• ถ้า console **แดง error** → อ่านข้อความ error ดู — ส่วนใหญ่เกิดจาก path ผิด (ลืม `./` หรือลืม `.js`)
• ถ้า console **แดง CORS error** → เปิดไฟล์ตรง ๆ ไม่ได้ผ่าน Live Server — ต้องใช้ Live Server
• ถ้าเห็นผลลัพธ์ครบตามด้านบน → **ผ่านแล้ว!** import ทำงานถูกต้อง

เห็นผลลัพธ์ครบแล้ว? ลอง **ทดลองเปลี่ยนโค้ด** เพื่อทำความเข้าใจให้ลึกขึ้น: - ใน `main.js` ลอง **import ชื่อผิด** — เปลี่ยน `add` เป็น `Add` (ตัวใหญ่) แล้ว refresh ดู error - ใน `main.js` ลอง **ลืม `.js`** — เปลี่ยน `'./math.js'` เป็น `'./math'` แล้วดู error - ใน `main.js` ลอง **ลืม `./`** — เปลี่ยน `'./math.js'` เป็น `'math.js'` แล้วดู error - ใน `index.html` ลอง **ลบ `type="module"`** ออกจาก `<script>` แล้วดู error เห็น error แล้วจำไว้ — พวกนี้คือ error ที่มือใหม่เจอบ่อยที่สุด รู้จักหน้าตาไว้จะช่วยแก้ไขได้เร็วขึ้น