Array Methods

Callback function คืออะไร

callback function คือ **function ที่เราส่งเป็น argument ให้ function อีกตัวหนึ่ง** เพื่อให้ function นั้นเรียกใช้ทีหลัง แนวคิดสำคัญ: เราไม่ได้เรียก callback เอง — เราส่ง function ให้ function อื่นเป็นคนเรียกให้ เหมือนบอกเพื่อนว่า "ทำตามขั้นตอนนี้ แล้วตอนท้าย เรียกคำสั่งที่ฉันให้ไว้นะ"

function finishStep(step, callback) {
  const message = "ขั้นตอน " + step + " เสร็จแล้ว";
  callback(message);
}

// ส่ง function expression เป็น callback
finishStep(1, function (result) {
  console.log(result);
});
// output: ขั้นตอน 1 เสร็จแล้ว

// ส่ง arrow function เป็น callback
finishStep(2, (result) => {
  console.log(result);
});
// output: ขั้นตอน 2 เสร็จแล้ว

ทั้ง `function (result) { ... }` และ `(result) => { ... }` คือ callback — function ที่เราสร้างแล้วส่งเข้าไป โดย **ยังไม่ได้เรียก** `finishStep` จะเป็นคนเรียก callback เองในภายหลัง

เมื่อไหร่ควรใช้ callback

ใช้ callback เมื่อต้องการให้ **function หลักจัดการ flow** และให้ **callback จัดการรายละเอียด** — ทำให้ function หลัก reuse ได้กับ callback ต่าง ๆ

function getGreeting(name, callback) {
  const message = "สวัสดี " + name;
  callback(message);
}

// callback แรก: console.log
getGreeting("สมชาย", function (msg) {
  console.log(msg);
});
// output: สวัสดี สมชาย

// callback ที่สอง: เปลี่ยนเป็นตัวพิมพ์ใหญ่
getGreeting("สมหญิง", function (msg) {
  console.log(msg.toUpperCase());
});
// output: สวัสดี สมหญิง

• แยก logic — function หลักไม่ต้องรู้ว่า callback จะทำอะไร
• เปลี่ยนพฤติกรรมได้ — ส่ง callback ต่างกัน ได้ผลลัพธ์ต่างกัน
• ส่งต่อข้อมูล — function หลักส่งค่าที่คำนวณแล้วให้ callback ใช้ต่อ

Callback parameter ของ array methods

array methods เช่น `.map()`, `.filter()`, `.find()` ล้วนรับ **callback function** เป็น argument callback ที่ส่งให้ array method จะได้รับ **3 parameters** โดยอัตโนมัติ: • **element** — ค่า element ปัจจุบัน • **index** — ตำแหน่งของ element (เริ่ม 0) • **array** — array ต้นฉบับทั้งหมด เวลาเริ่มต้น เราใช้แค่ **element** ก็พอ — index และ array จะใช้เมื่อจำเป็นเท่านั้น

const prices = [100, 200, 300];

// callback รับ (element, index, array)
prices.map(function (item, index, arr) {
  console.log("element:", item);   // ค่าแต่ละตัว: 100, 200, 300
  console.log("ตำแหน่ง:", index);   // 0, 1, 2
  console.log("ทั้ง array:", arr);  // [100, 200, 300]
});

// ส่วนใหญ่เราใช้แค่ element
const withVat = prices.map(function (item) {
  return item * 1.07;
});
console.log(withVat);  // [107, 214, 321]

callback ที่ส่งให้ array method **ควร return ค่า** — ไม่งั้น method จะไม่รู้ว่าต้องการผลลัพธ์อะไร ตัวอย่างเช่น `.map()` ใช้ค่าที่ return จาก callback มาใส่ใน array ใหม่ ถ้าไม่ return จะได้ `undefined` แทน

ข้อควรระวัง

// ❌ ผิด: เรียก callback ทันที
// finishStep(1, callback("ข้อความ"))
// → "ข้อความ" ถูกส่งเข้า callback ทันที ไม่รอ finishStep

// ✅ ถูก: ส่ง function expression
finishStep(1, function (result) {
  console.log(result);
});

// ✅ ถูก: ส่ง arrow function
finishStep(1, (result) => console.log(result));

Lab 1: เขียน function ที่รับ callback

Lab 2: Callback รับค่าที่คำนวณมา

Lab 3: เรียก callback ทุก element ด้วย for loop

Lab 4: Transform array ด้วย callback