Modules ในภาษา JavaScript

ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับโมดูลในภาษา JavaScript เราจะพูดถึงแนวคิดการใช้งานโมดูลและการสร้างโมดูลเพื่อแบ่งส่วนของโค้ดให้เป็นหมวดหมู่เพื่อให้ง่ายต่อการจัดการและดูแลรักษา นี่เป็นเนื้อหาในบทนี้

  • โมดูลคืออะไร
  • การประกาศและใช้งานโมดูล
  • การใช้งานจากหลายโมดูล
  • การ export ตัวแปรและค่าคงที่
  • Default export
  • ขอบเขตตัวแปรในโมดูล

โมดูลคืออะไร

โมดูล (Module) นั้นเป็นไฟล์โปรแกรมในภาษา JavaScript ที่ประกอบไปด้วยโค้ดที่เราเขียนขึ้น การใช้งานโมดูลจะช่วยให้สามารถแบ่งโค้ดออกเป็นหมวดหมู่ ง่ายต่อการจัดการและการดูแลรักษา และง่ายต่อการนำกลับมาใช้ใหม่ จากตัวอย่างในบทที่ผ่านมา โปรแกรมทั้งหมดที่เราเขียนมีเพียงหนึ่งไฟล์หรือหนึ่งโมดูลในการทำงาน นั่นหมายความว่าเรายังไม่ใช้ประโยชน์จากโมดูลในการเขียนโปรแกรม

การใช้โมดูลจะทำให้โปรแกรมสามารถมีหลายไฟล์ได้ โดยการแบ่งแยกโค้ดออกเป็นหมวดหมู่ตามลักษณะการทำงานหรือด้วยการออกแบบของเราเอง เช่น เราอาจสร้างโมดูลสำหรับเก็บฟังก์ชัน และอีกโมดูลสำหรับเก็บค่าคงที่ จากนั้นนำมันไปใช้งานในส่วนอื่นๆ ของโปรแกรม ซึ่งนี่เป็นแนวคิดพื้นฐานของการใช้งานโมดูลในภาษา JavaScript

นอกจากนี้ โมดูลยังมีขอบเขตตัวแปรเป็นของมันเอง สำหรับขอบเขตของตัวแปรในโมดูลเราจะพูดถึงในตอนท้ายของบทนี้

การประกาศและใช้งานโมดูล

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

main.js
function sum(a, b) {
    return a + b;
}

function sayHi(name) {
    console.log("Hi " + name);
}

let a = 10;
let b = 20;
let name = "Metin";

console.log(sum(a, b));
sayHi(name);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

30
Hi Metin

ในตัวอย่างนี้ เป็นโปรแกรมสำหรับหาผลรวมของตัวเลข และแสดงชื่อออกทางหน้าจอ โดยการเรียกใช้ฟังก์ชัน sum และ sayHi ตามลำดับ จะเห็นว่าโปรแกรมนี้ถูกเขียนอยู่ในไฟล์ main.js ซึ่งเราเรียกไฟล์นี้ว่าโมดูลหลัก เนื่องจากมันเป็นจุดเริ่มต้นที่โปรแกรมทำงานและเรารันมันด้วยคำสั่ง

node main.js

เนื่องจากทุกอย่างนั้นเขียนไว้ในไฟล์เดียวกันทำให้มันยากในการนำกลับมาใช้ใหม่ ลองจินตนาการว่าอาจมีโปรแกรมอื่นที่ต้องการใช้ฟังก์ชัน sum หรือ sayHi เราจะต้องเขียนมันใหม่อีกครั้งในโปรแกรมเหล่านั้น แต่โมดูลสามารถช่วยแก้ปัญหานี้ได้ เราสามารถแยกส่วนของโค้ดที่ต้องใช้ซ้ำออกเป็นโมดูลและเรียกใช้เมื่อต้องการได้

ในการสร้างโมดูลเราเพียงสร้างไฟล์ใหม่ขึ้นมา ต่อไปมาแยกฟังก์ชันทั้งสองออกเป็นโมดูล utilities.js จากนั้นนำเข้ามาใช้ในโมดูลหลักของโปรแกรม main.js นั่นจะทำให้โปรแกรมของเราประกอบไปด้วยสองไฟล์ดังนี้

