เปเบ EP เบเบตเปเปเบฎเบปเบฒเบเบฐเบกเบฒเปเบงเบปเปเบฒเปเบเบดเบ JS Engine เบงเปเบฒเบกเบฑเบเปเบฎเบฑเบเบงเบฝเบเบเบฑเปเบเปเบ, เปเบเบทเปเบญเปเบซเปเปเบฎเบปเบฒเปเบซเบฑเบเบเบฒเบเบเบฐเบเบงเบเบเบฒเบเปเบเบทเปเบญเบเบซเบผเบฑเบเบเบญเบ JS เบซเบผเบฒเบเบเบถเปเบ. เปเบฎเบปเบฒเปเบเบตเบเบชเบปเบเปเบชเบเปเปเบงเปเบฒเบเบฑเบเบเบฒ machine เบกเบฑเบเปเบเบปเปเบฒเปเบ code เบเบตเปเปเบฎเบปเบฒเบเบฝเบเปเบเปเบเบฑเปเบเปเบ?. JavaScript Developer เบเปเปเบเบณเปเบเบฑเบเบเปเบญเบเบเบฑเบเบเบฒเบเบเบฑเบ compilers เบเปเบงเบเบเบปเบงเปเบญเบ, เปเบเบดเปเบเบเบฑเบเบเบฑเบเบเบฐเบเบฒเบกเบทเปเปเปเบซเบผเบฒเบเปเบเบปเบเบเปเปเบเปเปเปเบเปเบชเบปเบเปเบเปเบฅเบทเปเบญเบเบเบตเปเปเบฅเบตเบ เปเบเปเบกเบฑเบเบเบดเปเบเปเบเบฑเบเบเบฒเบเบเบตเบเปเบฒเปเบฎเบปเบฒเบเบฐเบชเบถเบเบชเบฒ เปเบฅเบฐ เบกเบตเบเบงเบฒเบกเบฎเบนเปเบเบทเปเบเบเบฒเบเบเปเบฝเบงเบเบฑเบ JavaScript Engine เปเบฅเบฐ เปเบเบดเปเบเบงเปเบฒเบกเบฑเบเบเบฐเบเบฑเบเบเบฒเบเบเบฑเบ code เบเบตเปเปเบเบฑเบ human-friendly เปเบฅเบฐ เบเปเบฝเบเปเบเบฑเบเบชเบดเปเบเบเบตเป machine เปเบเบปเปเบฒเปเบ๐.
เบเบปเบงเบขเปเบฒเบเบเบตเปเปเบเปเปเบเบเบปเบเบเบงเบฒเบกเบเบตเปเปเบกเปเบเปเบเป NodeJS เบเบตเป based on the V8 Engine เปเบฅเบฐ เปเบเป Browser เบเบตเปเปเบเบฑเบ Chromium-based.
HTML parser เบเบฐเบเบปเบย script
ย tag(<script></script>
)เบเบตเปเบกเบตเบเบฒเบเบฅเบฐเบเบธ JS source(เบญเบฒเบเบเบฐเบขเบนเปเปเบย script
ย tag เบซเบผเบท import เบกเบฒเบเบฒเบเปเบเบฅเปเบเบญเบเบเปเปเปเบเป). code เบเบตเปเบขเบนเปเปเบเบเบฑเปเบเบเบฐเบเบทเบ load เบเบฒเบเบเบธเบเปเบซเบผเปเบเบเบตเปเบกเบฒเปเบเบฑเปเบ:ย network,ย cacheย เปเบฅเบฐย service workerย เบเบตเปเบเบทเบเบเบดเบเบเบฑเปเบเปเบงเปเปเบฅเปเบง. response เบเบตเปเปเบเปเบเบฒเบ requested script เปเบกเปเบเบเบฐเบขเบนเปเปเบเบฎเบนเบเปเบเบย stream of bytesย เบเบตเปเบเบฐเบกเบตย byte stream decoderย เปเบฎเบฑเบเปเปเบฒเบเบตเปเปเบเบเบฒเบเบเบญเบเบฅเบฐเบซเบฑเบ stream of bytes เบซเบผเบฑเบเบเบฒเบเบกเบฑเบเปเบซเบผเบเบชเบณเปเบฅเบฑเบ.
![](https://laoitdev.com/wp-content/uploads/2023/04/2-1.gif)
byte stream decoder เบเบฐเบเบณเบเบฒเบเบชเปเบฒเบย tokenย เบเบถเปเบเบกเบฒเบซเบผเบฑเบเบเบฒเบเบเบตเปเบเบณเบเบฒเบเบเบญเบเบฅเบฐเบซเบฑเบ stream of bytes เบชเบณเปเบฅเบฑเบ. เบเบปเบงเบขเปเบฒเบ,ย 0066
ย เบเบณเบเบฒเบ decode เปเบเปย f
,ย 0075
ย เปเบเปย u
,ย 006e
ย เปเบเปย n
,ย 0063
ย เปเบเปย c
,ย 0074
ย เปเบเปย t
,ย 0069
ย เปเบเปย i
,ย 006f
ย เปเบเปย o
, เปเบฅเบฐย 006e
ย เปเบเปย n
ย เบเบฒเบกเบเปเบงเบ white space. เปเบเบดเปเบเบเบทเบเบฑเบเบงเปเบฒเปเบฎเบปเบฒเบเบฝเบย function
ย เปเบเบดเปเบเบเบณเบเบตเปเบเปเปเปเบเบฑเบ reserved keyword เบขเบนเปเปเบ JavaScript, เปเบเบดเปเบเบกเบฑเบเบเบฐเบชเปเบฒเบ token เบเบถเปเบเบกเบฒ เปเบฅเบฐ เบชเบปเปเบเปเบเบเบตเป parser(เปเบฅเบฐ pre-parser, เบเบฐเบญเบฐเบเบดเบเบฒเบเบเบฒเบเบซเบผเบฑเบ). เบเบฐเบเบงเบเบเบฒเบเบเบตเปเบเบปเบเบเบปเบงเบขเปเบฒเบเบกเบฒเปเบกเปเบเบเบฐเปเบเบตเบเบเบถเปเบเบเบฑเบ byte stream เบเบตเปเปเบซเบผเบทเบญเปเบเบฑเปเบเบเบฑเบ.
![](https://laoitdev.com/wp-content/uploads/2023/04/3-2.gif)
เบเบปเบง engine เบเบฐเปเบเป parser 2 เบเบปเบงเบเบท: pre-parser เปเบฅเบฐ parser. เปเบเบทเปเบญเบซเบผเบธเบเปเบงเบฅเบฒเปเบเบเบฒเบเปเบซเบผเบเปเปเบฒเปเบงเบฑเบ, engine เบเบฐเบเบฐเบเบฒเบเบฒเบกเบซเบผเบตเบเบฅเปเบฝเบเบเบฒเบ parsing code เบเบตเปเบเปเปเบเบณเปเบเบฑเบเปเบซเป. pre-parser เบเบฐ handles code เบเบตเปเบญเบฒเบเบเบฐเปเบเปเปเบเปเปเบงเป เปเบเบเบฐเบเบฐเบเบตเปเบเบปเบง parser เบเบฐ handles code เบเบตเปเบเบณเปเบเบฑเบ. เบเปเบฒเบซเบฒเบ function เบเบฒเบเบขเปเบฒเบเบเบทเบเปเบญเบตเปเบเปเบเปเบซเบผเบฑเบเบเบฒเบเบเบตเป user เบเบปเบเบเบธเปเบก,โ เบกเบฑเบเบเปเปเบเปเปเบเบณเปเบเบฑเบเบเบตเป code เบเบฐเบเบทเบ compile เปเบเบเบฑเบเบเบตเบเบฝเบเปเบเบทเปเบญเปเบซเบผเบเปเปเบฒเปเบงเบฑเบเบขเปเบฒเบเบเบฝเบง. เปเบเปเบเปเบฒเบซเบฒเบ user เบเบปเบเบเบธเปเบก เปเบฅเบฐ เบกเบตเบเบฒเบ require code เบเบฒเบเบชเปเบงเบ, เบกเบฑเบเบเบฐเบเบทเบเบชเบปเปเบเปเบ parser.
Parser เบเบฐเบเบณเบเบฒเบเบชเปเบฒเบ node เบเบฒเบก token เบเบตเปเปเบเปเบฎเบฑเบเบเบฒเบ byte stream decoder, เบเบฒเบเบเบฑเปเบเบกเบฑเบเบเบฐเบชเปเบฒเบ Abstract Syntax Tree เบซเบผเบท AST เบเปเบงเบ node เปเบซเบผเบปเปเบฒเบเบฑเปเบ ๐ฒ๐ณ.
![](https://laoitdev.com/wp-content/uploads/2023/04/4-4.gif)
เบเปเปเบกเบฒเบเบฐเปเบเบฑเบเปเปเบฒเบเบตเปเบเบญเบย interpreter, เปเบเบดเปเบ interpreter เบเบฐเบเบณเปเบเบตเบเบเบฒเบเบเปเบฒเบ AST เปเบฅเบฐ เบเบณเบเบฒเบเบชเปเบฒเบย byte codeย เปเบเบเบญเบตเบเบเบฒเบกเบเปเปเบกเบนเบเบเบตเป AST เบกเบต. เปเบกเบทเปเบญ byte code เบเบทเบเบชเปเบฒเบเบชเบณเปเบฅเบฑเบเปเบฅเปเบง, AST เบเบฐเบเบทเบเบฅเบถเบ เปเบฅเบฐ เบฅเปเบฒเบเบเบทเปเบเบเบตเปเปเปเบงเบเบเบงเบฒเบกเบเบณ(memory space) เบซเบผเบฑเบเบเบฒเบเบเบฑเปเบเปเบฎเบปเบฒเบเปเปเบกเบต byte code เบเบตเป machine เปเบเบปเปเบฒเปเบเปเบฅเปเบง ๐.
![](https://laoitdev.com/wp-content/uploads/2023/04/6-1.gif)
เปเบเบดเบ byte code เบเบฐเปเบงเบขเบนเปเบเปเปเบเบฒเบก, เปเบเปเบกเบฑเบเบเบฑเบเปเบงเบเบงเปเบฒเบเบตเปเปเบเปเบญเบตเบ. เปเบเบเบฐเบเบฐเบเบตเป byte code เบเบตเปเปเบฎเบฑเบเบงเบฝเบ, เบเปเปเบกเบนเบเบเปเบฒเบเปเบเบฐเบเบทเบ generate เบเบถเปเบ, เปเบเบดเปเบเบกเบฑเบเบเบฐเบชเบฒเบกเบฒเบ detect เปเบเปเบงเปเบฒเบเบถเบเบเบดเบเบณเปเบเปเบเบตเบเบเบถเปเบเปเบฅเบทเปเบญเบเป เปเบฅเบฐ เบเบฐเปเบเบเบเบญเบ data เบเบฐเบเบทเบเบเบณเบกเบฒเปเบเป. เบเบฒเบเปเบเบทเปเบญเปเบฎเบปเบฒเบเปเปเปเบญเบตเปเบเปเบเป function เปเบเบฑเบเบชเบดเบเปเบฎเบญเบ, เปเบเบดเปเบเปเบเบเบธเบเบเบตเปเปเบฎเบปเบฒเบเบฐเบเบณเบเบฒเบ optimize เปเบเบทเปเบญเปเบซเปเบกเบฑเบเปเบฎเบฑเบเบงเบฝเบเปเบเปเปเบงเปเบเบถเปเบ.
byte code เปเบฅเบฐ type feedback เบเบตเปเบเบทเบ generate เบเบถเปเบเปเบกเปเบเบเบฐเบเบทเบเบชเบปเปเบเปเบย optimizing compilerย เบเปเบญเบกเปเบเบฑเบ. optimizing compiler เบเบฐเบเบณเบเบฑเบ 2 เบขเปเบฒเบเบเบฑเปเบเบกเบฒเบเบณเบเบฒเบ optimized เปเบฅเบฐ generate เบญเบญเบเบกเบฒเปเบเบฑเบ machine code.
![](https://laoitdev.com/wp-content/uploads/2023/04/7-1.gif)
JavaScript เปเบเบฑเบ dynamic type language, เปเบฒเบเบเบงเบฒเบกเบงเปเบฒ type เบเบญเบ data เบชเบฒเบกเบฒเบเบเปเบฝเบเปเบเบเปเบเปเบเบฐเบซเบผเบญเบเปเบงเบฅเบฒ. เบเปเบฒเบซเบฒเบ JS Engine เบเปเบญเบเบเบงเบเบชเบญเบ data type เบขเบนเปเบเบฐเบซเบผเบญเบเปเบงเบฅเบฒ(เปเบเปเปเบเบเบฐเบเบงเบเบเบฒเบเบเบฑเบเบเบฐเบเบฒ, เบเบฒเบเปเบเป data type เปเบกเปเบเบเบฐเปเบฎเบฑเบเปเบซเปเบเบฒเบเบเบฑเบเบเบฐเบเบฒเบกเบตเบเบฐเบชเบดเบเบเบดเบเบฒเบเบซเบผเบฒเบ-เปเบเบฐเบเบณเปเบเปเบเบดเปเบ TypeScript).
เปเบเบทเปเบญเบซเบผเบธเบเปเบงเบฅเบฒเบเบตเปเปเบเปเปเบเบเบฒเบ interpret code. เปเบเบเบฐเบเบฐเบเบตเป run byte code, machine code เบเบตเปเบเบทเบ optimized เปเบฅเปเบงเบเบฐ handle เบชเบฐเปเบเบฒเบฐ case เบเบตเป engine เปเบเบตเบเปเบซเบฑเบเบกเบฒเบเปเบญเบเปเบเบปเปเบฒเบเบฑเปเบ. เบเปเบฒเปเบฎเบปเบฒเปเบเป code เบเบฒเบเบชเปเบงเบเบเบตเปเบกเบฑเบเบเบฒเบ return data type เบเบฝเบงเบเบฑเบเบเปเบณเป, machine code เบเบตเปเบเบทเบ optimized เปเบฅเปเบงเบกเบฑเบเบชเบฒเบกเบฒเบเบเบณเบกเบฒเปเบเปเปเปเปเปเบเบทเปเบญเปเบเบตเปเบกเบเบงเบฒเบกเปเบงเปเบเบเปเบเบทเปเบกเบญเบตเบ. เปเบเปเปเบเบดเบเบขเปเบฒเบเปเบเบเปเปเบเบฒเบก, เปเบเบทเปเบญเบเบเบฒเบ JavaScript เบเบทเบเบญเบญเบเปเบเบเบกเบฒเปเบซเปเปเบเบฑเบ dynamic type เบกเบฑเบเบญเบฒเบเบเบฐเบกเบตเบเบฒเบเปเบซเบเบเบฒเบเบเบตเปเบงเปเบฒ code เบเบฒเบเบชเปเบงเบเบเบตเปเบเบทเบเบฑเบเปเบเปเบกเบฑเบ return เบเบปเบเบฅเบฐ data type เบญเบญเบเบกเบฒ. เบเปเบฒเปเบเบตเบเปเบซเบเบเบฒเบเปเบเบเบเบตเปเบเบถเปเบ machine code เบเบฐเบเบณเบเบฒเบ de-optimized เปเบฅเบฐ engine เบเบฐเบเบณเบเบฒเบเบเบฑเบเปเบ interpreting เปเบเบทเปเบญ generate byte code เปเปเป.
เบชเบปเบกเบกเบธเบเบงเปเบฒเปเบฎเบปเบฒเปเบเปเปเบญเบตเปเบเปเบเปเบเบฒเบ function เปเบเบฑเบเบเบณเบเบงเบ 100 เบเบฑเปเบ เปเบฅเบฐ เบกเบฑเบเบเบฐ return เบเปเบฒเปเบเบตเบกเบกเบฒเบชเบฐเปเปเบต, เบกเบฑเบเบเบฐเบเบทเบงเปเบฒเบกเบฑเบเบเบฐเบเบณเบเบฒเบ return เบเปเบฒเปเบเบตเบกเบกเบฒเบเปเบฒเบซเบฒเบเปเบฎเบปเบฒเปเบญเบตเปเบเปเบเปเบฎเบญเบเบเบต 101.
เบเปเบฒเบเบฑเบเบเบปเบเบกเบฒเปเบเบดเปเบเบญเบตเบเบเบปเบงเบขเปเบฒเบ: เบชเบปเบกเบกเบธเบเบงเปเบฒเปเบฎเบปเบฒเบกเบต sum function เบเบฑเปเบเบเปเปเปเบเบเบตเป, เปเบเบดเปเบเบกเบฑเบเบเบฐเบเบทเบเปเบญเบตเปเบเปเบเปเบเปเบงเบเบเบฒเบเบเปเบญเบ arguments เบเบตเปเปเบเบฑเบเบเปเบฒเบเบปเบงเปเบฅเบเบเบธเบเบเบฑเปเบ:
![](https://laoitdev.com/wp-content/uploads/2023/04/8-1.webp)
เปเบ function เบเปเบฒเบเปเบเบดเบเบกเบฑเบเบเบฐ return เบเปเบฒเบเบตเปเปเบเบฑเบเบเบปเบงเปเบฅเบเบญเบญเบเบกเบฒเบเบท 3
, เบเบฑเปเบเบเปเปเปเบเบเบตเปเปเบฎเบปเบฒเปเบญเบตเปเบเปเบเปเบกเบฑเบเบเบฐเบเบทเบงเปเบฒเปเบฎเบปเบฒเบเบณเบฅเบฑเบเปเบญเบตเปเบเปเบเปเบญเบตเบเบเบฑเปเบเบเปเบงเบ arguments เบเบตเปเปเบเบฑเบเบเบปเบงเปเบฅเบ 2 เบเปเบฒ.
เบเปเบฒเบกเบฑเบเปเบเบฑเบเปเบเบเบเบฑเปเบเบเปเปเบเปเปเบเบณเปเบเบฑเบเบเปเบญเบเบเบปเปเบเบซเบฒเปเบเบ dynamic เปเบฅเบฐ เบชเบฒเบกเบฒเบ re-use machine code เบเบตเปเบเบทเบ optimized เปเบเปเปเบฅเบตเบ. เปเบเปเบเปเบฒเบเปเปเปเบเบฑเบเปเบเบเบเบฑเปเบ เบกเบฑเบเบเปเปเบเบฐ revert เปเบเปเบเบฑเบ original byte code เบเบญเบ machine code เบเบตเปเบเบทเบ optimized.
เบเบปเบงเบขเปเบฒเบ: เบเบฑเปเบเบเปเปเปเบเบเบตเปเปเบฎเบปเบฒเปเบญเบตเปเบเปเบเปเปเบฎเบปเบฒเบเบฐเบชเบปเปเบเบเปเบฒเบเบตเปเปเบเบฑเบ string เปเบเบเบเบปเบงเปเบฅเบ, เปเบเบทเปเบญเบเบเบฒเบ JavaScript เปเบเบฑเบ dynamic type เปเบฎเบปเบฒเบเบถเปเบเบชเบฒเบกเบฒเบเปเบฎเบฑเบเปเบเบเบเบตเปเปเบเปเปเบเบเบเบตเปเบเปเปเบกเบต Error เปเบเป.
![](https://laoitdev.com/wp-content/uploads/2023/04/9-3.webp)
เปเบฒเบเบเบงเบฒเบกเบงเปเบฒเปเบฅเบย 2
ย เบเบฐเบเบทเบเบเบตเบเปเบซเปเปเบเบฑเบ string เปเบฅเบฐ function เบเบฐ return เบเปเบฒย "12"
ย เบญเบญเบเบกเบฒเปเบเบ. เบเบตเปเปเบเบฑเบเปเบเบเบเบตเปเบเปเปเบเปเบญเบเบกเบฑเบเบเบฑเบเปเบ execute byte code เบเบตเปเบเบทเบ interpreted เปเบฅเปเบง เปเบฅเบฐ เบเบณเบเบฒเบ update type เบเบฑเบเปเบ.
เบญเปเบฒเบเบญเบตเบ:ย ๐โ๏ธ JavaScript Visualized: the JavaScript Engine