Functions คือ ชุดคำสั่งที่เขียนขึ้นมาเพื่อทำงานเฉพาะอย่าง สามารถเรียกใช้ซ้ำได้หลายครั้ง ช่วยให้โค้ดเป็นระเบียบและนำกลับมาใช้ใหม่ได้

Basic function (พื้นฐาน function)

การสร้างฟังก์ชันพื้นฐาน ประกอบด้วย:

• คีย์เวิร์ด function
• ชื่อฟังก์ชัน
• พารามิเตอร์ในวงเล็บ (ถ้ามี)
• โค้ดที่ต้องการให้ทำงานในวงเล็บปีกกา {}
• คำสั่ง return เพื่อส่งค่ากลับ (ถ้ามี)

// ฟังก์ชันที่รับพารามิเตอร์ชื่อ name และส่งคืนข้อความทักทาย
function sayHello(name) {
  return `Hello, ${name}!`;
}

Function with parameters (พารามิเตอร์)

พารามิเตอร์คือข้อมูลที่ส่งเข้าไปในฟังก์ชัน เพื่อนำไปประมวลผล

// ฟังก์ชันบวกเลขที่รับพารามิเตอร์สองตัว
function add(a, b) {
  return a + b;
}

Function Call (เรียกใช้ function)

เมื่อสร้างฟังก์ชันแล้ว ต้องเรียกใช้ โดยระบุชื่อฟังก์ชันตามด้วยวงเล็บ และส่งค่าเข้าไปตามที่ฟังก์ชันต้องการ

// เรียกใช้ basic function
console.log(sayHello("John")); // แสดงผล: Hello, John!

// เรียกใช้ function with parameters
console.log(add(2, 3)); // แสดงผล: 5

Function Expression (function ที่กำหนดให้กับตัวแปร)

คือการเก็บฟังก์ชันไว้ในตัวแปร ทำให้สามารถส่งฟังก์ชันไปเป็นพารามิเตอร์ได้

// กำหนดฟังก์ชันให้กับตัวแปร sayHello
const sayHello = function(name) {
  return `Hello, ${name}!`;
};

Arrow function (function ที่ใช้ =>)

รูปแบบฟังก์ชันแบบสั้นกว่า ใช้เครื่องหมาย => แทนคำว่า function ช่วยให้โค้ดกระชับขึ้น

// ฟังก์ชันลูกศรที่ทำงานเหมือนกับฟังก์ชันด้านบน
const sayHello = (name) => {
  return `Hello, ${name}!`;
};

IIFE (Immediately Invoked Function Expression) (function ที่เรียกใช้ทันที)

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

// ฟังก์ชันที่ถูกเรียกใช้ทันทีที่ถูกสร้าง
(function sayHello(name) {
  return `Hello, ${name}!`;
})("John"); // ทำงานทันทีโดยส่ง "John" เข้าไป

Anonymous Function (function ที่ไม่กำหนดชื่อ)

ฟังก์ชันที่ไม่มีชื่อ มักใช้เป็นฟังก์ชันที่ส่งเข้าไปในฟังก์ชันอื่น

// ฟังก์ชันที่ไม่มีชื่อ
function (name) {
  return `Hello, ${name}!`;
}

Async Function (function ที่ใช้ async)

ฟังก์ชันที่รองรับการทำงานแบบ asynchronous ใช้กับงานที่ต้องรอผลลัพธ์ เช่น ดึงข้อมูลจากเซิร์ฟเวอร์

// ฟังก์ชันที่ดึงข้อมูลจาก URL แบบ asynchronous
async function fetchData(url) {
  const response = await fetch(url);
  return response.json();
}

Generator Function (function ที่ใช้ yield)

ฟังก์ชันพิเศษที่สามารถหยุดและกลับมาทำงานต่อได้ ใช้ yield เพื่อส่งค่าแต่ละครั้ง

// ฟังก์ชันที่สร้างลำดับตัวเลข 1, 2, 3
function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

Constructor Function (function สร้าง object)

ฟังก์ชันที่ใช้สร้างออบเจ็กต์ใหม่ โดยใช้คีย์เวิร์ด this เพื่ออ้างถึงออบเจ็กต์ที่กำลังสร้าง

// ฟังก์ชันสร้างออบเจ็กต์ Person
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    return `สวัสดี ฉันชื่อ ${this.name} อายุ ${this.age} ปี`;
  };
}

const person1 = new Person("สมชาย", 25);
console.log(person1.greet()); // "สวัสดี ฉันชื่อ สมชาย อายุ 25 ปี"

Callback Function (function ที่ใช้เป็น callback)

ฟังก์ชันที่ถูกส่งเป็นพารามิเตอร์ให้กับฟังก์ชันอื่น เพื่อให้ถูกเรียกใช้ในเวลาที่เหมาะสม เช่น หลังจากการทำงานอื่นเสร็จสิ้น

// ฟังก์ชันที่รับ callback เป็นพารามิเตอร์
function processData(data, callback) {
  // ประมวลผลข้อมูล
  const result = `Processed: ${data}`;
  // เรียกใช้ callback เมื่อเสร็จสิ้น
  callback(result);
}

// เรียกใช้ฟังก์ชันพร้อมส่ง callback
processData("sample data", function(result) {
  console.log(result); // แสดงผล: "Processed: sample data"
});

Higher Order Function (function ชั้นสูง)

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

// ฟังก์ชันที่ส่งคืนฟังก์ชันใหม่
function createMultiplier(factor) {
  // ส่งคืนฟังก์ชันที่คูณด้วย factor
  return function(number) {
    return number * factor;
  };
}

// สร้างฟังก์ชันสำหรับคูณด้วย 2
const double = createMultiplier(2);
console.log(double(5)); // 10

// สร้างฟังก์ชันสำหรับคูณด้วย 3
const triple = createMultiplier(3);
console.log(triple(5)); // 15

Closures (การเข้าถึงตัวแปรภายนอก)

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

// ฟังก์ชันที่สร้าง counter
function createCounter() {
  let count = 0; // ตัวแปรภายใน createCounter

  // ส่งคืนฟังก์ชันที่สามารถเข้าถึง count
  return function() {
    count++; // เข้าถึงตัวแปร count จากฟังก์ชันภายนอก
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3