Function Expression คือการกำหนดฟังก์ชันให้กับตัวแปร (variable assignment) ต่างจาก Function Declaration ที่เริ่มด้วยคำสำคัญ function
Function Declaration
function sayHello(name, age) {
document.write(name + " is " + age + " years old.");
}
- มี Hoisting (ย้ายขึ้นบนสุด scope อัตโนมัติ)
- ต้องมีชื่อฟังก์ชัน
Function Expression
// Anonymous Function Expression
var a = function() {
return 5;
};
// Named Function Expression
var a = function bar() {
return 5;
};
// เรียกใช้
a(); // ใช้งานได้
// bar(); // Error: bar is not defined (ชื่อ bar ใช้ได้แค่ภายในฟังก์ชันเอง)
ความแตกต่างสำคัญ
| คุณสมบัติ | Function Declaration | Function Expression |
|---|---|---|
| Hoisting | ทั้งฟังก์ชัน (usable ก่อนประกาศ) | แค่ตัวแปร (undefined ก่อนบรรทัดที่ประกาศ) |
| ชื่อฟังก์ชัน | บังคับ | ไม่บังคับ (anonymous ได้) |
| ใช้เป็นอาร์กิวเมนต์ | ได้ (แต่ต้องประกาศก่อน) | ได้โดยตรง (callback) |
| Conditional Definition | ไม่แนะนำ (พฤติกรรมแตกต่างใน strict mode) | ได้ปกติ |
Arrow Function Expression (ES6)
const add = (a, b) => a + b;
const greet = name => `Hello, ${name}!`;
แนะนำ: ใช้ const กับ Function Expression/Arrow Function เพื่อป้องกันการ assign ใหม่โดยไม่ได้ตั้งใจ