Advanced JavaScript Course Notes pt.1

Advanced JavaScript Course Notes pt.1

Dive deep into JavaScript, and Become one of the best 10% JavaScript developers around the world.

Before learning any programming language we need to understand some concepts, and that's our subject today. We are going to get to know what type of programming languages JavaScript is, and what's the core concepts we should know before diving deep into it.

JavaScript?

So someone asked you what is JavaScript? and you say that it's a programming language that adds interactivity or behavior to a webpage. But that doesn't seem convenient! So he asks if you can give a bit deeper definition! In this case, you can say that JavaScript is a:

High-Level, Prototype-Based Object-Oriented, Multi-Paradigm, Just-In-Time Compiled, Dynamic, Single-Threaded, Garbage-Collected Programming Language with First-Class Functions and a Non-Blocking Event Loop Concurrency Model.

Let's break down that definition to learn what each concept means.

The difference between a High-level and a Low-level programming language:

Low-level languages require you to manage the hardware resources to use them, unlike High-level languages where we don't have to manage hardware resources at all.

The only downside of High-level programs is that they will never be as fast or as optimized as Low-level programs.

What is a paradigm?

It's an approach and mindset to structuring code, which will direct your coding style and technique. The 3 principal paradigms:

  • Procedural programming (Regular programming approach)
  • Object-Oriented-Programming (OOP)
  • Functional-Programming (FP)

In JavaScript, you can use all of the 3 mentioned paradigms.

Dynamic programming languages?

It means that the data type declaration like (int, float, double, range ...etc) becomes known at the runtime, which means you don't have to define data type definitions while coding!

To know more about the other concepts, we have to know what a typical JavaScript Engine consists of.

JavaScript Engine:

In simple words, it is a program that executes JavaScript Code. Every JS Engine has a CallStack and a Heap. The CallStack is where our code is executed using Execution Context. The Heap is the part of the engine that stores all the needed Objects in the Memory.

Until now, we know where JavaScipt code is executed, but we still need to know how it's converted to Machine Code (Binary Code).

Compilation VS. Interpretation:

  • Compilation: all the program is converted at once, which then will be written into a portable file that can be executed on any computer.

Res 1.png

  • Interpretation: it runs through the source code and executes it line by line.

Res 2.png

A lot of people still think that JavaScript is still an interpreted language, but that's not true. JavaScript now is using a more modern way of compilation, which is JIT Compilation (Just-In-Time). And the reason why JavaScript is no longer an Interpreted language, is that interpretation is much slower than a compilation, and nowadays, low performance is no longer allowed!

Just-In-Time Compilation (JIT):

Instead of simple Interpretation, JavaScript Engine now uses a mix between compilation and interpretation, which is called JIT Compilation.

  • JIT Compilation: it compiles the entire source code and then executes it right away.

Res 3.png

How JIT Compilation works behind the scenes?

  • Step 1: Parsing (reading) the code In this step, the code is parsed into a data structure called Abstract Syntax Tree (AST) The code will be checked if there are some syntax errors.

  • Step 2: Compiling the AST In this step, the AST will be converted into binary code.

  • Step 3: Execution The binary code will be executed right away in the CallStack

! Keep in mind that the binary code that will be executed is not fully optimized

  • Step 4: Re-compiling the non-optimized binary code. In this step, the non-optimized will get compiled to an optimized code that will replace the first one.

The 4th operation may occur more than once as long as the executed binary code is not fully optimized

This Optimization/Execution loop is the most crucial factor that makes engines such as V8 so fast.

Recap:

At this point, you should have a better understanding of JavaScript, where it gets compiled, and how it's compiled.

I'll have to end the first part here, so be tuned for the next part, more amazing concepts are coming!