DEV Community: David Olaleye

How JavaScript Works Behind The Scenes Part 2

David Olaleye — Thu, 08 Sep 2022 01:02:08 +0000

👋 Hello guys! What if I told you console.log() is not a part of JavaScript? 😲 or that setTimeout() or alert() aren't part of JavaScript as well? 🤯 I can see the gape in your mouth and the askance in your countenance at the moment which is understandable, that was how I felt as well when I initially realized it.

This article is a sequel to part 1 of the workings of the JavaScript engine.

We will be talking about the non-blocking and the asynchronous part of JavaScript, I mean we will be looking behind the scenes to see how JavaScript which is a synchronous single-threaded language runs asynchronous operations.

From the previous article, we saw how JavaScript runs our code in a synchronous manner from top to bottom. This is because JavaScript has only one call stack which it uses to execute the code.

Imagine we had to load our tweets to the UI (user interface) in a synchronous manner, the JavaScript engine will read and parse the code line by line and when it gets to the line of the tweet request, the page will be non-responsive to clicks because we have to wait to get the data from an external source before other lines of code can resume execution. That doesn't seem like a very good user experience, right?

The image above is a pictorial representation of the JavaScript run-time environment. From our previous article, we can identify the Call Stack and the Memory heap and their functions in running our code synchronously (line by line, top to bottom). The other parts are the:

Web APIs

Callback Queue

Event Loop

We will run a short example below by simulating an asynchronous code execution with the setTimeout() function.

console.log("first");

console.log("second");

function printName() {
    console.log("My name is David");
}

setTimeout(printName, 2000);

console.log("End of the program");

Judging by our synchronous programming knowledge, in what order do you think the code above will be executed?

let's take this step by step.

first of we are in the Global Execution Context (window environment), and our code will be read from top to bottom in order to allocate memory to variables and function bodies in the Memory Allocation Phase

function printName() {....} would be stored in a key: value pair with the function name printName as the key and undefined as the value. Now the Code Execution phase. console.log("first") being a function invocation will be pushed on the Call stack and a Functional Execution Context will be created.

The string value first would be logged to the screen, the console would be popped off the Call stack, and that function execution context would be gone.

console.log("second") would go through the same process of getting pushed to the Call stack and also creating a Functional Execution Context and log the string value second to the screen, the function will be popped off the call stack and the function execution context gone.

We will skip the function printName() {....} line because it hasn't been invoked and we do not have access to the gate { }

Now something interesting is happening, we have a setTimeout() function with a callback function and a timer inside of it.

from our rudimentary knowledge of the JavaScript engine and how it works, we know that the JavaScript engine does not have a timer attached to it, which means that the JavaScript engine itself is not equipped to schedule the execution of operations.

This is where the Web APIs, Callback queue, and the Event loop comes in. Now back to the first statement of this article, console.log(), setTimeout() are part of the Web API that helps us in executing asynchronous operations in JavaScript

This makes up the JavaScript run-time environment in the Web API, we have a timer that helps in scheduling executions of function that is measured in milliseconds.

So setTimeout(printName, 2000) means execute the printName function in 2000 miliseconds (2 seconds) BUT continue running the other code in our program.

This is where the non-blocking part comes in. Take 2 seconds to store the printName function in the Web API land but in the meantime, DO NOT BLOCK THE THREAD OF EXECUTION in our program because JavaScript doesn't wait for anyone.

So the question now is where is printName() sent off to? and how do we get our result back into the *JavaScript land

Hence the behavior below

setTimeout() itself being a function is also pushed to the Call stack and a function execution context is created but it's immediately shipped to the Web API environment with the timer attached to it, meanwhile, our code continues to run in JavaScript land nonetheless. Immediately after the timer is exhausted, the function printName is pushed onto the Callback queue.

The Callback queue unlike the Call stack has a data structure of FIFO First in First out. It is a queue, just like a conventional queue at the store, it's on a first-come, first-served basis.

So function printName is queued for execution in the Web API land (callback queue) looking to get back into JavaScript land. So how does this transition occur?

This is where the Event Loop comes into action to save the day. The loop has only one job and this job is to monitor the call stack to see if there is any function waiting to be executed.

Let's say we had 100 lines of code after our setTimeout() function, as long as they are synchronous, JavaScript will keep executing them allocating memory, pushing to the call stack, and creating functional execution context (which is its major job).