utilities.js
function sum(a, b) {
    return a + b;
}

function sayHi(name) {
    console.log("Hi " + name);
}

module.exports.sum = sum
module.exports.hi= sayHi

และในไฟล์ main.js เราได้นำเข้าฟังก์ชันจากโมดูล utilities.js มาใช้งาน

main.js
let { sum, hi } = require('./utilities.js');

let a = 10;
let b = 20;
let name = "Metin";

console.log(sum(a, b));
hi(name);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

30
Hi Metin

ในตัวอย่างนี้ ผลลัพธ์การทำงานของโปรแกรมเหมือนกับตัวอย่างก่อนหน้า แต่แทนที่จะเขียนทุกอย่างไว้ในไฟล์เดียวกัน เราได้แยกฟังก์ชันไปสร้างเป็นโมดูล และนำเข้าฟังก์ชันเหล่านั้นมาใช้ในโมดูลหลักแทน ต่อไปเป็นการอธิบายสิ่งที่เราทำในโมดูล utilities.js

ในโมดูล utilities.js นั้นได้มีการประกาศสองฟังก์ชัน ซึ่งฟังก์ชันทั้งสองเป็นฟังก์ชันสำหรับโมดูลนี้เท่านั้น และเพื่อทำให้มันสามารถนำไปใช้ได้โดยโมดูลอื่น (หรือจากไฟล์อื่น) เราจะต้องทำการ export โดยการกำหนดเป็น Property ผ่านออบเจ็ค module.exports

module.exports.sum = sum;
module.exports.hi = sayHi;

module.exports เป็นออบเจ็คที่ใช้สำหรับส่งออก Module บน Node.js ที่เรียกกว่าการ export ในการส่งออกค่าจะทำโดยการกำหนดผ่าน Property จากนั้นค่าที่เราส่งออกจากโมดูลนี้จะสามารถนำไปใช้ได้จากโมดูลอื่นๆ

let { sum, hi } = require('./utilities.js');

จากนั้นในไฟล์หลักของโปรแกรม เพื่อนำฟังก์ชันที่ประกาศในโมดูล utilities.js มาใช้งาน เราใช้ฟังก์ชัน require ในการนำเข้าโมดูลเข้ามา โดยพารามิเตอร์ของฟังก์ชันจะเป็นพาธของโมดูลที่ต้องการนำเข้า สังเกตว่าหากโมดูลอยู่โฟล์เดอร์เดียวกัน มันจะต้องเริ่มต้นด้วย ./ เสมอ

console.log(sum(a, b));
hi(name);

จากนั้นเราสามารถใช้ฟังก์ชันทั้งสองได้เหมือนกับว่ามันถูกประกาศในไฟล์เดียวกัน

ในการส่งค่าออกจากโมดูลคุณสามารถกำหนด Property โดยใช้ชื่ออะไรก็ได้ และค่าของมันสามารถเป็นค่าอะไรก็ได้ ในตัวอย่างเราได้ส่งออกฟังก์ชันโดยกำหนด Property เป็นชื่อเดียวกันกับชื่อของฟังก์ชัน ซึ่งนั่นไม่จำเป็นเสมอไปเราสามารถใช้ชื่ออื่นได้ ยกตัวอย่างเช่น

// Export from pre-defined objects
module.exports.a = sum;
module.exports.b = sayHi;
// Immediately export
module.exports.name = "Metin";
module.exports.hello = function () {
    return "Hello";
}

ในตัวอย่างแสดงให้เห็นว่าค่าการกำหนดชื่อของ Property จะเป็นอะไรก็ได้ และค่าของมันก็เป็นอะไรก็ได้เช่นกัน นอกจากนี้เรายังสามารถ export ค่าออกไปได้ทันที โดยที่ไม่ต้องใช้ค่าจากตัวแปรเหมือนกับ Property name และ hello

