Meet K Patel - Advanced JavaScript Visualized

The true sign of intelligence is not knowledge but imagination.

- Albert Einstein

This is the most important and fundamental chapter of all. So if you get this, then almost everything will be easy to follow and understand. Welcome to the exciting journey of JavaScript beyond normal expectations.

Terminologies

• Memory
• Processes and Threads
• Execution Context
• Scope
• The Thread of Execution
• Callstack

Before we move further let me give you a quick overview of how processes are managed at a high level.

1. Initially, any program(set of instructions) is collected by the memory(usually in the RAM) and then the processor takes the initiative to complete that program.
2. A processor then take the program and start executing it and during that process processor might need to do extra stuff to accomplish a given task i.e. processor might perform a program inside the program(Set of instruction might need other instructions as well) AKA thread/s also needs to be done as well.
3. After finishing the program, the Operating System will take care of the cleanup and some other dependent task/s.
4. Now, any program is called single-threaded when the given program can perform a set of instructions one by one, and no extra internal set of instructions is done(Running JavaScript program is a single-threaded process).

After getting an idea about termonologies Lets now further understand stuff with a little example

Example 1.1

- First thing if you dont know then, JavaScript is a single-threaded and synchronous language which mean JavaScript engine/Interpreter can execute one line or block of code at one time. Which means you cant do multiple things at the same time. Also, you go through line by line while executing code (synchronously).

- when you execute JavaScript code on a browser or any other enviroment(nodejs, react-native etc) we run our code in something called global execution environment(global memory space for browser tab or global memory for node enviroment first).

- every function we defined are actually first goes inside global memory space (ignore function defined inside another functions for now). When we put these function into execution, first they are put on callstack first and from that callstack functions are getting called where latest function are made available in thread of execution!

- Before we start understanding the given code its important to create mental model for all the stuff we learned so far.

Current JavaScript Mental Model

• In our mental model, we can see that every JavaScript program gets Global memory space (Global Scope). Every function and topmost declared variables are hoisted in the global scope.
• Hoisting is JavaScripts default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function) - W3SCHOOL (I dont prefer w3school but sometimes it explains stuff easily).
• Each line of code or function definition is not called directly in JavaScript. But instead, it goes to callstack, and then based on callstack current priority function/s is put in the Thread of execution (Last In First Out). Why not understand this mental model via example.
• Lets start reading the below code and explore and keep the above mental model in mind.

Example 1.1

• In the first line as you can see we are declaring a variable called outerGoal and assigning a value of 0. That is to say, we are consuming small memory space inside global memory (scope) and giving the label called outerGoal to that memory.
• In the next line of code, we are simply logging that value to the console. That is to say, we are simply logging value at a label called