รู้จักกับ Callback ใน JavaScript

📞 What is Callback? 🔙

Callback function ใน JavaScript คือการ pass function ไปเป็น argument ให้กับ function อีกตัวหนึ่ง และเมื่อ function นั้นทำงานเสร็จแล้ว จะเรียกใช้ function ที่ถูก pass เข้าไปให้ทำงานต่อ

ว่ากันง่ายๆ คือ การเอา functionA นึงเข้าไปทำงานใน functionB นึง ซึ่งเมื่อ functionB ทำงานเสร็จ ก็จะเรียกใช้งาน functionA ที่ถูกส่งเข้าไป ถ้ายังงงๆ มาดูตัวอย่างกันเลยดีกว่า

function sayHi(name) {
  console.log(`Hi ${name}`);
}

function sayBye(name) {
  console.log(`Bye ${name}`);
}

function saySomething(name, callback) {
  callback(name);
}

saySomething("John", sayHi); // Hi John

saySomething("John", sayBye); // Bye John

อธิบาย code ด้านบนกันหน่อย

• เราสร้าง function ชื่อ sayHi และ sayBye ขึ้นมา โดยทั้งสอง function นี้จะรับ argument ชื่อ name และแสดงผลออกมาเป็น Hi ${name} และ Bye ${name} ตามลำดับ
• เราสร้าง function ชื่อ saySomething ขึ้นมา โดย function นี้จะรับ argument ชื่อ name และ callback และเมื่อ function นี้ทำงานเสร็จ ก็จะเรียกใช้งาน callback ที่ถูกส่งเข้าไป โดยส่ง argument ชื่อ name ไปด้วย
• เราเรียกใช้งาน saySomething โดยส่ง argument ชื่อ John และ sayHi ไปด้วย ซึ่งเมื่อ saySomething ทำงานเสร็จ ก็จะเรียกใช้งาน sayHi โดยส่ง argument ชื่อ John ไปด้วย ซึ่งผลลัพธ์ที่ได้ก็คือ Hi John

💯 Conclusion

ผมสรุปทำความเข้าใจง่ายๆ คือ เดี๋ยวผม (function) ทำงานเสร็จ กลับมาเรียก (callback) นะ