สวัสดี

ในบทความนี้ เราจะพยายามอธิบายแนวคิดของhoistingและtemporal dead zoneใน JavaScript

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

ตรงกันข้ามกับความเชื่อที่เป็นที่นิยม คำว่า hoisting ไม่ใช่คำที่กำหนดไว้ตามบรรทัดฐานในข้อกำหนด ECMAScript

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

// global scope
console.log(bar); // undefined

foo(); // "Hello, world!"

var bar = 42;

function foo() {
  console.log("Hello, world!");
}

อย่างไรก็ตาม เนื่องจากhoistingเครื่องมือ JavaScript จะย้ายการประกาศbarและfooไปที่ด้านบนสุดของขอบเขตส่วนกลางซึ่งทำให้มีลักษณะดังนี้:

// global scope
var bar;

function foo() {
  console.log("Hello, world!");
}

console.log(bar); // undefined

foo(); // "Hello, world!"

bar = 42;

ตอนนี้ เรามาพูดถึงความแตกต่างระหว่าง คำหลัก var, letและconstและความเกี่ยวข้องกันอย่างไรกับการยก

วาร์

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

// global scope
console.log(bar); // undefined <-- PROOF OF THE HOISTING
var bar = 41;
console.log(bar); // 41

function foo() { // function scope
  console.log(bar); // undefined (not 41) <-- PROOF OF THE HOISTING
  var bar = 42;
  console.log(bar); // 42
}

foo();
console.log(bar); // 41

คำ หลัก letand constถูกนำมาใช้ใน JavaScript เวอร์ชัน ECMAScript 2015 (ES6) เพื่อเป็นวิธีการประกาศตัวแปรและค่าคงที่ที่มีขอบเขตบล็อก

ตรงกันข้ามกับความเชื่อที่ได้รับความนิยมคำหลักletand นั้นอาจใช้การชักจูงconst

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

// global scope
console.log(bar); // ReferenceError
let bar = 42;
// global scope
console.log(bar); // ReferenceError
const bar = 42;

การประกาศที่ทำด้วยlet คำสำคัญ และconst นั้นอาจถูกยกขึ้น (กล่าวคือ พวกมันถูกย้ายไปที่ด้านบนสุดของขอบเขตที่เกี่ยวข้อง (โกลบอลหรือบล็อค))แต่ถูกกล่าวว่าอยู่ในเขตตายชั่วคราว (TDZ)ซึ่งหมายความว่าความพยายามใด ๆ ในการเข้าถึงพวกมันจะ ส่งผลให้เกิดข้อผิดพลาดในการอ้างอิง

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

// global scope
let bar = 41;
console.log(bar); // 41

if (true) { // block scope
 console.log(bar); // ReferenceError (not 41) <-- PROOF OF THE HOISTING / TDZ
 let bar = 42;
 console.log(bar); // 42
}

console.log(bar); // 41
// global scope
const bar = 41;
console.log(bar); // 41

if (true) { // block scope
 console.log(bar); // ReferenceError (not 41) <-- PROOF OF THE HOISTING / TDZ
 const bar = 42;
 console.log(bar); // 42
}

console.log(bar); // 41

ในแบบฝึกหัด ลองลบการประกาศตัวแปรในifบล็อก barตอนนี้คุณสามารถเข้าถึง ตัวแปรที่กำหนดขอบเขตทั่วโลก ได้หรือไม่

โดยสรุปแล้ว ในระหว่างการสัมภาษณ์ครั้งต่อไปของคุณ เมื่อคุณถูกถามคำถามว่า “ปล่อยให้และถูกชักรอกหรือไม่”คุณสามารถพูดได้ว่า:

การประกาศที่ทำด้วยคำหลัก the letและconstจะถูกยกขึ้นอย่างมีประสิทธิภาพ แต่ด้วยข้อจำกัดชั่วคราวของเดดโซน (เช่น เอ็นจิ้น JavaScript รับรู้ถึงตัวแปร แต่ไม่สามารถใช้งานได้จนกว่าจะมีการประกาศ) นอกจากนี้ ชั้นเรียนยังมีรูปแบบการชักรอกแบบเดียวกันมากกว่าletและconst