“Discovering the Wonders of JavaScript: A Beginner’s Guide to Understanding How It Works”

Having a deep understanding of certain concepts allows us to understand code in a much better way, perform better in our job and in addition to that it’s super helpful in job interviews.

And also it can be a super fun subject to learn… So with that being said, let’s get into the details of what is javascript and how it works.

Spoiler : at its base, JavaScript is a synchronous, blocking, single-threaded language. That just means that only one operation can be in progress at a time. That’s not the entire story, though!

When you hear folks say that JavaScript is an asynchronous language, what they mean is that you can manipulate JavaScript to behave in an asynchronous way. It’s not baked in, but it’s possible!

Okayyy, that maybe overwhelming to understand. Let’s try to break it into pieces to know how and what things happens behind it.

For any piece of JavaScript code to be executed in a web browser, a lot of processes take place behind the scenes. In this article, we’ll take a look at everything that happens behind the scenes for JavaScript code to run.

Here’s a general overview of how a JS engine works:

Javascript engine workflow

Environment :

A computer, a compiler, or even a browser can’t actually ‘understand’ code that’s written in JS. If so, how does the code run?

JS always runs in a certain environment, most common ones are:

1. Browser (by far the most common)
2. Node.js (which is a runtime environment which allows you to run JS outside of the browser, usually in servers).

Engine :

So JS needs to run in a certain environment, but what exactly is in the environment?

When you write code in JS, you write it in human-readable syntax, with alphabets and numbers. As mentioned, a machine can not understand this type of code.

This is why each environment has an engine.

The JavaScript Engine is an open-source computer program whose responsibility is to execute/run JavaScript.

ECMAScript Standards are being followed by the JavaScript engines to execute the code on the browser. The role of these standards is to give a definition and specification to JavaScript engines on how they should work and what features they should have.

Here is a list of JavaScript Engines for major Internet browsers:

1. V8 — JavaScript Engine developed by Google for Chrome
2. SpiderMonkey — The JavaScript Engine used by Mozilla Firefox
3. JavaScriptCore — Developed by Apple for Safari
4. Rhino — Managed by Mozilla Foundation for Firefox
5. Chakra — A JavaScript Engine for Microsoft Edge
6. JerryScript — A JavaScript Engine employed for the Internet of Things (IoT).

All modern browsers have their own version of the JavaScript Engine. But Google’s V8 Engine is the most popular JavaScript Engine.

Parser :

The parser knows JS syntax and rules, and its job is to go through the code line by line and check if the syntax of the code is correct.

If the parser comes across an error, it stops running and sends out an error. If the code is valid, the parser generates something that’s called an Abstract Syntax Tree (or AST for short).

Abstract Syntax Tree (AST):

An AST is simply a tree representation of your code, and the main reason the engine creates an AST instead of compiling directly to a machine code is that it’s easier to convert to machine code when you have the code inside a tree data structure.

Interpreter :

The Interpreter’s job is to take the AST that has been created and transform it into an Intermediate Representation of the code (IR).

An IR is a data structure or code which represents the source code. Essentially you can think of IR as an abstraction of machine code.

There are many types of IR, a very popular among JS engines is Bytecode.

Compiler :

The compiler’s job is to take the IR which the interpreter created, which is in our case Bytecode, and transform it into a machine code with certain optimizations.

Conclusion :

how javascript engine works

1. JavaScript is a programming language that runs in specific environments such as a web browser or Node.js.
2. The JavaScript Engine is responsible for executing the code, following the ECMAScript Standards to do so.
3. The engine uses a parser to check the syntax of the code and generates an Abstract Syntax Tree (AST).
4. The Interpreter transforms the AST into an Intermediate Representation (IR), which is an abstraction of machine code.
5. The IR is eventually compiled into machine code for execution.
6. JavaScript is typically synchronous and single-threaded, but it can be manipulated to behave asynchronously.
7. Major browsers have their own version of the JavaScript Engine, with Google’s V8 Engine being the most popular.

Reference :

1. How js works
2. JavaScript Engine: All you need to know

I hope you found this article helpful. Thank you for reading! 😀

Happy Coding !