JavaScript IIFE Design Pattern

IIFE (Immediately Invokable Function Expression) คือ คอนเซปที่สำคัญใน javascript มันเป็นรูปแบบการออกแบบที่ใช้กันทั่วไป ซึ่งใช้ในการครอบชุดของตัวแปรและฟังก์ชั่นที่ไม่สามารถเข้าถึงได้จากภายนอก

โดยมันเป็น Anonymous Function ซึ่งครอบด้วยวงเล็บและทำงานทันที

(function(){
  ...Some thing
})();

Anonymous Function คือฟังก์ชันแบบไม่ระบุชื่อของฟังก์ชัน

ข้อดีของ IIFE คือ ตัวแปรและฟังก์ชั่นที่ถูกประกาศด้านในจะไม่ได้สามารถเข้าถึงได้จากภายนอก จึงช่วยป้องกันเรื่องความซ้ำซ้อนกับตัวแปร Global และยังช่วยให้จัดการหน่วยความจำได้อย่างมีประสิทธิภาพอีกด้วย

เพื่อให้เข้าใจแนวคิดของ IIFE เราต้องเข้าใจถึงความแตกต่างของ 2 แบบนี้ก่อน

1. Function declaration
2. Function expression

1. Function declaration

การประกาศฟังก์ชั่นที่ขึ้นต้นด้วยคำว่า “function” โดยข้อดีของ function declaration ที่ได้เปรียบ function expression คือสามารถเรียกใช้งานก่อนการประกาศฟังก์ชั่นได้ พฤติกรรมลักษณะนี้เรียกว่า hoisting คือตัวแปรจะถูกนำไปไว้บนสุดของ scopeโดย Compiler ซึ่งไม่ว่ามันจะถูกประกาศที่ไหนก็ตามของโปรแกรมมันจะถูกนำไปไว้บนสุดของ Function Scope หรือ Global Scope เสมอ

// เรียกใช้งาน
DefFunction();
// ประกาศฟังก์ชั่น
function DefFunction(){
   alert(“This is the function Definition”);
}

คอนเซป Hoisting ไม่มีใน function expression

2. Function Expression

การประกาศฟังก์ชั่นที่ไม่ได้ขึ้นต้นด้วยคำว่า “function” โดยสามารถประกาศฟังก์ชั่นเก็บในตัวแปรได้

// ประกาศฟังก์ชั่น
const expressionFunction = function(){
   alert(“This is function Expression”);
};
// เรียกใช้งาน
expressionFunction()

จากตัวอย่างด้านบนคือ มีการประกาศฟังก์ชั่นเก็บในตัวแปรชื่อ expressionFunction สามารถเรียกใช้ได้โดย ใช้ชื่อตัวแปรแล้วตามด้วย ()

แล้ว IIFE คืออะไรล่ะ?

IIFE (Immediately Invoked Function Expression)

การประกาศฟังก์ชั่นที่ไม่ได้ขึ้นต้นด้วยคำว่า “function” และทำงานทันทีที่ถูกประกาศ จะเรียกใช้ครั้งเดียวแล้วคืน memory ทันที ซึ่งเป็นรูปแบบของ IIFE Design Pattern โดยจะใช้สำหรับครอบชุดของตัวแปรและฟังก์ชั่นเอาไว้ จะไม่สามารถเข้าถึงตัวแปรและฟังก์ชั่นจากภายนอกได้

(function(){
     alert(“This is function expression IIFE”);
})();

จากโค้ดด้านบนเมื่อมีการรันแล้วจะมีเหตุการณ์ต่อไปนี้เกิดขึ้น

1. สร้างฟังก์ชั่น (instance)
2. ประมวลผลฟังก์ชั่น (executed)
3. ทำลายฟังก์ชั่น (discarded)

ตัวแปรและฟังก์ชั่นที่ประกาศในขอบเขตของ IIFE จะใช้งานได้เมื่อมีการประมวลผล (executed) จึงทำให้การจัดการหน่วยความจำมีประสิทธิภาพ

References

• JavaScript IIFE Design Pattern