โค้ด JavaScript ของเราบางส่วนดูรก ๆ ไปไหม หรือว่ามันดูซับซ้อนเกินไปไหม? บางทีบางส่วนก็ไม่มีอะไรม ากจะทำเป็นฟังก์ชันแยกเลยก็ดูไม่คุ้ม แต่ว่ามันดูไม่สวยงาม เราทำอะไรกับมันได้บ้าง?
มารู้จักกับ IIFE ที่อาจช่วยแก้ปัญหาโค้ดไม่สวยนี้ได้ ด้วยการประกาศฟังก์ชันแบบใช้แล้วทิ้ง ทำงานเสร็จแล้วก็หายไป ไม่ต้องมาเจอกันอีก
IIFE หรือ Immediately-invoked Function Expression แปลตรงตัวก็คือรูปแบบของฟังก์ชันที่จะถูกเรียกใช้งานทันที
หน้าตาอาจจะดูแปลก แต่ว่าให้มองเป็นว่าเราประกาศฟังก์ชันแบบไร้ชื่อขึ ้นมา เช่น function(){...} หรือ ()=>{...}
แล้วนำวงเล็บมาครอบไว้ตามด้วยวงเล็บเปิด-ปิดต่อท้ายด้านนอกสุด เพื่อเป็นการเรียกใช้งานฟังก็ชันที่ถูกครอบไว้ทันที ซึ่งก็คล้ายกับการประกาศฟังก์ชันแล้วเราเรียกใช้งานมันเองทันที แต่ว่าแบบนี้จะเขียนได้สั้นกว่า
ด้วยความที่มันก็เป็นเหมือนฟังก์ชันหนึ่ง ตัวแปรหรืออะไรต่าง ๆ ที่ประกาศไว้ด้านใน ก็จะอยู่ใน Scope ของตัว IIFE นั้นเท่านั้น ทำให้ประ กาศชื่อซ้ำก็ได้ และเมื่อหมดประโยชน์ (IIFE จบการทำงานแล้ว) ก็จะหายไปไม่อยู่ไว้ให้รกหน่วยความจำ
มาลองดูโค้ดตัวอย่างที่เอา IIFE มาช่วยได้ อย่างการที่จะแปลงตัวหนังสือเป็นอีโมจิ จากตรงนี้จะเห็นความไม่สวยงามได้อยู่หลายจุด
- ต้องประกาศตัวแปร “emoji” ไว้ก่อน แถมยังต้องประกาศเป็น let ไว้เสี่ยงโดนเปลี่ยนค่าภายหลังอีก
- ตัวแปร userAction ที่เอาไว้ใช้แค่ตรวจใน if-else เท่านั้น ถึงแม้มันจะหมดหน้าที่แล้วมันก็จะยังคาอยู่ต่อไปไม่หายไปไหน
- โค้ดโดยรวมดูรก ๆ ดูยากว่าต้องการจะทำอะไร แล้วหน้าที่ของส่วนนี้จบตรงไหน?
นำโค้ดรก ๆ เมื่อกี้มาครอบ IIFE ดู ถึงแม้จะไม่ได้เขียนสั้นลง แต่มองแว๊บแรกก็ดูเป็นระเบียบขึ้นเยอะเลย โดยจุดที่เห็นเด่น ๆ เลยก็คือ
- เห็นขอบเขตการทำงานชัดเจน ว่าการทำงานเพื่อแปลงอีโมจิจบแค่ใน IIFE นี้ และตัวแปรที่ประกาศไว้ใช้ชั่วคราว พอหมดหน้าที่ก็จะหายไป อย่างแน่นอน
- พอเป็นฟังก์ชัน เราก็สามารถใช้ return ได้ทำให้ เขียนอะไรได้สะดวกขึ้น ไม่ต้องประกาศตัวแปรไว้รอรับค่าในแต่ละกรณี
- และก็จากการที่มัน return ได้ ตัวแปร “emoji” ที่เราต้องการ ก็ประกาศเป็น const ได้เพราะว่าก็แค่รอรับค่า return จาก IIFE อย่างเดียว
ถึงแม้ส่วนใหญ่ IIFE จะพบใน JavaScript แต่ว่าก็ยังเขียนรูปแบบนี้ในภาษาอื่นได้ ยกตัวอย่างมาเป็นของ C# โดยเป็นการใช้ Anonymous Method ร่วมกับ Func ที่จะต้องมีการระบุ Return Type ไว้ด้วย เนื่องจาก C# เป็นภาษาแบบ Strongly Typed ซึ่งนอกจากนั้นการทำงานและผลลัพธ์ก็จะยังคงเป็นเช่นเดียวกับ IIFE ใน JavaScript
IIFE อาจดูน่าสนใจแต่ไม่ได้แปลว่าจะเหมาะกับการนำไปใช้ทุกที่ ถ้าเปลี่ยนแล้วรกกว่าเดิมหรือเปลี่ยนไปรกอีกแบบ นั่นหมายถึงส่วนนี้แยกออกไปคงจะดีกว่า
โดยเฉพาะการทำงานที่มีความซับซ้อน หรือเป็นส่วนที่มีโอกาสนำไปใช้ซ้ำได้ พวกนี้เหมาะกับการแยกออกไปมากกว่ากลายเป็น IIFE เพื่อ ความสะดวกของตัวเองเวลากลับมาแก้บัค และสะดวกผู้อื่นเวลามาอ่านโค้ดของเรา
เนื้อหานี้ถูกเผยแพร่ครั้งแรกในรูปแบบของโพสท์ Facebook เพื่อให้ง่ายต่อการสืบค้นจึงนำมาจัดเก็บในรูปแบบบทความด้วย