Introduction

This article targets beginners and it seeks to provide a little overview of how javascript works. We will be delving into the following:

• How computers run code
• Javascript Engine
• The concept of interpreters and compilers in Javascript
• JIT compilers

Let us start with a scenario;

Say, you were informed that you have a talk with a particular set of people somewhere and the great deal is that you have a concept that you are passionate about that you will like to communicate to them but the one issue is the language difference and for some weird reason they've been designed to understand a particular type of language.

You'd probably think of googling the language to learn it but what if the language is not so easy to learn and you have to communicate to them as soon as possible. For me I'd say, get an interpreter.

This can be likened to Javascript.

Like is often said,

A computer is really just a collection of on/off switches (transistors)

Our computers only understand 1s(ones) and 0s(zeros) and for us to effectively convert our javascript code into machine code we need an interpreter...thus the Javascript engine!

The Javascript Engine

Simply put, A javascript engine is a program written by programmers that executes javascript code. There are tons of javascript engines out there ranging from spider monkey, v8 engine, etc. For more, you can lookup Javascript Engines

Anybody can build their own engine but it must align to the ECMAScript standard(which is a body that governs how this is done)

Some Important pieces of the Javascript Engine

1. Parser: Say we have a javascript file that is passed to the engine, the first thing that happens is that the code is passed through a parser which performs a lexical analysis by breaking our code into chunks(or tokens) for a better understanding which is in turn converted to a tree-like form called AST(Abstract Syntax Tree)

2. AST (Abstract Syntax Tree) These token are then formed into an Abstract Syntax Tree (AST), which is an abstract syntactic structure of our source code. This is then passed down to the interpreter.

3. The Interpreter: An interpreter translates our code line by line.

4. The compiler: The compiler unlike the interpreter, runs our code ahead of time in a bid to create or build an output that can be understood by our computer.

 const sayMyName = (name, age) => {
  console.log(`My name is ${name}`);
  console.log(`I am ${age} years old`);
};

sayMyName('James', 10);

With an interpreter, the code above runs line by line to provide a result. The result an interpreter generates is called a bytecode (Not as low level as machine code)

With a compiler, the code is run ahead of time and is converted to the language our computer understands.

The Obvious question: Should we use an interpreter or a Compiler?

A little breakdown of the two:

For an interpreter, it may start up fast but the problem is that it could end up becoming slow based on how large our code grows. For a compiler, it may start up slow but eventually becomes fast because it needs only run the code once and gets an output instead of running the code line by line.

But, what if we could pick the best of the two worlds and combine it into one. This is exactly what some engineers came up. It is called the JIT (Just In Time) compilers.

To explain the JIT compiler we will consider the v8 engine(A javascript engine)

The JIT Compiler

This uses some form of profiler which kind of listens on the interpreter and notes each line of code (It also kind of caches code that has been previously run). It then passes this code to a compiler which then optimizes the code into machine code. This helps us have the best of the two because for any code previously ran, the compiler already has information about it and needs not run it again and at the end, we have an optimized code that is easily understood by our machine.

Therefore, we can say that Javascript is both an interpreted and compiled language

Note: The Javascript engine is what enables us to run Javascript on our browser. For example, Chrome uses the V8 engine. Also, Nodejs wraps the v8 engine.

Summary

Thank you for reading my article and I hope it provided you with the information you needed. I'd really appreciate your honest feedback and ways I can improve on as this is my first article.