How JavaScript Works

According to Wikipedia,

JavaScript, often abbreviated as JS, is a high-level, interpreted programming language.

It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm.

• Easy to grasp syntactically, dynamic, and powerful language for designers/amateur developers
   
• Originally intended to be a client side language
   
• Powerful features from the beginning
  • First class functions
  • Prototype based inheritance

The origin

Comparison with other languages

Dynamic typing

Static typing

Interpreted

vs

JIT

vs

AOT

•  Execute instructions directly, without previously compiling a program into machine language instructions
   
• JavaScript was originally an interpreted language

Interpreted

• Longer initialization times (warmup phase)
   
• Faster in the long run as compiled functions can be reused
   
•  If it takes 500 ms to interpret a function, and 700 ms to JIT compile it, after JIT compilation, it might take only 100 ms to actually run
   
• Why was JavaScript not JIT compiled from the start?

JIT compiled

• Needs compilation before running
   
• No warmup phase
   
• Reduced runtime overhead
   
• Why is JavaScript not AOT compiled?

AOT compiled

• Parallel execution
   
• Offloading CPU intensive task to a new thread
   
• Increases complexity

Multi threaded

• One thing at a time
   
• Simple to understand

Single threaded

The JavaScript Engine

Browser

The Call Stack

The Call Stack

The Call Stack

This is exactly how stack traces are constructed when an exception is being thrown 

Bonus tip 💡

You can use console.trace() in any function to print a stack trace

Single call stack means, one task at a time

So how do asynchronous callbacks work?

Threading is hidden from you. You can call these async APIs from your code.

Visualization of asynchronous code execution

Other Web APIs, like AJAX and DOM APIs work in the same way

What the heck is setTimeout(callback, 0)?

Visualization of setTimeout(callback, 0)

setTimeout does not guarantee exact time of execution

Synchronous vs asynchronous callback with array forEach example

Rendering in browser

• Most of the browsers repaint every 16.66 ms
   
• Repaints only when needed i.e. there are changes in DOM
   
• Repaints are queued to be executed
   
• requestAnimationFrame()

• https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf
• https://www.youtube.com/watch?v=8aGhZQkoFbQ
• https://www.youtube.com/watch?v=cCOL7MC4Pl0
• https://auth0.com/blog/a-brief-history-of-javascript/
• https://github.com/leonardomso/33-js-concepts/blob/master/README.md

Learn more

Thank you