Deep Dive Into Javascript

Rauf Rahman
Jan 15 · 4 min read
Image for post
Image for post
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.

Image for post
Image for post

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

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.

Image for post
Image for post
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()

Image for post
Image for post
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.

Image for post
Image for post
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.

The Startup

Medium's largest active publication, followed by +775K people. Follow to join our community.

Rauf Rahman

Written by

Software Engineer @SAP | raufrahman.com

The Startup

Medium's largest active publication, followed by +775K people. Follow to join our community.

Rauf Rahman

Written by

Software Engineer @SAP | raufrahman.com

The Startup

Medium's largest active publication, followed by +775K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store