let { a, b, name, hello } = require('./myModule');

และเช่นเดิมในการนำค่าเหล่านั้นมาใช้งานในโมดูลหลัก เราต้องอ้างถึงค่าเหล่านั้นจาก Property ในชื่อเดียวกันกับตอนที่มันถูก export ออกมาจากโมดูล

การใช้งานจากหลายโมดูล

โปรแกรมไม่จำเป็นต้องมีเพียงหนึ่งหรือสองโมดูล มันสามารถมีกี่โมดูลก็ได้ขึ้นกับว่าคุณต้องการออกแบบและจัดโครงสร้างของโปรแกรมเป็นอย่างไร ในตัวอย่างนี้เราจะสร้างโมดูลสำหรับเก็บฟังก์ชัน จากนั้นแยกประเภทของฟังก์ชันออกเป็นแต่ละโมดูลตามการทำงานของมัน นี่เป็นตัวอย่าง

math.js
function add(a, b) {
    return a + b;
}

function minus(a, b) {
    return a - b;
}

module.exports.add = add
module.exports.minus = minus
string.js
function reverseString(str) {
    return Array.from(str).reverse().join('');
}

function countVowels(str) {
    let count = 0;
    for (let ch of str) {
        if ('aeiou'.includes(ch.toLowerCase())) {
            count++;
        }
    }
    return count;
}

module.exports.reverseString = reverseString
module.exports.countVowels = countVowels

จากนั้นในโนโมดูลหลักนำเข้าฟังก์ชันจากโมดูลทั้งสองเพื่อใช้งานและใช้รันโปรแกรม

main.js
let { add, minus } = require('./math');
let { reverseString, countVowels } = require('./string');

console.log("2 + 3 = " + add(2, 3));
console.log("10 - 6 = " + minus(10, 6));

console.log(reverseString("marcuscode"));
console.log(countVowels("Hello World!"));

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

2 + 3 = 5
10 - 6 = 4
edocsucram
3

ในตอนแรกเราได้สร้างสองโมดูลขึ้นมา โมดูล math.js สำหรับเก็บฟังก์ชันเกี่ยวกับการดำเนินการทางคณิตศาสตร์ และโมดูล string.js สำหรับเก็บฟังก์ชันที่ทำงานกับ String จากนั้นในโมดูลหลัก main.js นำเข้าฟังก์ชันจากโมดูลทั้งสองมาใช้งาน

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

Object destructing

Object destructing คือรูปแบบการประกาศตัวแปรแบบรวดเร็วโดยการใช้ชื่อ Property เป็นชือตัวแปรสำหรับเก็บค่าจาก Property ดังกล่าว นี่เป็นคุณสมบัติในภาษา JavaScript ที่ช่วยอำนวยสะดวกในการนำค่า Property ของออบเจ็คประเก็บไว้ในตัวแปร

ยกตัวอย่างเช่น ถ้าหากเรามีออบเจ็คของ user ที่ประกอบไปด้วย Property id และ name และเราต้องการนำค่าใน Property ทั้งสองมาเก็บไว้ในตัวแปรในชื่อเดียวกันกับ Property ยกตัวอย่างเช่น

let user = { id: 1, name: "Metin" };
let id = user.id;
let name = user.name;

แทนที่จะประกาศตัวแปรและเข้าถึงแต่ละ Property และนำมากำหนดลงทีละตัวแปรเหมือนกับในตัวอย่างด้านบน เราสามารถใช้การ Object destructing สำหรับประกาศตัวแปรเพื่อเก็บค่า Property ให้อัตโนมัติได้ดังนี้

let user = { id: 1, name: "Metin" };
let { id, name } = user;

ทั้งสองวิธีนั้นให้ผลลัพธ์การทำงานที่เหมือนกัน แต่การใช้ Object destructing จะสั้นและรวดเร็วกว่า และโปรแกรมเมอร์ส่วนมากชอบใช้มัน และในบทเรียนนี้เราจะใช้รูปแบบนี้สำหรับการนำเข้าออบเจ็คจากโมดูล

