JavaScript Hoisting: สิ่งที่คุณต้องรู้

หากคุณใช้งาน JavaScript มาสักระยะหนึ่งแล้ว คุณอาจเคยได้ยินคำว่า “การยก” อันที่จริง สำหรับผู้สัมภาษณ์ แนวคิดนี้เป็นหนึ่งในแนวคิดที่พวกเขาชอบถามเพราะมันแสดงถึงระดับความเข้าใจของ JavaScript ของผู้สมัคร อย่างไรก็ตาม การยกขึ้นหมายถึงอะไรกันแน่ และมีผลกับโค้ดของคุณอย่างไร ในบทความนี้ ฉันจะอธิบายสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับสิ่งนี้และผลกระทบที่มีต่อโค้ดของคุณ

ก่อนอื่น มาดูความหมายทางภาษาของคำนี้ก่อนที่เราจะพูดถึงการใช้งานทางเทคนิคของคำนี้ต่อไป Hoisting ใช้เพื่ออ้างถึงการยกหรือดึงบางสิ่งบางอย่าง โดยปกติจะใช้เชือกหรือรอก คุณจะได้ยินข้อความเช่น“เธอยกเป้ขึ้นสะพาย” “ยกธงขึ้น” “สินค้าถูกยกขึ้นเรือ”และอื่น ๆ คำอื่น ๆ สำหรับการยกรวมถึงการยกหรือการปีนเขา

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

ตัวอย่างเช่น พิจารณารหัสต่อไปนี้:

บรรทัด var x = 10 มีสองการกระทำในนั้น:

1. การประกาศตัวแปร “var”
2. การกำหนดตัวแปร “=”

ที่น่าสนใจ ควรสังเกตว่าการยกมีผลกับการประกาศเท่านั้น ไม่ใช่การกำหนดหรือการเริ่มต้น ในตัวอย่างข้างต้น ค่าของ x ไม่ได้ถูกกำหนดเมื่อบันทึกลงในคอนโซล เนื่องจากการกำหนดค่าเป็น 10 ยังไม่เกิดขึ้น

เพื่อให้เข้าใจได้ดีขึ้น ลองมาดูกันว่าพฤติกรรมนี้แสดงโดยฟังก์ชันอย่างไร

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

ในทางกลับกัน ลองพิจารณาว่าการยกทำงานอย่างไรกับฟังก์ชันนิรนามหรือฟังก์ชันที่กำหนดให้กับตัวแปร ตัวอย่างนี้แสดงในตัวอย่างด้านล่าง:

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

สิ่งที่สำคัญพอๆ กันต่อลักษณะการทำงานของการโฮสต์ในตัวแปร JavaScript คือคำหลักสองคำคือ "let" และ "const" ซึ่งใช้สำหรับการประกาศตัวแปรเช่น "var" ค่าของตัวแปรที่ประกาศด้วย "let" หรือ "const" ไม่เหมือนกับค่าของตัวแปร "var" หากคุณพยายามเข้าถึงค่าของค่าใดค่าหนึ่งก่อนที่จะมีการประกาศ คุณจะได้รับข้อยกเว้น ReferenceError ตามที่แสดงในภาพด้านล่าง

เมื่อใช้ hoisting ข้อผิดพลาดทั่วไปอย่างหนึ่งที่นักพัฒนาจำนวนมากทำคือสันนิษฐานว่าค่าของตัวแปรนั้นถูกเตรียมใช้งานเป็นไม่ได้กำหนดเสมอ สิ่งนี้ถูกต้องสำหรับตัวแปรที่มีคีย์เวิร์ด "var" ในการประกาศเท่านั้น ความพยายามใด ๆ ในการเข้าถึงตัวแปรที่ได้รับการประกาศด้วย "let" หรือ "const" ก่อนที่การกำหนดจะเกิดขึ้นจะส่งผลให้เกิด ReferenceError แนวปฏิบัติที่ดีที่สุดในการเขียนโค้ดสมัยใหม่แนะนำอย่างยิ่งให้หลีกเลี่ยงการใช้ "var" แทน "let" และ "const" เนื่องจากให้การป้องกันที่ดีกว่าจากการเปลี่ยนแปลงตัวแปรของคุณโดยไม่ได้ตั้งใจหรือโดยไม่ได้ตั้งใจ

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