Function Expressions vs Function Declarations ใน JavaScript — ต่างกันอย่างไร?

เรียนรู้ความแตกต่างระหว่าง function declarations และ function expressions ใน JavaScript

นี่คือ function expression:

// Function expression let excuteMe = function () { console.log('Function Expression') }

นี่คือ function declaration:

// Function declaration function excuteMe() { console.log('Function Declaration') }

Function expressions และ declarations ทำงานเหมือนกันประมาณ เนื่องจากในทั้งสองตัวอย่างข้างบน คุณจะเรียกพวกมันแบบนี้ executeMe() และพวกมันจะรันโค้ดภายในบล็อกโค้ด {..} ของพวกมัน

แตมีความแตกต่าง ไม่ใช่ในสิ่งที่พวกมันทำ แต่ใน วิธี ที่พวกมันถูก execute — หรือโดยเฉพาะ ลำดับ ที่ถูกอ่านและ execute — และสิ่งนี้สำคัญ

ฟังก์ชันนี้จะทำงานได้ดี:

// Call function declaration executeMe() // Function declaration function excuteMe() { console.log('Function Declaration') }

อย่างไรก็ตาม ฟังก์ชันนี้จะ ไม่ ทำงานได้ดี (จะโยน error):

// Call function executeMe() // Function expression let excuteMe = function () { console.log('Function Expression') }

เพื่อเข้าใจว่าทำไมตัวอย่างแรก (function declaration) ทำงานได้ แต่ตัวอย่างที่สอง (function expression) ไม่ได้ คุณต้องเรียนรู้ว่า hoisting ใน JavaScript คืออะไร แล้วมันจะเริ่มทำความเข้าใจ

Hoisting

ใน JavaScript โค้ดถูก execute จากบนลงล่าง ปกติคุณสามารถใช้ตัวแปรได้หลังจาก declaration ในไฟล์สคริปต์ (ลำดับ) อย่างไรก็ตาม function declarations จะถูก hoisted (ยกขึ้นไปด้านบน) โดยเว็บเบราว์เซอร์ ก่อนที่โค้ดจะถูก execute

Hoisting หมายถึง ตัวแปลโค้ดของเบราว์เซอร์ของคุณ เสมอ รู้จัก (อ่านแล้ว) function declarations ของคุณ ก่อนที่จะถูกเรียก (บอกให้ execute)

ดังนั้นคุณสามารถเรียกและ execute function declaration ของคุณจาก ที่ใดก็ได้ ในไฟล์ JavaScript ของคุณ แม้จะก่อนที่ function declaration จะมีอยู่จริงในไฟล์สคริปต์ (ลำดับ) นี่ทำให้ function declarations โดดเด่น

Function declarations

ก่อนที่โค้ดจะรันได้ เบราว์เซอร์จะโหลด (อ่าน) ไฟล์ JS script ทั้งหมดของคุณ และเนื่องจาก function declarations ถูกย้ายขึ้นบน (hoisted) ของ ลำดับการ execute โค้ดของคุณจริงๆ แล้วถูก execute ในลำดับนี้โดย interpreter:

// 1. Function declaration function excuteMe() { console.log('Function Declaration') } // 2. Call to function declaration executeMe()

แม้โค้ดของคุณจะเขียนในไฟล์สคริปต์ในลำดับตรงข้าม:

// Call to function declaration executeMe() // Function declaration function excuteMe() { console.log('Function Declaration') }

นั่นคือเหตุผลที่ไม่สำคัญว่า คุณวางการเรียก function declaration ก่อนหรือหลังมันถูก define ในไฟล์สคริปต์ ทั้งสองวิธีจะทำงาน เพราะ JavaScript เสมอโหลด function declarations ก่อนที่จะรัน function calls ไปยัง function declarations เหล่านั้น

Function Expressions ไม่ hoist

Function expressions ไม่ถูก hoisted (ไม่อ่านก่อน) Function expressions ถูกอ่านเมื่อ interpreter ถึงบรรทัดโค้ดนั้นในไฟล์สคริปต์ของคุณ ดังนั้นถ้า function expression ของคุณมีอยู่จริง หลัง function call (ลำดับ) ตัวแปล JavaScript ที่รันในเบราว์เซอร์ของคุณไม่สามารถ execute มันได้

ดังนั้นนี้จะ ไม่ ทำงาน:

// Call function expression executeMe() // Function expression let excuteMe = function () { console.log('Function Expression') }

โค้ดด้านบนจะให้ error เพราะคุณพยายามรันฟังก์ชัน (executeMe()) ก่อนที่ตัวแปลโค้ดของเบราว์เซอร์จะรู้จัก (อ่าน) เกี่ยวกับการมีอยู่ของ function expression

สลับลำดับโค้ด และมันจะทำงาน:

// Function expression let excuteMe = function () { console.log('Function Expression') } // Call function expression executeMe()

โค้ดด้านบนทำงานได้เพราะลำดับโค้ด เบราว์เซอร์จะอ่านบรรทัดแรก (บนลงล่าง) ที่มีตัวแปร let executeMe ที่มี function expression — แล้วจึงถูกขอให้ execute หลังจากนั้นด้วย executeMe()

ควรใช้ตัวไหน?

สิ่งสำคัญไม่ใช่ว่าคุณใช้ function declarations หรือ function expressions ไม่มีอะไรจะทำให้คุณประสบความสำเร็จหรือล้มเหลวในอาชีพ การ consistent (สอดคล้อง) สำคัญกว่ามาก เลือกสไตล์หนึ่ง และมุ่งมั่นอยู่กับมัน อย่างน้อยภายในโปรเจกต์เดียวกัน

สำคัญกว่านั้น หากคุณเข้าร่วมทีมที่ใช้ function expressions แล้ว คุณควรทำตามสูตรของพวกเขาเพื่อรักษาความสอดคล้องของโค้ดเบส ไม่ว่าความชอบส่วนตัวจะเป็นอย่างไร

เหตุผลดีหนึ่งสำหรับการใช้ function expressions คือ พวกมันบังคับให้คุณใช้โครงสร้างโค้ดที่เข้มงวดกว่า ทำให้โค้ดของคุณคาดเดาได้มากขึ้น Function declarations ยอมรับได้ง่ายกว่า เพราะคุณเรียกได้จากที่ไหนก็ได้ในสคริปต์ และดังนั้น อาจ นำไปสู่โครงสร้างโค้ดที่ไม่สอดคล้อง โดยเฉพาะถ้ามีนักพัฒนาหลายคนทำงานบนโปรเจกต์เดียวกัน

เหตุผลดี (debatable) สำหรับการใช้ function declarations คือ ถ้าคุณมีฟังก์ชันบางฟังก์ชันที่เรียกฟังก์ชันอื่น แต่คุณสับสนเรื่องลำดับ และไม่สามารถทำให้ function expressions execute ได้