function ( ) / JavaScript

#พื้นฐานการเขียนเว็ปไซต์

#javascript

#function

ฟังก์ชัน (Function) ใน JavaScript คือ บล็อกของโค้ดที่สามารถนำกลับมาใช้ใหม่ได้ (reusable) ซึ่งถูกออกแบบมาเพื่อ ทำงานเฉพาะอย่าง หรือ ประมวลผล ค่าบางอย่าง แล้วส่ง ผลลัพธ์ กลับคืนมา (optional) 💡

ฟังก์ชันเป็นส่วนประกอบพื้นฐานและสำคัญที่สุดในการเขียนโปรแกรมด้วย JavaScript เพราะมันช่วยให้โค้ดเป็นระเบียบ, จัดการง่าย, และทำงานได้อย่างมีประสิทธิภาพ

1. องค์ประกอบหลักของฟังก์ชัน

ฟังก์ชันใน JavaScript ประกอบด้วยส่วนสำคัญดังนี้:

องค์ประกอบ ความหมาย ตัวอย่าง (ใน function greet(name) { return "Hello, " + name; })

ชื่อฟังก์ชัน (Name) ชื่อที่ใช้ในการเรียกใช้ฟังก์ชัน greet

พารามิเตอร์ (Parameters) ตัวแปรที่ระบุไว้ในวงเล็บ ซึ่งทำหน้าที่รับค่าเข้ามาจากภายนอก name

ตัวเนื้อหา (Body) บล็อกของโค้ดที่อยู่ภายในวงเล็บปีกกา {} ที่จะถูกประมวลผลเมื่อฟังก์ชันถูกเรียกใช้ return "Hello, " + name;

ค่าที่ส่งคืน (Return Value) ค่าที่ฟังก์ชันส่งกลับไปให้โค้ดที่เรียกใช้ (ถ้าไม่มีคำสั่ง return จะคืนค่าเป็น undefined โดยอัตโนมัติ) return "Hello, " + name;

ส่งออกไปยังชีต

2. ประโยชน์หลักของฟังก์ชัน

การนำกลับมาใช้ใหม่ (Reusability): เราสามารถเขียนชุดคำสั่งหนึ่งครั้งและเรียกใช้มันซ้ำ ๆ ได้หลายที่ในโปรแกรม ทำให้ลดการเขียนโค้ดซ้ำซ้อน (Don't Repeat Yourself - DRY)

ความเป็นระเบียบ (Organization): ช่วยแบ่งโค้ดขนาดใหญ่ออกเป็นส่วนย่อย ๆ ตามหน้าที่ ทำให้โค้ดอ่านง่ายและจัดการได้ง่ายขึ้น (Modularity)

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

3. รูปแบบการสร้างฟังก์ชัน (Function Syntax)

JavaScript มีวิธีการสร้างฟังก์ชันหลัก ๆ 3 รูปแบบ:

3.1. การประกาศฟังก์ชัน (Function Declaration)

เป็นรูปแบบดั้งเดิมและพื้นฐานที่สุด ฟังก์ชันที่สร้างด้วยวิธีนี้จะถูก "ยกระดับ" (Hoisting) ไปไว้ด้านบนสุดของขอบเขต (Scope) ทำให้สามารถเรียกใช้ฟังก์ชันได้ก่อนที่จะถึงบรรทัดที่ประกาศฟังก์ชันนั้น ๆ

JavaScript

function add(a, b) {

return a + b;

}

let result = add(5, 3); // เรียกใช้ได้ทันที

3.2. นิพจน์ฟังก์ชัน (Function Expression)

คือการสร้าง ฟังก์ชันนิรนาม (Anonymous Function - ฟังก์ชันที่ไม่มีชื่อ) แล้วกำหนดให้กับตัวแปร:

JavaScript

const subtract = function(a, b) {

return a - b;

};

let result = subtract(10, 4); // ต้องเรียกใช้หลังบรรทัดที่กำหนดตัวแปรเท่านั้น

3.3. ฟังก์ชันลูกศร (Arrow Functions - ES6)

เป็นรูปแบบการเขียนฟังก์ชันที่สั้น กระชับ และเป็นที่นิยมอย่างมากในปัจจุบัน โดยใช้สัญลักษณ์ => แทนที่ function:

JavaScript

// รูปแบบพื้นฐาน

const multiply = (a, b) => {

return a * b;

};

// รูปแบบย่อ (Implict Return)

// สำหรับฟังก์ชันที่มีคำสั่งเดียวและต้องการคืนค่า

const divide = (a, b) => a / b;

let result1 = multiply(2, 4); // 8

let result2 = divide(10, 2); // 5

4. ความสัมพันธ์ระหว่างฟังก์ชันกับ JavaScript

ใน JavaScript ฟังก์ชันถือเป็น พลเมืองชั้นหนึ่ง (First-Class Citizen) ซึ่งหมายความว่า:

ฟังก์ชันสามารถถูกกำหนดให้กับตัวแปรได้ (ตามที่เห็นใน Function Expression)

ฟังก์ชันสามารถถูกส่งเป็นอาร์กิวเมนต์ ให้กับฟังก์ชันอื่นได้ (เช่น ใน Callback Functions)

ฟังก์ชันสามารถส่งคืนฟังก์ชันอื่น เป็นค่าผลลัพธ์ได้ (เช่น ใน Higher-Order Functions)

ความสามารถนี้ทำให้ JavaScript มีความยืดหยุ่นสูงและสามารถเขียนโปรแกรมในรูปแบบที่ซับซ้อน เช่น การเขียนโปรแกรมเชิงฟังก์ชัน (Functional Programming) ได้