และถ้าหากเราต้องการชื่อตัวแปรที่ต่างจากชื่อของ Property เราสามารถกำหนดชื่อตัวแปรที่ต้องการได้หลังเครื่องหมายโคลอน (:) ยกตัวอย่างเช่น

let user = { id: 1, name: "Metin" };
let { id: userId, name: userName } = user;

ในคำสั่งนี้ Property id จะถูกนำมาเก็บในตัวแปร userId และ Property name จะถูกนำมาเก็บในตัวแปร userName ตามลำดับ

อย่างไรก็ตาม เพื่อให้คุณเข้าใจพื้นฐานการ import/export ของโมดูลในภาษา JavaScript และการอธิบายเพิ่มเติมเกี่ยวกับ Object destructing มาดูตัวอย่างต่อไปนี้ ซึ่งเป็นการย้อนกลับไปยังตัวอย่างแรกของเราในบทนี้

utilities.js
function sum(a, b) {
    return a + b;
}

function sayHi(name) {
    console.log("Hi " + name);
}

module.exports.sum = sum
module.exports.hi= sayHi
main.js
/* This function calls return module.exports
   object from utilities module */
let modules = require('./utilities.js');

console.log("2 + 3 = " + modules.sum(2, 3));
modules.hi("Metin");

ในตัวอย่างนี้ แสดงให้เห็นว่าโมดูลในภาษา JavaScript จริงๆ แล้วมันทำงานอย่างไร เราได้สร้างโมดูล utilities.js ซึ่งประกอบไปด้วยฟังก์ชันสำหรับบวกตัวเลขและแสดงชื่อออกทางหน้าจอ เหมือนกับในตัวอย่างแรกของบทนี้

let modules = require('./utilities.js');

สิ่งที่สำคัญที่เราต้องการอธิบายให้คุณทราบในตัวอย่างนี้ก็คือ เมื่อเรานำเข้าโมดูลด้วยฟังก์ชัน require ค่าที่ส่งกลับมาจากโมดูลนั้นก็คือออบเจ็ค module.exports ที่ถูกส่งออกมาจากโมดูล utilities.js จากนั้นเราเก็บมันใส่ตัวแปร modules

console.log("2 + 3 = " + modules.sum(2, 3));
modules.hi("Metin");

เนื่องจาก modules นั้นเป็นออบเจ็คของ module.exports ที่ถูกส่งออกมาจากโมดูล utilities.js นั่นหมายความว่ามันจะประกอบไปด้วย Property พร้อมกับค่าที่เราส่งออกมา และเราสามารถเข้าถึงค่าเหล่านั้นได้เหมือนกับการใช้งาน Property ของออบเจ็คปกติ

นั่นหมายความว่าเราสามารถใช้ Object destructing ในการนำ Property มาเก็บไว้ในตัวแปรเพื่อใช้งานในโมดูลหลักดังนี้

let { sum, hi } = modules;

นี่จะทำให้เราไม่ต้องเข้าถึง Property ด้วยรูปแบบเต็ม เช่น modules.sum หรือ modules.hi เป็นต้น และนี่ก็คือประโยชน์ของ Object destructing ในภาษา JavaScript

การ export ตัวแปรและค่าคงที่

ในการ export ค่าออกมาจากโมดูลไม่ใช่เพียงฟังก์ชันเท่านั้นที่สามารถ export ออกมาได้ แต่เป็นออบเจ็คทุกประเภทในภาษา JavaScript เช่น ค่าคงที่ ตัวแปร ฟังก์ชัน คลาส อาเรย์ หรือ Literal ในตัวอย่างนี้ มาสร้างโมดูล values.js สำหรับเก็บค่าคงที่และตัวแปร จากนั้น export มันออกมาเพื่อใช้งาน

values.js
const LANGUAGE = "JavaScript";
const AUTHOR = "Metin";
let year = 2020;
let user = {
    id: 1,
    name: "Metin"
};

module.exports.LANGUAGE = LANGUAGE;
module.exports.AUTHOR = AUTHOR;
module.exports.year = year;
module.exports.user = user;

