This series

  • JavaScript️ Visualization: event loop
  • JavaScript️ Visualization: enhancement
  • JavaScript️ Visualization: Scope chains
  • JavaScript️ Visualization: JS engine
  • JavaScript️ Visualization: Prototype inheritance

The body of the

JavaScript is cool (don’t @me), but how can a machine really understand the code you write? As JavaScript developers, we generally don’t have to deal with compilers ourselves. But be sure to learn the basics of a JavaScript engine and see how it can take our human-friendly JS code and turn it into something machines can understand! 🥳

| note: this article is mainly based on the Node. Js and Chromium based browsers use V8 engine.

The HTML parser encounters a script tag with a source. Code from script is loaded from the network, cache, or installed service worker. The request script is responded to as a byte stream, which is processed by the byte stream decoder! The byte stream decoder decodes the byte stream once it is downloaded.

The byte stream decoder creates tokens from the byte stream decoded. For example, 0066 decoded as f, 0075 decoded as U, 006E decoded as N, 0063 decoded as C, 0074 decoded as T, 0069 decoded as I, 006f decoded as O and 006E decoded as N followed by a space. It’s like you wrote function! These are reserved keywords in JavaScript that create tokens and send them to the parser (and pre-Parser, which I didn’t cover in the GIF, but I’ll explain later). The same happens for the rest of the byte stream.

The engine uses two parsers: a preparser and a parser. The pre-parser only checks tokens early enough to see if there is a syntax error ❌. This reduces the number of errors found in your code that the parser would otherwise find later!

If there are no errors, the parser creates a node based on the token received from the byte stream decoder. Using these nodes, it creates an abstract syntax tree or AST. 🌳

Next, it’s time to translate! The Interpreter iterates through the AST and generates bytecode based on the information contained in the AST. Once the bytecode generation is complete, the AST is removed to clear up memory space. Finally, we have something for the machine to use! 🎉

Although bytecode is fast, it can be faster. When this bytecode is run, the information is generated. It can detect whether certain behaviors occur frequently and what data types are used. Maybe you’ve called the function dozens of times: it’s time to optimize it to run faster! ♀ ♀ ️

The bytecode is sent to the Optimizing Compiler along with the generated type feedback. The optimization compiler takes bytecode and type feedback and generates highly optimized machine code from it. 🚀

JavaScript is a dynamically typed language, which means that data types can change over time. If the JavaScript engine had to check which data type a value has every time, it would be very slow.

Instead, the engine uses a technique called inline caching. It caches code in memory to return the same value with the same behavior in the future! Suppose a function is called 100 times and has returned the same value so far. It will assume that it will also return that value the 101st time you call it.

Suppose we have the following function sum, which has been called each time so far with a numeric value as an argument:

This will return the number 3! The next time it is called, it will assume that we call it again with two values.

If so, instead of a dynamic lookup, it can use the results stored in a specific memory slot that has been referenced. Otherwise, if the assumption is incorrect, it will not optimize the code and revert to the original bytecode rather than the optimized machine code.

For example, the next time we call it, we pass a string instead of a number. Since JavaScript is dynamically typed, we can do this without any errors!

This means that the number 2 will be cast to a string, and the function will return the string “12”. Returns the bytecode to perform the interpretation and updates the type feedback.

Hope this article is useful to you! 😊 Of course, THERE are many parts of the engine THAT I haven’t covered in this article (JS heap, call stack, etc.) that I might cover later! If you’re interested in the internals of JavaScript, I definitely encourage you to start doing some research on your own, V8 is open source, and there’s some good documentation on how it works behind the scenes! 🤖

V8 file | | V8 making | | Chrome University 2018: life script

The original

  • JavaScript️ Visualization: event loop
  • JavaScript️ Visualization: enhancement
  • JavaScript️ Visualization: Scope chains
  • JavaScript️ Visualization: JS engine
  • JavaScript️ Visualization: Prototype inheritance

Personal blog

Github.com/abc-club/fr…