How Does JavaScript Work Behind The Scenes? A High Level Overview

How Does JavaScript Work Behind The Scenes? A High Level Overview

Table of contents

What is a good definition of JavaScript? A good definition is that JavaScript is a high-level, object-oriented, multi-paradigm, instantly interpreted, dynamic, single-threaded, garbage-collected programming language with first-class functions and a non-blocking event loop concurrency model.

What does all of that technical jargon mean?

Let us take these characteristics one by one.

CHARACTERISTICS

  1. HIGH-LEVEL: Now, every program on your computer needs some hardware and CPU to work. If we look at a language like C which is a low-level language, you would have to manually allocate memories in your PC to create a variable, but for a high-level language like JavaScript, you would not need to do that. JavaScript has abstractions that handle memory allocation without a developer knowing anything about it.

  2. GARBAGE-COLLECTION: This is a tool (an algorithm) that takes memory management as discussed in the first point away from developers. It removes old, unused objects from the computer memory to unclog it from unnecessary stuff.

  3. INSTANTLY INTERPRETED: Computers only understand binary digits (0s and 1s) which are known as machine code. We all know those are impractical to write when coding, so we write human-readable machine code, that is, your regular programming language syntax. This is then transpiled to machine code and this step is known as COMPILING or INTERPRETING.

  4. MULTI-PARADIGM: In programming, a paradigm is an approach and overall mindset of structuring our code and this dictates our coding style and technique in a project. There are three paradigms of programming in JavaScript: i. Procedural Programming ii. Object-oriented Programming iii. Functional Programming

  • Procedural Programming is simply linearly organizing the code with some functions here and there which is the most regular way developers write their JavaScript code.

  • Object-oriented Programming: is a prototype object-oriented approach, that is, almost everything in JavaScript is an object, except primitive values like Numbers, Strings and so on. Have you ever wondered why we can create an array and use the pop method on it? It is because of prototypal inheritance. We create arrays from blueprints (or a template) and this is called the PROTOTYPE. This prototype contains all the array methods and the arrays in our code inherit these methods so we can use them on the arrays. This is OOP oversimplified.

Paradigms can also be imperative or declarative. Many other languages are either ONLY PROCEDURAL or ONLY OBJECT-ORIENTED or ONLY FUNCTIONAL, but JavaScript contains all three paradigms.

  1. FIRST-CLASS FUNCTIONS: What does this mean? It means functions are treated like regular variables in JavaScript hence, we can pass functions into other functions and even return a function from a function. This allows us to write the FUNCTIONAL PROGRAMMING paradigm. Take a look at this
const btn = document.querySelector("btn");

const checkConsole = () =>{
   console.log("Console checked!");
}

btn.addEventListener("click", checkConsole);

We fire the checkConsole() function from inside the addEventListener() function when the button is clicked. Not all programming languages have first class functions. JavaScript has it.

6. IT IS A DYNAMIC LANGUAGE: This simply means it is dynamically typed. In JavaScript, we do not assign data types to variables. However, a superset of JavaScript, which is TypeScript, gives us the ability to do that. Back to JavaScript, the data types of our variables become known when the JavaScript engine executes our code. The data type of variables can be changed when we reassign variables. This is summarily what it means for a programming language to be dynamically-typed.

7. SINGLE-THREADED AND NON-BLOCKING EVENT LOOP CONCURRENCY MODEL: This is simply a fancy way of describing how JavaScript handles multiple tasks happening at the same time. Why do we need to understand this term? Simply because JavaScript runs a single thread, that is, it can only do one thing at a time, but we somehow need JavaScript to handle multiple tasks at the same time. In computing, a THREAD is a set of instructions that is executed in the computer’s CPU so basically the Thread is where our code is actually executed in the machine’s processor.

Look at this scenario, how would we handle a data fetch from a remote server that could take some time? Does this not mean that it may block the single thread where the code is running? We would not want this to happen. We would want some type of non-blocking behavior and how do we achieve this? We achieve this behavior by using the EVENT LOOP. This Event Loop takes long running tasks and executes them in the background and then puts them back in the main thread once they are finished so as not to prevent other instantaneous tasks from being executed.

I will write more about the Event Loop in another article to give more clarity.

See you there!