Immediately after the call stack is empty, the Event loop will keep monitoring to check if we have any function in the call stack and if we have any function in the callback queue, if the stack is empty, the function in the queue will be pushed to the call stack.

Which in our case is the function printName and we will go through the same process of creating a functional execution contest and then log the string value My name is David to the console. Which explains the behavior above.

Now you might ask, What if we set our timer to 0?, will it change the behavior of our code? let's see that in action.

console.log("first");

console.log("second");

function printName() {
    console.log("My name is David");
}

setTimeout(printName, 0);

console.log("End of the program");

Voila! It doesn't matter, right? we will still go through the same Web API --> callback queue --> event loop --> call stack process, only this time with 0 milliseconds timer in the web API land. So if we had hundreds or thousands of lines of synchronous code to run, JavaScript will wait for no one until it's done with its tasks.

I know this can be a lot to take in, it took me a while as well. I do hope you've got some introductory insight 💡 into how JavaScript is a synchronous single-threaded language that can be non-blocking.

Thank you for your time, and good luck in your journey. Remember, it is a marathon and not a sprint.

I will appreciate your feedback through Twitter
GitHub linkedin

How Javascript Works Behind The Scenes part 1

David Olaleye — Thu, 01 Sep 2022 08:34:06 +0000

Javascript Is A Synchronous

Single-Threaded Language

That Can Be Non-Blocking.

👋 This is the first part of an introductory article on how Javascript executes our code behind the scenes. If you have been familiar with javascript for a while (or not), you would most likely have come across the statement above and if you haven't, consider yourself informed 😎.

Personally, it took me a while to wrap my head around the single-threaded and non-blocking concept of Javascript as a programming language 😕. To fully understand how codes are being executed, you need to understand how Javascript was designed to run.

This will greatly help in fixing bugs, writing cleaner and easy-to-understand code, and also help new developers in their development journey. I will try as much as possible to simplify the concepts in this article to be easily understood. You might need to refer to it over again for it to stick, all you need is a heart willing to learn and a smile on your face 🙂

What is a program?

A program has to do 2 things.

Allocate Memory
Parse and Execute

Allocate memory : This means that a program should be able to store values as variables.

var variable = "value"

Parse and execute: A program should be able to run commands passed to it, this includes executing functions and other operations based on the values in the memory.

function printValue(a) {
    console.log(a);
}
printValue(variable) // value

Javascript can effectively run these operations because of the Javascript engine, and in the Google Chrome browser, it's called the V8 engine. The V8 engine reads the code we write and changes it to machine-executable instructions for the browser which then adds functionality to our page.

The Javascript engine has 2 major parts which are:

Memory Heap
Call Stack

Memory heap: This is where the memory allocation occurs.
Call stack: This is where our codes are executed and it also shows where we are in the program.

Javascript being a single-threaded language simply means it has just one Call stack used in executing the instructions in the program. The Call stack has a FILO First in Last Out structure of execution. Since Javascript is single-threaded, it means it reads our code line by line in a specific order (from top to bottom).

If you have had some experience with javascript you might begin to wonder If Javascript is a synchronous single-threaded language, how then do we perform asynchronous operations?

Though that's presently out of the scope of this part, performing asynchronous operations is possible due to the web API that's part of the browser which makes up the Javascript Run-Time Environment. We will talk more about this in the sequel.

Every execution of code in Javascript occurs in an Execution Context

The Global Execution Context (window)
The Functional Execution Context.

The Global Execution Context is the first context that is created immediately after the page is loaded even before any line of code is run.

var name = "David";

the variable name is parsed and stored on the window Object in key: value pair.

name is added to the window Object

function myName() {
    alert("My name is David");
}

we can also see that function name is on the window object in a key: value pair.

The Functional Execution Contest is only created when a function is invoked or called by ().

 function myName() {
    debugger;
   var name = "David";
    alert(`My name is ${name}`)
}

myName(); //My name is David

By putting a debugger in our function body, we're able to pause the function execution and step over at will to see the local section and the Call stack in our browser.

name is a local variable to the function myName and it won't be on the Global Execution Context which is the Window.

We can see in the highlighted part that immediately after the myName function was invoked, the function was pushed on the Call Stack

And after the invocation of the myName() function, it is popped off the call stack.

Javascript code execution happens in 2 phases, the Memory Allocation phase and the Code Execution Phase

We will take another example for better understanding.

var number = 5;

function multiply(num) {
    var result = num * num;
    return result;
}

var multiplied = multiply(number);

