DEV Community

Cover image for JavaScript EP2: Hoisting๐Ÿซต๐Ÿป
phatsss
phatsss

Posted on

JavaScript EP2: Hoisting๐Ÿซต๐Ÿป

Hoisting - JS Developer เบซเบผเบฒเบเบ„เบปเบ™เบเปเปˆเบ„เบปเบ‡เบ„เบธเป‰เบ™เบซเบนเบเบฑเบšเบ„เบณเบ™เบตเป‰เบขเบนเปˆเบšเปเปˆเปœเป‰เบญเบเป€เบ™เบทเปˆเบญเบ‡เบˆเบฒเบเบซเบผเบฒเบเป†เป€เบ—เบทเปˆเบญเบ—เบตเปˆเป„เบ›เบ„เบปเป‰เบ™เบงเบดเบ—เบตเปเบเป‰ error เบขเบนเปˆ google เบกเบฑเบเบˆเบฐเป€เบซเบฑเบ™เบ„เบปเบ™เบกเบฒเบšเบญเบเบงเปˆเบฒ error เบ™เบตเป‰เป€เบเบตเบ”เบˆเบฒเบ hoisting, เปเบ•เปˆ hoisting เบกเบฑเบ™เปเบกเปˆเบ™เปเบšเป‰เบซเบเบฑเบ‡เบฅเปˆเบฐ? เบ”เบฝเบงเบšเบปเบ”เบ„เบงเบฒเบกเบ™เบตเป‰เบˆเบฐเบกเบฒเบญเบฐเบ—เบดเบšเบฒเบเบงเปˆเบฒเปเบšเป‰เบญเบตเปˆเบซเบเบฑเบ‡เบ„เบท hoisting.

เบ•เบญเบ™เบ—เบตเปˆเป€เบฅเบตเปˆเบกเบ‚เบฝเบ™ JavaScript เบŠเปˆเบงเบ‡เปเบฅเบเป†เบเปเปˆเป€เบ„เบตเบเบžเปเป‰เป€เบซเบ”เบเบฒเบ™เบ—เบตเปˆเบงเปˆเบฒ variable เบšเบฒเบ‡เป‚เบ•เบกเบฑเบ™ undefined เปเบšเบšเบ‡เบปเบ‡เป†, เบ–เบทเบเป‚เบเบ™ ReferenceErrors เปƒเบชเปˆเปœเป‰เบฒ เปเบฅเบฐ เบญเบตเบเบšเบฑเบ™เบซเบฒเบญเบทเปˆเบ™เป†. Hoisting เบกเบฑเบเบ–เบทเบเบซเบผเบฒเบเบ„เบปเบ™เบญเบฐเบ—เบดเบšเบฒเบเบงเปˆเบฒเป€เบ›เบฑเบ™เบเบฒเบ™เปƒเบชเปˆเบ•เบปเบงเบ›เปˆเบฝเบ™ เปเบฅเบฐ function เป„เบงเป‰เบขเบนเปˆเป€เบ—เบดเบ‡เบชเบธเบ”เบ‚เบญเบ‡เป„เบŸเบฅเปŒ, เปเบ•เปˆเบงเปˆเบฒ เบกเบฑเบ™เปเบกเปˆเบ™เปเบšเบšเบ™เบฑเป‰เบ™เปเบ—เป‰เบšเปเปˆเบฅเปˆเบฐ? เปƒเบˆเป€เบขเบฑเบ™เบเปˆเบญเบ™เป„เบšเบฃเปŒเบญเบฑเบ™เบกเบฑเบ™เบšเปเปˆเปเบกเปˆเบ™เปเบšเบšเบ™เบฑเป‰เบ™เป€เบฅเบตเบ, เบกเบฑเบ™เบšเปเปˆเปเบกเปˆเบ™เบชเบฒเป€เบซเบ”เบ‚เบญเบ‡เบชเบดเปˆเบ‡เบ—เบตเปˆเป€เบเบตเบ”เบ‚เบถเป‰เบ™ เป€เบ–เบดเบ‡เบกเบฑเบ™เบŠเบดเป€เบšเบดเปˆเบ‡เบ„เบทเบงเปˆเบฒเบกเบฑเบ™เปœเป‰เบฒเบˆเบฐเป€เบ›เบฑเบ™เปเบšเบšเบ™เบฑเป‰เบ™เบเปเปˆเบ•เบฒเบก.

