Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

วิธีกำหนดฟังก์ชันให้ตัวแปรใน JavaScript

ใน JavaScript สามารถ กำหนดฟังก์ชันให้ตัวแปร ได้ โดยใช้ Anonymous Function (Function Expression) ฟังก์ชันไม่มีชื่อ เรียกใช้ผ่านชื่อตัวแปร

ตัวอย่างพื้นฐาน

var func = function() {
  alert('This is anonymous');
};
func(); // เรียกใช้ผ่านตัวแปร

Anonymous Function Expression

// ไม่มีชื่อ
var a = function() {
  return 5;
};

// Named Function Expression (มีชื่อภายใน)
var b = function bar() {
  return 5;
};

// เรียกใช้
a(); // 5
b(); // 5
// bar(); // ReferenceError: bar is not defined (ชื่อ bar ใช้ได้แค่ในฟังก์ชันเอง)

Arrow Function Assignment (ES6)

const add = (a, b) => a + b;
const greet = name => `Hello, ${name}!`;
const noop = () => {};

คุณสมบัติของ Function Expression

  • ไม่มี Hoisting: ต้องประกาศก่อนใช้ (ReferenceError ถ้าเรียกก่อน)
  • First-class: ส่งเป็นอาร์กิวเมนต์, คืนค่า, เก็บใน Array/Object ได้
  • Closure: จับตัวแปรจาก Scope รอบนอกได้

Callback Pattern (ใช้งานจริง)

// ส่งฟังก์ชันเป็น Callback
function fetchData(callback) {
  setTimeout(() => callback("Data loaded"), 1000);
}

fetchData(function(data) {
  console.log(data); // "Data loaded"
});

// หรือ Arrow Function
fetchData(data => console.log(data));

IIFE (Immediately Invoked Function Expression)

(function() {
  var privateVar = "secret";
  window.myModule = {
    getSecret: () => privateVar
  };
})();

แนะนำ: ใช้ const สำหรับ Function Expressions/Arrow Functions เพื่อป้องกันการ Reassign โดยไม่ได้ตั้งใจ