Memory Allocation Phase

The first thing that Javascript does is to allocate memory to all the variables and functions on the page ie it reads the page from the top to the bottom (depending on the Execution Context the thread of execution is).

Global Execution Context

Memory	Thread of Execution
number: undefined
multiply: { ...function }
multiplied: undefined

The first line is var number = 5 number is stored as a key and a special placeholder undefined is appended as the value in this first phase.
In the second line, we have function multiply () {} the whole function body is stored also as a key: value pair. The key is the function name multiply and the value is the whole function body.
Always remember that only a function invocation or a function call can allow Javascript to enter a function. Have a mental image that the curly braces { } is a gate to the function body and an invocation is a key to the function.
The third line is also a variable and will be stored as a key: value pair with the variable name multiplied as the key and undefined as the value.
Note that we are in the Global Execution Context during this phase.

Code Execution Phase
In this phase, this is when Javascript allocates the values to the variables and also invokes functions that create a new Executional Context and perform specific operations in our code base. The code is also read from top to bottom.

Memory	Thread of Execution
number: 5

multiplied: multiply()

Our code is read again from top to bottom, 5 is appended to var number as the value.
The second line is skipped because we can't enter the function body because it hasn't been called yet.
Now this is where the magic happens, there is a function invocation in the next line var multiplied = multiply(number).

Any time we see the parenthesis () in Javascript, two major things happen.

1 A Functional Execution Context is created.
2 The function is pushed unto the Call Stack.

Multiply() being a function invocation then creates a new Functional Execution Context and then we repeat the same process of
Memory Allocation and Code Execution reading from top to bottom.

Functional Execution Context

In this phase, we will only be concerned with the content of the function multiply() {} because the invocation multiply() has now given us access through the gates { } into the function body.

As we know by now we have the Memory Allocation Phase where memory is allocated to the variables and functions inside the multiply function, this also includes the parameter num because it is local to the multiply function.

Memory Allocation Phase

Memory	Thread of Execution
num: undefined
result: undefined

undefined is appended as a placeholder for variable num.
undefined is appended as a placeholder for variable result.

Code Execution Phase
We will be repeating the process of reading the lines of code from top to bottom in the function multiply and executing them.

Memory	Thread of Execution
num: 5	5 * 5
result: 25	= 25

num which is a parameter local to the function multiply is allocated with the value of 5 which is passed as an argument to the function invocation multiply(number)
number is the variable that was stored in Global memory on the windows object. number is the argument that was substituted for num as the parameter.
The local variable result stores the evaluated value of num * num which is 5 * 5 = 25 in the Functional Execution Contest (local memory).

The keyword return being the last line in the function multiply body does something very interesting.

It simply means returning the result of the computation in that function body to the Execution Context where the function was invoked which in our case is the Global Execution Context where variable multiplied was stored in memory.

The value 25 would now be replaced with the placeholder undefined. so var multiplied = 25.

When Javascript encounters the return keyword in the code Execution Phase of our program,

1 The Execution Context is deleted.

2 The function is popped off the Call Stack.

3 The control of that function with its result (which can be of any data type including a function) is transferred to the Execution Context where the function was invoked.

In our case, it was to the variable multiplied in the Global Execution Context other times, it could be to another Functional Executional Context depending on how deep into the program we are.

I know this is a lot to take in, but it gets easier after a while, just make sure you reference this article as often as you can. In the subsequent text, we will be looking at the non-blocking part of Javascript.

For us to vividly get the picture, we need to understand the other parts of the Javascript run-time environment that makes asynchronous programming possible.

I do hope you have at least gained some basic insight into how Javascript executes our code, Thank you for your time, and good luck in your journey. Remember, it is a marathon and not a sprint.

I will appreciate your feedback through Twitter
GitHub

Introduction to Data Types in Javascript

David Olaleye — Wed, 24 Aug 2022 17:33:00 +0000

In every generic human language, there are parts of speech and rules that guide the usage of such. In the English Language, for example, we have parts of speech like Nouns, Pronouns, Verbs, Adjectives, etc. The English Language as a human language is used for communication, while Javascript as a higher level programming language is used to add functionality to web pages ie It makes user interaction with the web page possible.

In This article, I will be going over the major Data Types in Javascript which can also be referred to as values.
This write-up is beginner friendly and an introductory insight to data types for anyone new to the Javascript world. Below are the 7 major Data Types in Javascript.

