Wrikka Learn

Dark mode

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Constructor Function (function สร้าง object) ​

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

js
// ฟังก์ชันสร้างออบเจ็กต์ 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) ​

ฟังก์ชันที่ถูกส่งเข้าไปในฟังก์ชันอื่น เพื่อให้ทำงานในภายหลัง เช่น หลังจากการทำงานอื่นเสร็จสิ้น

js
// ฟังก์ชันที่จะถูกส่งไปเป็น callback
function callbackFunction() {
  console.log("Callback function called");
}

// ฟังก์ชันที่รับ callback เป็นพารามิเตอร์
function higherOrderFunction(callback) {
  console.log("ทำงานบางอย่าง...");
  callback();  // เรียกใช้ฟังก์ชันที่รับเข้ามา
}

higherOrderFunction(callbackFunction);
// แสดงผล: "ทำงานบางอย่าง..." ตามด้วย "Callback function called"

Higher Order Function (function ที่รับ function หรือ callback หรือ return function) ​

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

js
// ฟังก์ชันที่รับฟังก์ชันอื่นเป็นพารามิเตอร์
function higherOrderFunction(callback) {
  callback();
}

// ฟังก์ชันที่ส่งคืนฟังก์ชัน
function createMultiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = createMultiplier(2);
console.log(double(5));  // 10

Closures (function ที่ใช้ closure) ​

ฟังก์ชันที่สามารถเข้าถึงตัวแปรและฟังก์ชันที่อยู่ภายนอกได้แม้ฟังก์ชันภายนอกจะถูกเรียกใช้แล้ว

js
// ฟังก์ชันที่สร้าง closure
function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

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