Skip to main content

ความแตกต่างระหว่าง Export vs. Export Default และการ Import ของ JavaScript

· 3 min read
Kongvut Sangkla
Kongvut Sangkla
Author

Table of contents

Intro​

บทความนี้จะเป็นการอธิบายความแตกต่างระหว่าง Export และ Export Default รวมถึงการ Import โดยเป็นการสรุปไม่ยาว เหมาะสำหรับผู้ที่เคยเขียนมาในระดับนึงแล้ว และจะอธิบายว่าเมื่อไหร่ควรใช้

Export (class/function/variable)​

รูปแบบ Export ก่อนการประกาศ​

Export ก่อนประกาศ
// export a variable
export const DEFAULT_YEAR = 2020;

// export a function
export function fullName(user) {
  return `${user.firstname} ${user.lastname}`;
}

// export a class
export class Fruit {
  constructor(name) {
    this.name = name;
  }
}

รูปแบบ Export หลังจากการประกาศแล้ว​

Export หลังประกาศ

const DEFAULT_YEAR = 2020;

function fullName(user) {
  return `${user.firstname} ${user.lastname}`;
}

class User {
  constructor(name) {
    this.name = name;
  }
}

export {DEFAULT_YEAR, fullName, User};

รูปแบบ Export "as"​

หลักการก็จะเหมือนกับการ Export ปกติ แต่การใส่ as เข้าไปจะเป็นการตั้ง Alias name ตัวอย่าง

user.js
export {getFullName as fullName, getNickName as nickName};

ทีนี้ fullName และ nickName ก็จะเป็นชื่อใช้เรียกแทน ตัวอย่าง

main.js
import * as u from './user.js';

u.fullName('John', 'Lennon');
u.nickName('John');

รูปแบบ Export default​

Default export นั้นจะสามารถ Export ได้ต่อหนึ่ง module เท่านั้น (สามารถใช้ร่วมกับ Export แบบปกติได้ด้วย) และสามารถ Import เป็นชื่ออะไรก็ได้ ตัวอย่าง

user.js
// ...
export default () => {
  // ...
  getFullName,
  getNickName
}

ตัวอย่างการ Import (สามารถ Import เป็นชื่ออะไรก็ได้)

main.js
import User from './user.js';
import Profile from './user.js';

User.getFullName('John', 'Lennon')
User.getNickName('John')
// หรือ
Profile.getFullName('John', 'Lennon')
Profile.getNickName('John')

Re-export​

Re-export คือการ Export ต่อจาก Module ที่ Export ไว้แล้วอีกทีนึง ตัวอย่าง

userHepler.js
export {sayHello} from './message.js'; // re-export named sayHello

export {default as User} from './user.js'; // re-export default as Named

export * from './user.js'; // re-export named exports (ทั้งหมดยกเว้น default export)

export {default} from './something'; // Default export as Default

export {foo as default} from './something'; // Named export as Default

export {foo as bar} from './something'; // Named export as Renamed
note

Named exports คือคำสั่ง export ส่วน Default export คือคำสั่ง export default

Import​

รูปแบบ Import และ Import *​

ตามปกติการ Import จะเขียนไว้ใน { ... } (จาก Named exports) ตัวอย่าง

main.js
// main.js
import {getFullName, getNickName} from './user.js';

getFullName('John', 'Lennon');
getNickName('John');

แต่ Import * จะ Import ทุก ๆ อย่างจาก Module โดยมีรูปแบบ Syntax ดังนี้

main.js
import * as u from './user.js';

u.getFullName('John', 'Lennon');
u.getNickName('John');

รูปแบบ Import "as"​

คือการ Import โดยตั้งเป็นชื่อใหม่ (Alias name) ตัวอย่าง

main.js
import {getFullName as fullName, getNickName as nickName} from './user.js';

fullName('John', 'Lennon');
nickName('John');

รูปแบบ Import จาก Default exports​

การ Import จาก Default exports นั้นสามารถตั้งเป็นชื่ออะไรก็ได้ (แตกต่างจาก Named exports ต้องระบุชื่อ Import ให้ตรงกับตอนที่ Export) ตัวอย่าง

main.js
import defaultName from "module"; // for default export only
import defaultName, {namedExport1, ..., namedExportX} from "module"; // with named exports
import defaultName, * as namedExport from "module"; // with named exports

สรุป​

Named exports (export)​

  • 1 ไฟล์ สามารถสั่ง export ได้หลายครั้ง (ได้ทั้ง class/function/variable)
  • สั่ง import ต้องใส่ { ระบุชื่อ } (ชื่อต้องตรงกับตอนที่สั่ง export)
  • หรือทำแบบนี้ก็ได้ เช่น import {aa as xxx, bb as yyy} from "module"
  • สามารถใช้ชื่ออะไรสักอย่าง เช่น import * as xxx from "module"

Default export (export default)​

  • 1 ไฟล์ สามารถสั่ง export ได้รอบเดียว (class/function/variable)
  • สั่ง import ต้องไม่ใส่ {} ให้ระบุชื่อ (ชื่อต้องตรงกับตอนที่สั่ง export)
  • สั่ง import อยากให้เป็นชื่ออะไรก็ได้ (ชื่อไม่จำเป็นต้องตรงกับตอนที่สั่ง export)
  • ระวังว่า สั่ง import ได้แค่ชื่อเดียว
  • สามารถใช้ Default exports ผสมกับ Named exports ได้

Tips​

  • 1 ไฟล์ สามารถใช้ Export กับ Export default ด้วยกันได้ เวลาสั่ง import ก็ประมาณนี้ import defaultName, { x, y } from "module"
  • หรือ import defaultName, * as namedExport from "module"
  • หรือ import defaultName, {namedExport1, ..., namedExportX} from "module"

References​

ช่วยบริจาคสำหรับค่ากาแฟ
Loading...