Truong NT

Back to all blogs

How to understand JavaScript concepts better

April 11th, 2024 - 2 min read

After a few years of working with JavaScript (JS), I've realized that to truly understand a JavaScript concept, we often need to understand many other concepts in advance, because they are relatable and understanding a concept requires the knowledge of others.

Here is my thought on the order of concepts we should follow:

ECMAScript (ES) -> JS Engine -> JS Run Time -> Transpiler -> Event Loop -> CommonJS, ESModule -> Bundler -> Frontend Tool.

JS concepts

What are inside JS Run Time

Some notes to take away (We will dive deeper in following blogs):

  • ECMAscript is a standard for scripting languages, not a language itself.
  • JS is an implementation of ECMAscript.
  • JS Engine (like Google's V8 engine) can interpret JS code and then execute it. JS Engines were mere interpreters, but modern JS Engines nowadays use JIT (just-in-time) compilation (compile all JS code at runtime and execute instead of compiling code in advance) to improve performance.
  • JS Run Time is where the JS Engine runs JS code. It can be Chrome, Firefox, NodeJS,... JS Run Time contains a JS Engine, additional APIs (web APIs), and Event Loop mechanism.
  • If ECMAscript standard adds new features, new features will be adopted by Chrome, Firefox, NodeJS,... But the adoption takes time, Transpiler (Babel, SWC) comes to transpile code into lower ECMAscript standard version, so code can be run in as many browsers as possible.
  • Event Loop mechanism allows the callback of an async task to be pushed into the call stack and executed, interacts with Microtask Queue (Job Queue, Promise Queue), and Macrotask Queue (Task Queue).
  • CommonJS is the original standard on how we can import JS code from another JS file (module).
  • EsModule is another standard on how we can import JS code from another JS file. But EsModule allows tree shaking feature, which means if we use only 1 method from the imported module, the other methods inside the imported module are not included in the bundled code.
  • Bundler (Webpack, EsBuild, Rollup) bundles our source code into code that the host environment (browser, server) can understand and execute.
  • Frontend Tool (Vite, Create React App) contains a bundler (for Production build) and a development server.