ฟังก์ชันใน JavaScript

บทความนี้อธิบายฟังก์ชันใน JavaScript

YouTube Video

ฟังก์ชันใน JavaScript

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

วิธีการกำหนดฟังก์ชัน

การประกาศฟังก์ชัน

ฟังก์ชันสามารถกำหนดได้โดยใช้คำสำคัญ function การประกาศฟังก์ชันจะถูก hoisted ก่อนที่โค้ดจะทำงาน ดังนั้นสามารถเรียกใช้ได้ก่อนที่ฟังก์ชันจะถูกกำหนด

1console.log(greet("Everyone")); // Hello, Everyone
2
3function greet(name) {
4    return "Hello, " + name;
5}
6
7console.log(greet("Alice")); // Hello, Alice

ในตัวอย่างนี้ เนื่องจากฟังก์ชัน greet ถูกเรียกใช้ก่อนการประกาศ ฟังก์ชันจะแสดง Hello, Everyone และ Hello, Alice

การแสดงฟังก์ชันเป็นนิพจน์

ฟังก์ชันสามารถกำหนดได้โดยการกำหนดให้เป็นตัวแปร ในกรณีนี้ ฟังก์ชันจะไม่ถูก hoisted และสามารถเรียกใช้ได้หลังจากที่ถูกกำหนดแล้วเท่านั้น

1const greet = function(name) {
2    return "Hello, " + name;
3};
4
5console.log(greet("Bob")); // Hello, Bob

ในตัวอย่างนี้ จะปรากฏข้อความว่า Hello, Bob

ฟังก์ชันแบบลูกศร (Arrow Function)

ฟังก์ชันแบบลูกศรเป็นวิธีการกำหนดฟังก์ชันด้วยรูปแบบที่สั้นกว่า ฟังก์ชันแบบลูกศรมีประโยชน์อย่างยิ่งเมื่อใช้กับ ฟังก์ชันที่ไม่มีชื่อ (anonymous functions) ฟังก์ชันแบบลูกศรมีพฤติกรรมที่แตกต่างเกี่ยวกับคีย์เวิร์ด this

 1const greet = (name) => {
 2    return "Hello, " + name;
 3};
 4
 5// When it can be expressed in a single line,
 6// `return` and curly braces can be omitted
 7const greetShort = name => "Hello, " + name;
 8
 9console.log(greet("Charlie")); // Hello, Charlie
10console.log(greetShort("Dave")); // Hello, Dave

ฟังก์ชันสามารถถูกกำหนดเป็น greet และ greetShort ในตัวอย่างนี้ หากฟังก์ชันมีเพียงบรรทัดเดียว คุณสามารถเว้น {} (วงเล็บปีกกา) ได้ เช่น greetShort

องค์ประกอบของฟังก์ชัน

อาร์กิวเมนต์

ค่าที่ถูกส่งให้ฟังก์ชันเรียกว่า อาร์กิวเมนต์ โดยการระบุอาร์กิวเมนต์เมื่อกำหนดฟังก์ชัน คุณสามารถส่งค่าได้เมื่อเรียกใช้ฟังก์ชัน

1function add(a, b) {
2    return a + b;
3}
4
5console.log(add(2, 3)); // 5

อาร์กิวเมนต์เริ่มต้น

คุณสามารถกำหนดค่าเริ่มต้นได้หากไม่มีค่าใดถูกส่งไปยังอาร์กิวเมนต์

1function greet(name = "Guest") {
2    return "Hello, " + name;
3}
4
5console.log(greet()); // Hello, Guest
6console.log(greet("Alice")); // Hello, Alice

ในตัวอย่างนี้ หากเรียกใช้ greet() ค่าเริ่มต้น Guest จะถูกใช้

ค่าที่ส่งกลับ

คุณสามารถส่งค่าที่ส่งกลับได้จากฟังก์ชันโดยใช้คำสั่ง return หากไม่มีคำสั่ง return ฟังก์ชันจะส่งกลับค่า undefined

1function greet(name) {
2    console.log('Hello, ' + name + '!');
3}
4function square(num) {
5    return num * num;
6}
7
8console.log(square(4)); // 16
9console.log(greet('Alice')); // undefined

ในตัวอย่างนี้ เนื่องจาก greet ไม่ได้ส่งค่ากลับ ค่า return จึงเป็น undefined

ฟังก์ชันนิรนาม

ฟังก์ชันที่ไม่มีชื่อเรียกว่าฟังก์ชันนิรนาม (anonymous function) ฟังก์ชันเหล่านี้มักใช้เป็น expression ของฟังก์ชันหรือฟังก์ชันลูกศร

1const double = function(num) {
2    return num * 2;
3};
4
5console.log(double(5)); // 10

นิพจน์ฟังก์ชันที่ถูกเรียกใช้งานทันที (IIFE)

นิพจน์ฟังก์ชันที่ถูกเรียกใช้งานทันที (IIFE) คือฟังก์ชันที่ถูกดำเนินการทันทีหลังจากถูกกำหนด มักถูกใช้เพื่อควบคุมขอบเขต (scope)