เป€เบกเบทเปˆเบญ JavaScript Engine เป€เบฅเบตเปˆเบกเป€เบฎเบฑเบ”เบงเบฝเบเบเบฑเบš script เบ—เบตเปˆเป€เบฎเบปเบฒเบ‚เบฝเบ™ เบชเบดเปˆเบ‡เบ—เบณเบญเบดเบ”เบ—เบตเปˆเบกเบฑเบ™เป€เบฎเบฑเบ”เบเปเปˆเบ„เบทเบเบฒเบ™เบ•เบฑเป‰เบ‡เบ„เปˆเบฒ memory เบชเบณเบฅเบฑเบš data เปƒเบ™ code เบ‚เบญเบ‡เป€เบฎเบปเบฒ. เบˆเบฐเบเบฑเบ‡เบšเปเปˆเบกเบตเบเบฒเบ™ execute เปƒเบ”เป†เปƒเบ™เบ‚เบฑเป‰เบ™เบ•เบญเบ™เบ™เบตเป‰เป€เบ—เบทเปˆเบญ เป€เบงเบปเป‰เบฒเบ‡เปˆเบฒเบเป†เบเปเปˆเบ„เบทเบกเบฑเบ™เป€เบ›เบฑเบ™เบžเบฝเบ‡เบเบฒเบ™เบเบฐเบเบฝเบกเบ—เบธเบเบขเปˆเบฒเบ‡เบชเบณเบฅเบฑเบšเบเบฒเบ™ execution. เบงเบดเบ—เบตเบเบฒเบ™เปƒเบ™เบเบฒเบ™ store เบชเปˆเบงเบ™เบ‚เบญเบ‡ function เปเบฅเบฐ เบ•เบปเบงเบ›เปˆเบฝเบ™เบ™เบฑเป‰เบ™เปเบ•เบเบ•เปˆเบฒเบ‡เบเบฑเบ™, function เบˆเบฐเบ–เบทเบ store เป„เบงเป‰เป‚เบ”เบเบญเป‰เบฒเบ‡เบญเบตเบ‡ function เบ—เบฑเบ‡เปเบปเบ”.
reference to the entire function

เบชเปˆเบงเบ™เบ‚เบญเบ‡เบ•เบปเบงเบ›เปˆเบฝเบ™เบˆเบฐเบกเบตเบˆเบธเบ”เบ—เบตเปˆเปเบ•เบเบ•เปˆเบฒเบ‡เบขเบนเปˆเปœเป‰เบญเบเปœเบถเปˆเบ‡เบ„เบท: เปƒเบ™ ES6+ เบˆเบฐเบกเบตเบเบฒเบ™เบ›เบฐเบเบฒเบ”เบ•เบปเบงเบ›เปˆเบฝเบ™เปเบšเบš let เปเบฅเบฐ const. เบ•เบปเบงเบ›เปˆเบฝเบ™เบ—เบตเปˆเบ›เบฐเบเบฒเบ”เบ”เป‰เบงเบ let เปเบฅเบฐ const keyword เบˆเบฐเบ–เบทเบ store เปเบšเบš uninitialized
let and const

เบ•เบปเบงเบ›เปˆเบฝเบ™เบ—เบตเปˆเบ›เบฐเบเบฒเบ”เบ”เป‰เบงเบ var keyword เบˆเบฐเบ–เบทเบ store เบ”เป‰เบงเบเบ„เปˆเบฒ default เบ„เบท undefined
var

