สมมติว่ามีโค้ดสนิปเพทตัวอย่าง และเราต้องบอกผลลัพธ์ที่เป็นไปได้พร้อมอธิบาย
var name = 'Zakir';
(() => {
name = 'Rahul';
return;
console.log(name);
function name(){
let lastName = 'Singh';
}
})();
console.log(name);
มาวิเคราะห์ทีละบรรทัดด้วยวิธีง่ายๆ
1 → 'Zakir' ถูกเก็บในตัวแปร name
3 → เราเข้าสู่ฟังก์ชันนิรนามที่ทำงานด้วยตัวเอง
4 → ตัวแปร name ถูกกำหนดค่าใหม่เป็น 'Rahul'
5 → พบคำสั่ง return จึงออกจากฟังก์ชัน
15 → พิมพ์ตัวแปร name ซึ่งค่าปัจจุบันคือ 'Rahul'
ดังนั้น ผลลัพธ์สุดท้ายจะเป็น
Rahul
แต่น่าเสียดายว่ามัน ผิด มาวิเคราะห์อีกครั้ง โดยคำนึงถึงแนวคิด Variable และ Function Hoisting (การยกตัวแปรและฟังก์ชันขึ้นบน)
1 → 'Zakir' ถูกเก็บในตัวแปร name
3 → เราเข้าสู่ฟังก์ชันนิรนามที่ทำงานด้วยตัวเอง
เมื่อเข้าสู่ฟังก์ชัน Function Hoisting ทำงาน ฟังก์ชัน name() ที่ประกาศอยู่ล่างสุดของฟังก์ชันนิรนาม ถูกยกขึ้นไปด้านบนสุดของฟังก์ชันนิรนาม ณ สถานะกลาง โค้ดจะกลายเป็นแบบนี้
ตัวอย่าง
let name = 'Zakir';
(() => {
let name;
name = 'Rahul';
return;
console.log(name);
name = function(){
let lastName = 'Singh';
}
})();
console.log(name);
สังเกตว่าเมื่อตัวแปร/ฟังก์ชันถูกยกขึ้นไปด้านบนของขอบเขต มันจะถูก ประกาศ (declared) และสร้างขึ้น (initialized) แต่การกำหนดค่าเริ่มต้น (initialization) จะเกิดขึ้นที่ตำแหน่งจริงของมัน ที่ด้านบนมันคือ undefined แต่มัน มีอยู่แล้ว
ดังนั้น เมื่อตัวแปร name ถูกกำหนดค่าใหม่ มันคือตัวแปร name ท้องถิ่น (local) ที่ได้รับค่าใหม่ ไม่ใช่ตัวแปร глобอล (global) หลังจากนี้เราออกจากฟังก์ชันนิรนาม และพิมพ์ตัวแปร name โกลบอล ซึ่งยังคงเก็บ 'Zakir' อยู่ ดังนั้น ผลลัพธ์จะเป็น
ผลลัพธ์
Zakir
