Deep Dive Into Javascript

Deep dive into javascript

Javascript is the only language which came top in both, the most loved and the most hated language, survey by StackOverflow. Some bizarre syntax, 10s of different versions, and 100s of frameworks. Probably the most used arguably the most popular language in 2020.

If you are a web developer and trying to do something with web applications, you already know this very well.

In a sentence:

Javascript is a high-level, single-threaded, interpreted, just-in-time compiled, prototype-based, multi-paradigm dynamic langue.

What is Javascript:

Javascript is a programming language based on ECMA 262. To understand how it works, we need to get way deep to the low level, deep! means, CPU level.

Javascript runs on the browser or server-side, it allocates RAM for runtime, to save variables and objects that refer in the code. It also needs a tread from the CPU to run the logic in code.

But as a developer, you really don't need to think about this too much unless some serious performance bug in your code. Because, Javascript is a high-level language, which means it provides layers of abstraction to sweeten the development process.

To make things more clear, you have to understand two key concepts in modern programming,

Interpreter:

is a program that executes instructions written in a high-level language.

Compiler:

is a special program that processes statements written in a particular programming language and turns them into machine language or “code” that a computer’s processor uses.

You can read this awesome article to understand the difference between them

Difference Between Compiler and Interpreter (with Comparison Chart) - Tech Differences

Javascript is an interpreted language,

This means it needs an interpreted software to read and execute the code line by line, which also makes Javascript a single-threaded programming language.

Javascript also a dynamic weakly typed language,

This means in Javascript code, there is no type definition. You don't have to define which type of variable you are using. Below example show different variable declaration between a weak typed and strongly typed language

//Javascript variable declaration
let word = "Hello World"
console.log(word)
//Java variable declaration
String word = "Hello World";
System.out.println(word);

It seems hassle-free and less writing, but the downside occurs when you have complex code-based with 100s of exported modules talking with each other.

For strongly typed javascript you can use Typescript. Which is a precompiled language.

Javascript is a multi-paradigm language,

You can design an object-oriented or functional approach with it. Another catch is, javascript is prototypal-inheritance,

This means, everything in Javascript is an object, each object holds a reference to another object, which can inherit behavior and value. This behavior makes javascript really flexible and easy to manipulate language at the same time.

This article will not be completed without mentioning ECMA.
Emca-262 (800 pages document) mentioned all details of how the javascript should lay out but did not specified, how the interpreter should work, how the memory management should work.

Those up to browser vendors to implement. In the current market two most used browser engines “Spider-monkey” from Mozilla and “V8” from Google. Both of them do something call JIT(Just in time compilation). Which do not change anything in code, but interpreted and optimize, so the browser/machine can understand.

V8 workflow

Call-stack:

It is a Stack data structure that maintains LIFO(last-in-first-out) principle.

Lets clear the concept,

function add(a, b) {
     return a + b; 
}  
function average(a, b) {
     return add(a, b) / 2;
 }  
let x = average(10, 20);

When you run the above code, the JS engine create a stack and place main() function, after that it will place average() function and at last it will stack add() and execute in a sequence of add()=>average()=>main()

js call stack

Each browser have a defined size of the call-stack, when stack size get fulled, it called StackOverflow

HEAP:

Heap is an unorganized memory pool, where all of the objects and values store.
The special thing about heap is the garbage collection model. In V8 heap automatically discard variables that programs don't need anymore.

Now one key point is missing, how the JS handles any long-running task. The answer is Event-Loop.

Event-Loop:

Event-Loop is a constant tunning process, which looking for callback functions and call-stack, whenever call-stack get empty, event-loop place next function to call-stack.

js event loop

Event-Loop enables the async behavior of js by stacking the async function at the last before main. Here is the sequence event-loop follow

1. Run sync code block
2. Run Promise and micro-task
3. Run async code block

I know it is a lot to grab in one go, take your time, usually, a normal person takes 4–6 months of consecutive learning to master any programming language.

If you need any references, feel free to ask.