เป€เบกเบทเปˆเบญเบ‚เบฑเป‰เบ™เบ•เบญเบ™เบ•เปˆเบฒเบ‡เป†เบ—เบตเปˆเบเปˆเบฒเบงเบกเบฒเบชเบณเป€เบฅเบฑเบ”เปเบฅเป‰เบง เป€เบฎเบปเบฒเบˆเบถเปˆเบ‡เบˆเบฐเบชเบฒเบกเบฒเบ” execute code เป„เบ”เป‰. เบกเบฒเป€เบšเบดเปˆเบ‡เบ™เบณเบเบฑเบ™เบงเปˆเบฒเบ–เป‰เบฒเป€เบฎเบปเบฒเปƒเบŠเป‰ console.log() 3 เบญเบฑเบ™เบขเบนเปˆเป€เบ—เบดเบ‡เบชเบธเบ”เบ‚เบญเบ‡เป„เบŸเบฅเปŒเบเปˆเบญเบ™เบ—เบตเปˆเป€เบฎเบปเบฒเบˆเบฐเบ›เบฐเบเบฒเบ”เบŸเบฑเบ‡เบŠเบฑเปˆเบ™ เปเบฅเบฐ เบ•เบปเบงเบ›เปˆเบฝเบ™. เป€เบงเบปเป‰เบฒเบ‡เปˆเบฒเบเบเปเปˆเบ„เบทเป€เบญเบตเป‰เบ™เปƒเบŠเป‰เบเปˆเบญเบ™เบ—เบตเปˆเบˆเบฐเบ›เบฐเบเบฒเบ”
เป€เบ™เบทเปˆเบญเบ‡เบˆเบฒเบ function เบ–เบทเบ store เป„เบงเป‰เป‚เบ”เบเบเบฒเบ™เบญเป‰เบฒเบ‡เบญเบตเบ‡เป€เบ–เบดเบ‡ code เบ—เบฑเบ‡เปเบปเบ”, เบ”เบฑเปˆเบ‡เบ™เบฑเป‰เบ™เป€เบฎเบปเบฒเบˆเบฐเป€เบซเบฑเบ™เบงเปˆเบฒเป€เบฎเบปเบฒเบชเบฒเบกเบฒเบ”เป€เบญเบตเป‰เบ™เปƒเบŠเป‰ function เบเปˆเบญเบ™เบ—เบตเปˆเป€เบฎเบปเบฒเบˆเบฐเบ›เบฐเบเบฒเบ” function.
execution phase

เป€เบกเบทเปˆเบญเป€เบฎเบปเบฒเบญเป‰เบฒเบ‡เป€เบ–เบดเบ‡เบ•เบปเบงเบ›เปˆเบฝเบ™เบ—เบตเปˆเบ›เบฐเบเบฒเบ”เบ”เป‰เบงเบ var keyword เปเบฅเป‰เบงเบ—เบณเบเบฒเบ™เป€เบญเบตเป‰เบ™เปƒเบŠเป‰เบเปˆเบญเบ™เบ—เบตเปˆเบˆเบฐเบ›เบฐเบเบฒเบ”เบ•เบปเบงเบ›เปˆเบฝเบ™, เปเบ™เปˆเบ™เบญเบ™เบงเปˆเบฒเบกเบฑเบ™เบˆเบฐเป‚เบเบ™เบ„เปˆเบฒ default เบกเบฒเปƒเบซเป‰เบ™เบฑเป‰เบ™เบเปเปˆเบ„เบท: undefined, เปเบ•เปˆเบšเบฒเบ‡เป€เบ—เบทเปˆเบญเบกเบฑเบ™เบเปเปˆเบˆเบฐเป€เบ›เบฑเบ™ unexpected. เปƒเบ™เบซเบผเบฒเบเป†เบเปเบฅเบฐเบ™เบตเบ–เป‰เบฒเบžเบปเบšเป€เบซเบ”เบเบฒเบ™เปเบšเบšเบ™เบตเป‰เปเบกเปˆเบ™เปƒเบซเป‰เบชเบฑเบ™เบ™เบดเบ–เบฒเบ™เป„เบงเป‰เบเปˆเบญเบ™เป€เบฅเบตเบเบงเปˆเบฒ: เป€เบฎเบปเบฒเบญเบฒเบ”เบˆเบฐเบฅเบทเบกเบ›เบฐเบเบฒเบ”เบ•เบปเบงเบ›เปˆเบฝเบ™เบเปˆเบญเบ™เบเบฒเบ™เป€เบญเบตเป‰เบ™เปƒเบŠเป‰เบซเบผเบทเบšเปเปˆ?
invoked var before declare