ในโมดูลหลักของโปรแกรม main.js เราสามารถนำค่าจากโมดูล values.js เข้ามาใช้งานได้ดังนี้

main.js
let { LANGUAGE, AUTHOR, year, user } = require('./values.js');

console.log(LANGUAGE + " Tutorial");
console.log("Author: " + AUTHOR);
console.log("Year written: " + year);
console.log("User ID: " + user.id);
console.log("User name: " + user.name);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

JavaScript Tutorial
Author: Metin
Year written: 2020
User ID: 1
User name: Metin

ในตัวอย่างนี้ เป็นการสร้างโมดูลเพื่อเก็บค่าคงที่และตัวแปร จากนั้นนำเข้ามาใช้งานในโมดูลหลัก ซึ่งการส่งค่าออกจากโมดูลนั้นทำเช่นเดิม โดยการกำหนด Property ให้กับออบเจ็ค module.exports และตามด้วยค่าที่ต้องการส่งออกมา

Default export

ในตัวอย่างก่อนหน้าเป็นการ export ค่าออกจากโมดูล โดยแต่ละค่านั้นถูกส่งออกมาผ่าน Property ของออบเจ็ค module.exports อย่างไรก็ตาม เราสามารถส่งค่าออกมาแบบเป็นค่าเดียวได้ โดยกำหนดค่าที่ต้องการส่งออกให้กับออบเจ็ค module.exports ซึ่งการ export ค่าด้วยวิธีนี้เรียกว่า default export นี่เป็นตัวอย่าง

submodule.js
function add(a, b) {
    return a + b;
}

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

let siteName = "marcuscode";

module.exports = {
    add: add,
    subtract: subtract,
    siteName: siteName
};

ในตัวอย่างนี้ การส่งค่าออกมาจากโมดูล submodule เป็นการส่งออกแบบ default export โดยการกำหนดออบเจ็คที่ต้องการส่งออกไว้ใน module.exports จากนั้นในตอนนำโมดูลมาใช้งาน เราสามารถทำได้ดังนี้

let submodule = require('./submodule.js');

ในการส่งค่าออกด้วยวิธี default export ทั้งออบเจ็คถูกส่งกลับมาในตอนที่เรานำเข้าโมดูลด้วยฟังก์ชัน require จากนั้นเราสามารถใช้งานฟังก์ชันหรือตัวแปรในออบเจ็คได้ โดยการเข้าถึง Property ในออบเจ็ค submodule เช่น submodule.add หรือ submodule.siteName เป็นต้น

let { add, subtract, siteName } = require('./submodule.js');

และเนื่องจากค่าที่เราส่งกลับมานั้นเป็นออบเจ็ค คุณสามารถเข้าถึงฟังก์ชันและตัวแปรโดยการนำมันใส่ในตัวแปรก่อนด้วยวิธี Object destructing ที่คุณได้เรียนไปก่อนหน้านี้

โดยทั่วไปแล้วการส่งออกค่าแบบ default export มักใช้กับโมดูลที่ต้องการส่งออกเพียงค่าเดียว ยกตัวอย่างเช่น เราอาจสร้างโมดูลสำหรับเก็บคลาสและส่งออกคลาสดังกล่าวด้วย default export ในตัวอย่างนี้ เป็นการสร้างโมดูล user.js สำหรับเก็บคลาส User

user.js
class User {

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    introduce() {
        console.log(`${this.name} is ${this.age} years old`);
    }
}

module.exports = User;

จากนั้นในโมดูลหลักของโปรแกรม เป็นการนำเข้าคลาสจากโมดูล user.js มาใช้งาน

main.js
let User = require('./user.js');

let user = new User("Metin", 32);
user.introduce();
// Output: Metin is 32 years old

นี่แสดงให้เห็นว่า เราได้สร้างโมดูล user.js เพื่อที่จะเก็บคลาส User เพียงอย่างเดียวเท่านั้น จากนั้นส่งมันออกมาด้วยการ default export ซึ่งค่าที่ถูก export ออกมาจะเป็นค่าที่ส่งกลับมาจากฟังก์ชัน require ในตอนนำเข้าโมดูลเพื่อใช้งาน