1/* Example of IIFE: Immediately Invoked Function Expression */
2(function() {
3    console.log("This is an IIFE");
4})(); // This is an IIFE

ฟังก์ชันนี้จะถูกดำเนินการทันทีที่ถูกประกาศ

ฟังก์ชันเรียกกลับ (Callback Function)

การส่งฟังก์ชันเป็นอาร์กิวเมนต์ให้กับฟังก์ชันอื่นเพื่อใช้งานในภายหลังเรียกว่าฟังก์ชันเรียกกลับ (callback function) ฟังก์ชันนี้ถูกใช้งานบ่อยในกระบวนการแอสิงโครนัสและการจัดการเหตุการณ์ (event handling)

1function processData(callback) {
2    let data = "Processed Data";
3    callback(data);
4}
5
6processData(function(result) {
7    console.log(result); // Processed Data
8});

ในตัวอย่างนี้ ฟังก์ชันที่แสดงผลลัพธ์ไปยังคอนโซลถูกส่งเป็นฟังก์ชันเรียกกลับ

ฟังก์ชันแบบเรียกซ้ำ

การที่ฟังก์ชันเรียกใช้งานตัวเองเรียกว่า recursion และฟังก์ชันที่ดำเนินการแบบซ้ำๆ โดยใช้หลักการนี้เรียกว่าฟังก์ชันแบบเรียกซ้ำ ตัวอย่างเช่น ฟังก์ชันสำหรับคำนวณแฟกทอเรียลสามารถใช้งาน recursion ได้ดังนี้

 1function factorial(n) {
 2    if (n === 0) {
 3        return 1;
 4    } else {
 5        return n * factorial(n - 1);
 6    }
 7}
 8
 9console.log(factorial(5));
10// Output : 120
11// (5 * 4 * 3 * 2 * 1 = 120)

ในตัวอย่างนี้ ค่าแฟกทอเรียลของ 5 ซึ่งคือ 120 จะแสดงขึ้น

คีย์เวิร์ด this

this ที่ถูกใช้ภายในฟังก์ชันจะแสดงว่าเป็นตัวอ็อบเจ็กต์ที่ฟังก์ชันนั้นอ้างอิงถึง ในฟังก์ชันปกติ this จะอ้างอิงถึงอ็อบเจ็กต์ที่เรียกใช้งาน แต่ในฟังก์ชันลูกศร this จะคงค่าของขอบเขต (scope) ที่มันถูกกำหนด

 1const obj = {
 2    name: "Alice",
 3    greet: function() {
 4        console.log(this.name); // Refers to "Alice"
 5    }
 6};
 7
 8obj.greet(); // Alice
 9
10const obj2 = {
11    name: "Bob",
12    greet: () => {
13        // Arrow function refers to the outer scope (undefined here)
14        console.log(this.name);
15    }
16};
17
18obj2.greet(); // undefined

การประกาศ greet ของตัวแปร obj ใช้คำสำคัญ function ดังนั้น คำสำคัญ this จึงอ้างอิงถึงออบเจ็กต์ของตัวแปร obj ในทางตรงกันข้าม การประกาศ greet ของตัวแปร obj2 ใช้ฟังก์ชันลูกศร (arrow function) ดังนั้น คำสำคัญ this จะอ้างถึงออบเจ็กต์ในขอบเขตด้านนอก และเป็น undefined ในตัวอย่างนี้

ขอบเขตของฟังก์ชันและคลอชเชอร์

ตัวแปรที่ประกาศไว้ภายในฟังก์ชันจะไม่สามารถเข้าถึงได้จากภายนอกฟังก์ชัน สิ่งนี้เรียกว่า ขอบเขตของฟังก์ชัน (function scope) ยังมีคุณสมบัติที่เรียกว่า คลอชเชอร์ (closure) ซึ่งรักษาขอบเขตในจุดที่ฟังก์ชันถูกกำหนด

 1function outer() {
 2    let outerVar = "I am outer!";
 3
 4    function inner() {
 5        console.log(outerVar); // Can access outerVar
 6    }
 7
 8    return inner;
 9}
10
11const innerFunc = outer();
12innerFunc(); // I am outer!

ในตัวอย่างนี้ ฟังก์ชัน inner สามารถเข้าถึงตัวแปร outerVar ได้ เนื่องจากมันรักษาขอบเขตที่มันถูกกำหนดไว้

สรุป

• มีวิธีการหลากหลายในการประกาศฟังก์ชัน เช่น function declarations, function expressions และ arrow functions
• ฟังก์ชันสามารถรับ อาร์กิวเมนต์ และคืนค่าเป็น ค่าผลลัพธ์ ได้
• มีการใช้งานพิเศษ เช่น callback functions และ recursive functions
• ควรระมัดระวังกับการจัดการ this เนื่องจากฟังก์ชันลูกศร (arrow functions) และฟังก์ชันปกติทำงานแตกต่างกัน
• คลอชเชอร์ (closures) สามารถใช้เข้าถึงตัวแปรภายในจากนอกขอบเขตได้

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

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video