How is javascript compiled? (YDKJS Scope and Closure)

In the book “Scope and Closure” there is this paragraph:

Let’s meet the cast of characters that interact to process the program var a = 2;, so we understand their conversations that we’ll listen in on shortly:

  • Engine: responsible for start-to-finish compilation and execution of our JavaScript program.
  • Compiler: one of Engine’s friends; handles all the dirty work of parsing and code-generation (see previous section).
  • Scope: another friend of Engine; collects and maintains a look-up list of all the declared identifiers (variables), and enforces a strict set of rules as to how these are accessible to currently executing code.

This got me confused. How is javascript “compiled”? I know it is a interpreted language. Let me show you what I mean.

In C++,

  1. You write your code in the compiler.
  2. You let your compiler compile your code, a.k.a turn it into machine code.
  3. Then you hit run.

As the example gave out above, I have a few questions to ask:

  1. What is engine? Like chrome V8 engine? And is this engine in the cloud?? Or it is on your local machine, inside of chrome browser.
  2. Scope, is this scope of “global scope” and “local scope”?
  3. So the 1st 2 item above, are things you can see, the tools that are needed to compile js, one is the engine, another one is the compiler, which is translating your js code into machine code, and the last one is the set of rules in javascript.

Am I understanding these correctly?

1 Like

According to YDKJS, the JS code is compiled microseconds/milliseconds before it’s executed. If it were simply interpreted, I don’t think things like function and variable hoisting would work.

It runs in your browser.

Yes it is.

I guess so. Someone else might know better.

1 Like

What is engine? Like chrome V8 engine? And is this engine in the cloud?? Or it is on your local machine, inside of chrome browser.

A program, either included in a web browser, or standalone, or embedded in some other software like Node (Node uses the same V8 engine as Chrome. + Microsoft has a fork of the project that uses the MS Chakra engine used in Edge). It’s just a program that can interpret/execute JS code.

This got me confused. How is javascript “compiled”? I know it is a interpreted language.

JS didn’t need to be terribly fast for a long time (performance isn’t a huge concern when interpreting little scripts on a web page), so simply being interpreted was fine. Once performance did become a concern (Google Maps being obvious example), most newer engines switched to using a JIT compiler that actually compiles the code (either to intermediate byte code or directly to machine instructions). Compiled code is much faster - there’s a hit at the start as the program compiles, but after that performance is much improved. e.g. V8 has two compilers, one that runs straightaway and produces code very quickly, then an optimising compiler which recompiles certain parts of the code to make it more efficient (plus a decompiler which will reverse the compilation made by the optimising compiler if needed).

Note there are a load of tiny JS engines used for embedding in other software in which the JS is just interpreted - they need to be very lightweight so don’t bother with the beefy, complex JIT code - they’re just there to give scripting capabilities.

This is all effectively an implementation detail - you treat JS as if it’s an interpreted language, the fact it is compiled at runtime makes no difference to you actually writing the code - eg.

  1. You write your code.
  2. Then you hit run.
  3. Then the compiler compiles your code, a.k.a turn it into machine code.

Scope, is this scope of “global scope” and “local scope”?

Same as any language in this context. The compiler has to decide what is available to each part of the program according to the rules of the language. It’s going to try to convert as much as it can of the program from expressions to values, and it needs to know which expressions/values are available for all parts of the program.

So the 1st 2 item above, are things you can see, the tools that are needed to compile js, one is the engine, another one is the compiler, which is translating your js code into machine code, and the last one is the set of rules in javascript.

JS engines are programs that interpret [and compile] JS according to rules and turn that into efficient machine code in some way.

4 Likes

thanks that’s a lot of info to take in.

I think I will just understand the grand scheme of things and focus on coding 1st.

:slight_smile:

:+1: it doesn’t make any real difference in practise - you’re going to have an engine available (either browser or Node 99.9999% of the time), that engine will take your code and make it work without the visible compilation step you get in your C++.

This means it’s very fast to develop in, at the expense of safety and raw power and speed. In C++ you have types, so when you compile, the compiler will build the static environment by evaluating the types and the expressions in your code, making sure it’s correct and that it’s logical. JS kinda does this, the logical bit, but it’s a lot looser re types - it will always attempt to make your program run (even if the result is gibberish - it likes to convert between types).

1 Like