และเนื่องจากค่าที่ส่งกลับมาเป็นการ export แบบ default ดังนั้นเราสามารถเก็บมันไว้ในตัวแปรชื่ออื่นได้ ยกตัวอย่างเช่น

let User = require('./user.js');
// Or
let MyUser = require('./user.js');

ทั้งตัวแปร User และ MyUser เป็นคลาสที่ได้มาจากการนำเข้าคลาส User ในโมดูล user.js และสามารถใช้สำหรับสร้างออบเจ็คของผู้ใช้ได้เหมือนกัน

ขอบเขตตัวแปรในโมดูล

โมดูลมีขอบเขตตัวแปรเช่นเดียวกับฟังก์ชัน นั่นหมายความว่าสิ่งที่ประกาศในโมดูลจะสามารถเข้าถึงได้จากโมดูลเดียวกันเท่านั้น และสิ่งที่ถูก export ออกไปจากโมดูลเท่านั้นที่จะสามารถใช้ได้โดยโมดูลอื่น

นี่เป็นตัวอย่างแสดงการทำงานงขอบของเขตตัวแปรในโมดูล เราได้สร้างโมดูล myModue.js สำหรับเก็บค่าในตัวแปร value พร้อมกับฟังก์ชันสำหรับเปลี่ยนแปลงและรับค่าจากโมดูลดังกล่าว

myModue.js
let value = 0;

function updateValue(v) {
    value = v;
}

function getValue() {
    return value;
}

module.exports.updateValue = updateValue;
module.exports.getValue = getValue;

และนี่เป็นโมดูลหลักของโปรแกรม เพื่อนำเข้าฟังก์ชันจากโมดูล myModue.js เพื่อใช้งาน

main.js
let { updateValue, getValue } = require('./value.js');

let value = 5;

updateValue(10);
let anotherValue = getValue();

console.log("Value in main module:", value);
console.log("Value in another module:", anotherValue);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Value in main module: 5
Value in another module: 10

ในตัวอย่าง จะเห็นว่าแต่ละโมดูลนั้นมีตัวแปร value เป็นของมันเอง ตัวแปร value ในโมดูล myModue.js นั้นสามารถเข้าถึงได้ด้วยฟังก์ชันจากโมดูลเดียวกันเท่านั้น ในกรณีนี้คือฟังก์ชัน updateValue และ getValue จากนั้นเราทำการ export สองฟังก์ชันนี้เพื่อเรียกใช้งานในโมดูล main.js

updateValue(10);
let anotherValue = getValue();

ในโมดูล main.js นั้นมีตัวแปร value เป็นของมันเอง เราสามารถอัพเดทค่าของตัวแปรในแต่ละโมดูลได้อย่างเป็นอิสระต่อกัน เมื่อเราต้องการอัพเดทและรับค่าตัวแปร value ในโมดูล myModue.js เราจะต้องทำผ่านฟังก์ชัน updateValue และฟังก์ชัน getValue

นั่นเป็นเพราะว่าทั้งสองฟังก์ชันอยู่ในโมดูลเดียวกันกับตัวแปรดังกล่าว แม้เราจะเรียกใช้มันในโมดูลหลัก แต่บริษทการทำงานของมันยังอยู่ในโมดูลเดิมที่มันถูกประกาศ ดังนั้นตัวแปรที่มันอัพเดทและอ่านค่าจะเป็นตัวแปร value ที่อยู่ในโมดูล myModue.js เสมอไม่ว่ามันจะถูกเรียกที่ไหนก็ตาม

ในบทนี้ คุณได้เรียนรู้เกียวกับโมดูลในภาษา JavaScript เราได้แนะนำให้คุณรู้จักกับโมดูล การประกาศและใช้งานโมดูลในการเขียนโปรแกรม นี่จะทำให้เราสามารถแยกโค้ดออกเป็นส่วนๆ และนำกลับมาใช้ใหม่ได้เมื่อต้องการ