เป€เบžเบทเปˆเบญเบ›เป‰เบญเบ‡เบเบฑเบ™เบšเปเปˆเปƒเบซเป‰เบชเบฒเบกเบฒเบ”เบญเป‰เบฒเบ‡เบญเบตเบ‡เบ•เบปเบงเบ›เปˆเบฝเบ™เบ—เบตเปˆเป€เบ›เบฑเบ™ undefined เป€เบŠเบฑเปˆเบ™เบ”เบฝเบงเบเบฑเบšเบเบฒเบ™เป€เบญเบตเป‰เบ™เปƒเบŠเป‰ var keyword เบ—เบตเปˆเป€เบฎเบปเบฒเป€เบซเบฑเบ™เปƒเบ™เบ•เบปเบงเบขเปˆเบฒเบ‡. เบˆเบฐเบกเบต ReferenceError เบ–เบทเบเป‚เบเบ™เบญเบญเบเบกเบฒเป€เบกเบทเปˆเบญเปƒเบ”เบเปเปˆเบ•เบฒเบกเบ—เบตเปˆเป€เบฎเบปเบฒเบžเบฐเบเบฒเบเบฒเบกเป€เบญเบตเป‰เบ™เปƒเบŠเป‰เบ•เบปเบงเบ›เปˆเบฝเบ™เบ—เบตเปˆเป€เบ›เบฑเบ™ uninitialized. zone เบ—เบตเปˆเป€เบฎเบปเบฒเป€เบญเบตเป‰เบ™เปƒเบŠเป‰เบ•เบปเบงเบ›เปˆเบฝเบ™เบเปˆเบญเบ™เบเบฒเบ™เบ›เบฐเบเบฒเบ”เบˆเบฐเป€เบญเบตเป‰เบ™เบงเปˆเบฒ: temporal dead zone - เป€เบฎเบปเบฒเบšเปเปˆเบชเบฒเบกเบฒเบ”เบญเป‰เบฒเบ‡เบญเบตเบ‡ เบซเบผเบท เป€เบญเบตเป‰เบ™เปƒเบŠเป‰เบ•เบปเบงเบ›เปˆเบฝเบ™เบเปˆเบญเบ™เบเบฒเบ™ initialization เป„เบ”เป‰(เบฅเบงเบกเป„เบ›เป€เบ–เบดเบ‡ classes เบ™เบณ)
ReferenceError

เป€เบกเบทเปˆเบญ JavaScript Engine เป€เบฎเบฑเบ”เบงเบฝเบเบฎเบญเบ”เปเบ–เบงเบ—เบตเปˆเป€เบฎเบปเบฒเบ›เบฐเบเบฒเบ”เบ•เบปเบงเบ›เปˆเบฝเบ™เป„เบงเป‰, เบกเบฑเบ™เบˆเบฐเบ—เบณเบเบฒเบ™เบ‚เบฝเบ™เบ—เบฑเบš value เบ—เบตเปˆเบขเบนเปˆเปƒเบ™ memory เบ—เบตเปˆเป€เบ›เบฑเบ™ value เบ—เบตเปˆเป€เบฎเบปเบฒเบ‚เบฝเบ™เป„เบงเป‰เปƒเบ™ code.
overwritten

เบชเบฐเบซเบผเบธเบš:

  • function เปเบฅเบฐ variables เบˆเบฐเบ–เบทเบ store เป„เบงเป‰เปƒเบ™ memory เบชเบณเบฅเบฑเบšเบเบฒเบ™ execution เบเปˆเบญเบ™เบ—เบตเปˆเบˆเบฐเบ—เบณเบเบฒเบ™ execute code เบ‚เบญเบ‡เป€เบฎเบปเบฒ, เบ‚เบฐเบšเบงเบ™เบเบฒเบ™เบ—เบตเปˆเบงเปˆเบฒเบกเบฒเป€เบญเบตเป‰เบ™เบงเปˆเบฒ hoisting.
  • function เบˆเบฐเบ–เบทเบ store เป‚เบ”เบเบญเป‰เบฒเบ‡เบญเบตเบ‡เป€เบ–เบดเบ‡ function เบ—เบฑเบ‡เปเบปเบ”, เบชเปˆเบงเบ™เบ•เบปเบงเบ›เปˆเบฝเบ™เบ—เบตเปˆเปƒเบŠเป‰ var keyword เบˆเบฐเบ–เบทเบ store เบ”เป‰เบงเบเบ„เปˆเบฒ default เบ„เบท:โ€‹ undefined เปเบฅเบฐ เบ•เบปเบงเบ›เปˆเบฝเบ™เบ—เบตเปˆเปƒเบŠเป‰ let เปเบฅเบฐ const keyword เปเบกเปˆเบ™เบˆเบฐเบ–เบทเบ store เบ”เป‰เบงเบ uninitialized

เบญเป‰เบฒเบ‡เบญเบตเบ‡: ๐Ÿ”ฅ๐Ÿ•บ๐Ÿผ JavaScript Visualized: Hoisting

Top comments (0)