Number
Bigint
String
Boolean (logical type)
null
Object
undefined

Number

The number data type is like a generic number we are all familiar with for basic arithmetic operations like multiplication *, division /, addition +, and subtraction -. Number can either be floating point number (decimals) or integer (whole numbers)

let number = 5;
let floatingNumber = 1.234;

let addition = 5 + 5;
console.log(addition) //10

we can perform any arithmetic operation on numbers and have their results stored in a variable to be used anywhere else in our code base.
Aside from conventional numbers, we have 3 unique numerical values which are
infinity, -infinity, NaN.

infinity results when we divide a number by 0 which is greater than any numeric value

console.log(1 / 0) //infinity

NaN This stands for not a number it results when you try to perform an incorrect arithmetic operation. for example when we try to divide a string with a number

console.log("word"/5) //NaN

Bigint

Bigint is a way to represent whole numbers in computer programming that are larger than 253-1 or -(253-1) for negatives.
integers greater than 253-1 can not be stored in the number type so Bigint was created to accommodate this change to numbers with unconventional lengths.

A Bigint value is added by appending n to the end of the integer.

const bigInt = 1234567890123456789012345678901234567890n;

you might begin to wonder about the practicality of applying the Bigint value in the wild, though it's not regularly used and you may never encounter them in a code base but they can be used for cryptography or microsecond-precision timestamps which are outside the scope of this tutorial.

String

String are basically characters in javascript, just like a string of alphabets makes up a word in the English Language, a string is a combination of characters, although for beginners the name sounds counter-intuitive, always remember that strings in Javascript are characters. A string can also be empty " " or ''.

string can be denoted in 3 different ways.

let string1 = "javascript"; //double quotes
let string2 = 'javascript'; //single quotes
let string3 = `javascript`; //backticks

backticks are really powerful in javascript because it allows us to interpolate values, by wrapping them in
${…}

let name = "David";
let phrase = `My name is ${name}`
console.log(phrase) //My name is David

console.log(`The sum is ${1 + 2 }`) //The sum is 3

There is basically no functional difference between the single quotes ' ' and the double quotes " " it all boils down to personal preference and style.

Boolean (logical type)

A javascript boolean represents either one of two values. true or false.

true resulting in yes
false resulting in no

boolean values are very effective in toggling eg turning a switch on or off, displaying a drop-down or a hamburger icon or not
Note that everything with a value results in true and false if there is no value.

console.log(5 > 4) //true

let isNameAString = true;
console.log(isNameAString); //true

let isUserValid = false;
console.log(isUserValid) //false

values can also be set to either true or false

Null

Null is a special value in Javascript that denotes empty, nothing, unknown value.

let name = null;
console.log(name) //null

name is intentionally absent, null is the intentional absence of any value.

Objects

Objects are special data types in Javascript that are used for storing the collection of values (which can be of any data type) in a {key: value} pair. keys in objects can also be referred to as properties. In javascript, other data types are called primitive values, while objects are referred to as reference values.

let human1 = {
    firstName: "David",
    lastName: "Olaleye",
    isAnEngineer: true,
    legs: 2,
    children: null
}

The code above is an example of an object literal syntax. Objects are very complex data types and going deeper is outside of the scope of this tutorial. An object is one of the major building blocks of Object Oriented Programming

Object properties can also be assigned.

human1.firstName = "Mike"
console.log(human1.firstName) //Mike

In the example above, we set the firstName property of the human1 object from string"David" to the string "Mike" using the . notation. This can also be done with the square bracket notation below

human1["firstName"] = "Ed";
console.log(human1["firstName"]) //Ed

Undefined

undefined is another special data type in javascript that denotes that a value is not assigned.
In javascript, a value can be declared and assigned later.

let name;
console.log(name); //undefined

The name variable above was declared but not assigned with a value.

name = "David"
console.log(name) //David

The name variable above has been assigned a string value "David".

Note:

We can assign null to a value if it is unknown or empty but it is not advisable to assign undefined
to a value explicitly. undefined is specially reserved for unassigned values as a default.

Wrapping Up

In this article we covered the major data types we have in javascript. Although this is meant to be beginner friendly, as you go on in your web development career, you will begin to learn about these data types in depth (caveat, trade-offs, and best practices). I do hope you have gotten some sort of introductory insight in this article, Thank you for your time, and good luck in your journey. Remember, it is a marathon and not a sprint.

I will appreciate your feedback through Twitter
GitHub Linkedin