นิพจน์ฟังก์ชันเทียบกับการประกาศฟังก์ชันใน JavaScript — อะไรคือความแตกต่าง?

เรียนรู้ความแตกต่างระหว่างการประกาศฟังก์ชันและนิพจน์ฟังก์ชันใน JavaScript

นี่คือนิพจน์ฟังก์ชัน:

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

นี่คือการประกาศฟังก์ชัน:

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

การแสดงออกของฟังก์ชันและการประกาศทำได้เหมือนกัน ในทั้งสองตัวอย่างข้างต้น คุณจะเรียกพวกเขาแบบนี้ executeMe() จากนั้นพวกเขาก็รันโค้ดใดๆ ก็ตามที่อยู่ในบล็อคโค้ด {..} .

แต่มีความแตกต่างไม่ใช่ในสิ่งที่พวกเขาทำ แต่ อย่างไร พวกเขากำลังดำเนินการ — หรือมากกว่า คำสั่ง พวกเขาจะอ่านและดำเนินการใน — และนี่เป็นสิ่งสำคัญ

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

// Call to function declaration
executeMe()

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

อย่างไรก็ตาม ฟังก์ชันจะ ไม่ ทำงานได้ดี (จะทำให้เกิดข้อผิดพลาด):

// Call function
executeMe()

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

เพื่อให้เข้าใจว่าทำไมตัวอย่างแรก (การประกาศฟังก์ชัน) ถึงใช้งานได้ แต่ตัวอย่างที่สอง (นิพจน์ฟังก์ชัน) ไม่ทำงาน คุณต้องเรียนรู้สิ่งที่ การยก อยู่ใน JavaScript และจากนั้นก็จะเริ่มสมเหตุสมผล

รอก

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

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

เพื่อให้คุณสามารถเรียกและดำเนินการประกาศฟังก์ชันของคุณได้จาก ที่ใดก็ได้ ในไฟล์ JavaScript ของคุณ แม้กระทั่งก่อนที่การประกาศฟังก์ชันจะมีอยู่ในไฟล์สคริปต์ของคุณก็ตาม ทำให้การประกาศฟังก์ชันไม่ซ้ำกัน

การประกาศฟังก์ชัน

ก่อนที่จะสามารถเรียกใช้โค้ดใดๆ ได้ เบราว์เซอร์ของคุณจะโหลด (อ่าน) ไฟล์สคริปต์ JS ทั้งหมดของคุณ และเนื่องจากการประกาศฟังก์ชันจะถูกย้ายไปที่ด้านบนสุด (ยกขึ้น) ของ ลำดับการดำเนินการ รหัสของคุณถูกรันโดยล่ามตามลำดับนี้:

// 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')
}

นั่นเป็นเหตุผลที่ไม่สำคัญว่าคุณจะทำการเรียกใช้การประกาศฟังก์ชันของคุณก่อนหรือหลังที่กำหนดไว้ในไฟล์สคริปต์ของคุณ ทั้งสองวิธีใช้งานได้เพราะ JavaScript โหลดฟังก์ชัน การประกาศ . เสมอ ก่อนเรียกใช้ฟังก์ชัน โทร ต่อการประกาศฟังก์ชันเหล่านั้น

ฟังก์ชั่นนิพจน์ไม่ยก

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

วิธีนี้ใช้ไม่ได้ผล:

// Call function expression
executeMe()

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

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

สลับลำดับรหัสและใช้งานได้:

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

// Call function expression
executeMe()

รหัสด้านบนใช้งานได้เนื่องจากลำดับรหัส เบราว์เซอร์ของคุณจะอ่านบรรทัดแรก (บนลงล่าง) ด้วยตัวแปร let executeMe ที่มีนิพจน์ฟังก์ชันของคุณ - จากนั้นระบบจะขอให้ดำเนินการในภายหลังด้วย executeMe() .

คุณควรใช้อันไหน

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

ที่สำคัญยิ่งกว่านั้น หากคุณเข้าร่วมทีมที่ใช้นิพจน์ฟังก์ชัน คุณควรปฏิบัติตามสูตรของพวกเขาเพื่อให้ codebase มีความสอดคล้องกัน ไม่ว่าคุณจะชอบความชอบส่วนตัวของคุณอย่างไร

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

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