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

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay