In Part 1, we explored how JavaScript runs under the hood and discussed the JavaScript engine and runtime environment.

In this part, we’re going deeper.

We will understand:

• What is Execution Context?

• What are the different phases and types of an Execution Context?

• What is the Call Stack?

• How functions are executed internally?

And most importantly we’ll visualise everything with a simple code example.

Let’s begin.

What is an Execution Context in JavaScript?

Whenever JavaScript runs your code, it creates a special environment called an Execution Context.

Think of it as a container where JavaScript keeps everything needed to execute your code.

Phases of Execution Context

Each execution context goes through two phases:

1.Creation Phase (Memory Allocation Phase)

Before executing your code, JavaScript:

• Scans the code

• Allocates memory for variables

• Stores function definitions in memory

Important behavior:

• Variables declared with var are initialized with undefined

• Functions are stored entirely in memory

• let and const are hoisted but kept in a temporal dead zone

No code is executed here. Only memory setup happens.

2.Execution Phase

IN this phase, JavaScript:

• Executes code line by line

• Assigns actual values to variables

• Runs functions when invoked

• Evaluates expressions

This is where real execution happens.

Types of Execution Context

There are two main types of execution context:

1.Global Execution Context (GEC)

• Created when JavaScript starts running your file

• Exists only once and stays in the Call Stack until the program closes

• Represents the global scope

2.Function Execution Context (FEC)

• Created whenever a function is called or invoked

• Each function call creates a new execution context

• Has its own memory and thread of execution

What’s Inside an Execution Context?

Thread of Execution

This is the order in which JavaScript runs your code line by line.

JavaScript is (initially) single-threaded, meaning it executes one line at a time.

Memory

Each execution context has its own memory.

• Global context → Global memory

• Function context → Local memory

This is why variables inside functions are not accessible outside (unless returned).

What is the Call Stack?

JavaScript uses a special memory structure to keep track of all execution contexts called the Call Stack.

It follows LIFO structure, i.e., "Last In, First Out" (like a stack of plates).

• The last function added to the stack, will be executed first, and will be popped out of the stack first.

How all of this works: Step-by-Step!

Let’s understand this using a simple example.

const firstName = "Munzah";
const lastName = "Shah";
const age = 27;
const designation = "Software Engineer";

function createFullName() {
  return firstName + " " + lastName;
}

function displayUserDetails() {
  console.log("Full Name:", createFullName());
  console.log("Age:", age);
  console.log("Designation:", designation);
}

displayUserDetails();

Step-by-Step Execution Breakdown

Step 1: Global Execution Context is Created

When the file runs:

• Global Execution Context (GEC) is created

• It is pushed into the Call Stack

Call Stack:

| Global |

Step 2: Creation Phase of Global Context

Memory is allocated:

firstName → undefined
lastName → undefined
age → undefined
designation → undefined
createFullName → function definition
displayUserDetails → function definition

Step 3: Execution Phase Begins

Now values are assigned:

firstName → "Munzah"
lastName → "Shah"
age → 27
designation → "Software Engineer"

Functions are still not executed just stored.

Step 4: Function Invocation Happens

When this line runs:

displayUserDetails();

A new Function Execution Context is created.

Call Stack becomes:

| displayUserDetails |
| Global             |

Now JavaScript executes displayUserDetails.

Step 5: Inside displayUserDetails()

The thread of execution encounters another function call:

createFullName()

Another Function Execution ExecutionContext is created.

Call Stack now looks like this:

| createFullName     |
| displayUserDetails |
| Global             |

Step 6: createFullName Executes

It returns:

"Munzah Shah"

Once function is completed:

• Its result is returned to the parent execution context.

• And It's execution context is popped out from the stack.

So now, call Stack becomes:

| displayUserDetails |
| Global             |

Step 7: Remaining Code In displayUserDetails() Function Executes

Now:

Age: 27
Designation: Software Engineer

After finishing the execution of this function:

• displayUserDetails() context is removed

• Stack pointer goes back to Global

Call Stack:

| Global |

Important Rule to Remember

JavaScript always executes the function that is on the top of the Call Stack.

That’s why it follows LIFO.

Final Output of This Code

Full Name: Munzah Shah
Age: 27
Designation: Software Engineer

Why Understanding This is Important

If you understand:

• Execution Context

• Call Stack

• Creation Phase

• Execution Phase

You will easily understand:

• Hoisting

• Scope

• Closures

• Asynchronous JavaScript

• Event Loop

And that’s when JavaScript truly starts making sense.

Summary

• JavaScript creates a Global Execution Context (GEC) when a program starts running.

• Every execution context goes through two phases:

  • Creation Phase (memory allocation)

  • Execution Phase (code runs line by line)

• Variables and function definitions are stored in memory during the creation phase.

• Each function call creates a new Function Execution Context (FEC).

• Every execution context contains:

  • Its own memory

  • A thread of execution

• JavaScript uses a Call Stack to manage execution contexts.

• The Call Stack follows the Last In, First Out (LIFO) principle.

• The function at the top of the stack is executed first.

• Once a function finishes execution, it is removed (popped) from the stack.

• The Global Execution Context remains until the program finishes running.

• Understanding execution context and call stack makes advanced concepts like hoisting, closures, and async JavaScript easier to understand.

Stay connected with hasabTech for more information:

Website | Facebook | LinkedIn | YouTube | X (Twitter) | TikTok

In Object-Oriented Programming (OOP), two of the most important concepts are:

• Instance Variables

• Instance Methods

If you don’t understand these properly, OOP will always feel confusing.

So let’s break everything down step by step in the simplest way possible.

Let’s Start with a Simple Real-Life Example

Imagine a classroom. Learn How Instance Variables and Methods Actually Work in Python

You (teacher) are the class blueprint.
Your students are objects.

Every student:

• Has a name

• Has a roll number

• Has marks

• Can perform actions (submit homework, give test, etc.)

Now here’s the important part:

Even though all students come from the same class,
each student has their own data.

That “own data” is exactly what we call:

Instance Variables

And the actions they perform?

Instance Methods

What is an Instance Method in Python?

An instance method is a method that belongs to an object and works on that specific object.

Definition (Simple Words)

An instance method:

• Is defined inside a class

• Has self as its first parameter

• Can access and modify instance variables

  Why Do We Need self?

When we create multiple objects from a class, each object has its own data.

self tells Python:

Work with the current object that is calling this method

Example

class User:
    def activate(self):
        self.is_active = True

If we create two objects:

user1 = User()
user2 = User()

When we call

user1.activate()

Python automatically does this internally:

User.activate(user1)

That means:

• self = user1

So instance methods always operate on the object that calls them

What is an Instance Variable in Python?

An instance variable is a variable that belongs to a specific object.

It is created using:

self.variable_name = value

Important Concept

Instance variables:

• Store data

• Are unique for each object

• Exist inside the object

• Can be different for different objects

Example

def set_email(self, email):
    self.email = email

When we call:

user1.set_email("shameel@hasabtech.com")

It becomes:

user1.email = "shameel@hasabtech.com"

Now email belongs only to user1.

If we check user2, it still does NOT have email until we set it.

That is why instance variables are object-specific.

Complete Example with Deep Explanation

Let’s build a proper example and understand what happens step by step.

class User:

    def activate(self):
        self.is_active = True

    def deactivate(self):
        self.is_active = False

    def set_email(self, email):
        self.email = email

    def show_status(self):
        print(f"{self.email} is {'active' if self.is_active else 'not active'}")

Step 1: Creating Objects (Instances)

user1 = User()
user2 = User()

When we execute this:

• Python creates two separate objects in memory

• Each object has its own space to store data

• Both objects have access to all instance methods

Important: Object and Instance mean the same thing.

What Happens Inside Memory?

Even though both objects come from the same class blueprint:

• user1 has its own data storage

• user2 has its own data storage

They do NOT share instance variables.

This is the beauty of OOP.

Understanding Instance Methods in Action

Now let’s call:

user1.set_email("shameel@hasabtech.com")

What happens?

1. Python sees user1

2. It passes user1 automatically as self

3. Inside method:

   self.email = email
   

   Becomes

user1.email = "shameel@hasabtech.com"

Now:

• user1 has email

• user2 still has nothing

This proves instance variables belong to objects.

Adding More Data to Objects

Now:

user1.activate()
user2.deactivate()

This creates:

user1.is_active = True
user2.is_active = False

Again:

• Each object has its own is_active

• They are completely independent

This independence is the core idea of instance variables.

Why Methods are Called Instance Methods?

Because they:

• Work with instance variables

• Depend on the object

• Use self to access object data

For example:

def show_status(self):
    print(f"{self.email} is {'active' if self.is_active else 'not active'}")

This method:

• Reads self.email

• Reads self.is_active

• Prints data of that specific object

So this method behaves differently for each object.

That’s why it is called an instance method.

Common Beginner Confusion

Many students think:

Is self a keyword?

No.

self is just a naming convention.

You can write:

def activate(myobject):

But by convention, we always write self

Why This Concept is Very Important?

If you understand instance variables and instance methods, you can:

• Build login systems

• Create user management systems

• Understand Django models

• Work with APIs

• Design real-world applications

Without understanding self, OOP will feel complicated.

Final Understanding

Whenever:

• You attach data using self → It becomes an instance variable.

• You define a method with self → It becomes an instance method.

Each object:

• Has its own data

• Shares method structure

• Behaves independently

Summary

• Object = Instance. They mean the same thing.

• Instance Variables are the "adjectives" (data) that describe the object.

• Instance Methods are the "verbs" (actions) the object can perform.

• self is the bridge that connects the method to the specific object’s data.

• Each object has its own copy of instance variables

Stay connected with hasabTech for more information:

Website | Facebook | LinkedIn | YouTube | X (Twitter) | TikTok

One of the biggest "roadblocks" for Python beginners is the self keyword. You see it in almost every class, it’s the first argument in every method, and yet, we don't seem to pass any value to it when we call the function.

If you’ve ever wondered:

• What does self actually do?

• Why do I have to type it every single time?

• How does Python know which object I’m talking about?

Then this Blog is for you. Let’s break it down.

What is a Class and a Method?

Before we talk about self, remember the relationship between a Class and an Object.

• Class: A blueprint (like a drawing of a house).

• Object (Instance): The actual house built from that blueprint.

If you build five houses from the same blueprint, they all have the same structure, but they have different owners and different furniture inside. self is the way the house "identifies" itself.

class User:
    def set_email(self, email):
        self.email = email

Here:

• User → Class

• set_email() → Method

What is self? (The Simple Definition)

self represents the specific instance (object) of the class.

When you define a method inside a class, Python needs a way to distinguish between different objects.

class Robot:
    def introduce(self):
        print(f"Hello, I am {self.name}")

In the code above, self.name tells Python: Look for the name attribute inside THIS specific robot, not all robots in the world.

The Secret Behind Method Calls

This is where most beginners get confused. Look at these two ways to do the exact same thing:

Method 1: The Manual Way (Internal)

User.set_email(user1, "ammad@hasab.tech")
User.set_email(user2, "shameel@hasab.tech")

In this way:

• We manually pass the object

• user1 becomes self

• This helps us understand what Python does internally

Method 2: The Pythonic Way (Standard)

user1.set_email("ammad@hasab.tech")
user2.set_email("shameell@hasab.tech")

Behind the scenes, Python converts this into:

User.set_email(user1, "amma@hasab.tech")

That’s why:

• This method is simpler and mostly used in real projects

How self Works with Different Objects

When this line runs:

user1.set_email("ammad@hasab.tech")

• self → user1

• user1.email → "ammad@hasab.tech"

When this line runs:

user2.set_email("shameel@hasab.tech")

• self → user2

• user2.email → "shameel@hasab.tech"

This shows that self ensures each user instance uses it’s own data or value, which is the core idea of Object Oriented Programming.

Why self Is Important

self allows Python to:

• Identify which object is calling the method

• Store data separately for each object

• Avoid data overwriting between objects

Without self, Python would not know where to store object-specific values.

Common Beginner Mistakes

• Thinking self is a keyword (it’s not, but it’s a strong convention)

• Forgetting to add self as the first parameter

• Confusing instance variables with class variables

Always remember:

self.variable_name

means the variable belongs to that specific object.

Summary

• self represents the current object in Python

• It helps Python identify which object is calling a method

• A method can be called in two ways:

  • Using class name (manual)

  • Using object name (automatic and common)

• self changes depending on the object calling the method

• It allows each object to maintain its own data independently

Understanding self is a foundation of Python OOP, and once you grasp it, many advanced concepts become much easier.

Stay connected with hasabTech for more information:

Website | Facebook | LinkedIn | YouTube | X (Twitter) | TikTok

Now it’s time to clearly understand what a class is and what an object is in Object-Oriented Programming (OOP) using Python.

These two concepts are the foundation of OOP, and once you understand them, everything else becomes much easier.

What Is a Class in Python?

In simple words, a class is a blueprint or a template for creating objects that share common properties.

To understand this, let’s use a real-world example.

As discussed in our previous blog, first the concept of a human being was created, and then you and I were created from that concept. That concept is like a class, and our individual existence is like an object.

In Python terms:

• A class defines the structure (attributes) and behavior (methods).

• It describes what an object will look like

• It doesn’t occupy memory by itself because it’s just a concept.

So basically, a class is just a blueprint, not a real thing.

What Is an Object in Python?

An object is the actual house built from that blueprint. In programming, we call this an instance.

You can think of it this way:

• Class = Blueprint

• Object = Instance created from that blueprint

In Python, you’ll hear people use "object" and "instance" interchangeably. Don't let that confuse you they refer to the same thing: the real, usable version of a class.

Built-in Classes in Python

You might be surprised to learn that you’ve been using classes since Day 1. Every data type in Python—strings, integers, lists, and dictionaries is actually a class.

Try running this in your terminal:

            print(type("Hello"))
          //Output: <class 'str'>

See that? str is a class provided by Python. When you create a string like name = "Shameel", you are actually creating an object of the str class.

            s0 = ""
            s1 = "Shameel"

Here:

• str is the class

• str() creates an object

• The parentheses () mean that an object of the class is being created

So:

• str → blueprint

• str() → object (instance)

This is why we say class and instance (object) are closely related

Literal Syntax in Python

When you write:

s2 = "Shameel"

This is called shorthand literal syntax.

Behind the scenes, Python still creates an object of the str class. Python just hides this complexity to make the language easy and beginner-friendly.

Modules and Built-in Classes

Every class in Python belongs to a module.

• The file you run is also considered a module

• Built-in classes like str belong to the builtins module

That’s why when you inspect a string class, you’ll see it comes from builtins, even though you didn’t import anything manually.

Objects and Memory in Python

When you create an object, Python carves out a little piece of your computer's RAM to store it. Each object gets a unique "home address."

If you print a custom object, you’ll often see something like this: <__main__.User object at 0x106558c20>

That long code at the end (0x1065...) is the physical memory address where that specific object lives.

<__main__.User object at 0x106558c20>

This address shows where the object exists in memory.

Creating a Custom Class in Python

Now let’s move from built-in classes to custom classes.

To create your own class in Python, you use the class keyword:

class User:
    pass

Here:

• User is the class

• pass means the class is empty for now

To create an object from this class:

u1 = User()

The () tells Python to create an object from the User class and store it in the variable u1.

You can create multiple objects from the same class:

u2 = User()

This means:

• One class

• Multiple objects

Just like one concept of humans, but many human beings.

Understanding __main__ in Python Output

When you see output like:

<__main__.User object>

It means:

• __main__ is the current file being executed

• User is the class defined in that file

If the class were defined in another file, you would see the module name instead of __main__.

Checking an Object’s Class with type()

You can check the class of any object using:

type(u1)

Output:

<class '__main__.User'>

This confirms that u1 is an object of the User class.

Checking Object Instances with isinstance()

This is a great way to "double-check" an object. In programming, any function starting with "is" usually returns a True or False (Boolean).

Examples:

isinstance(s1, str)   # True
isinstance(s1, int)   # False
isinstance(u1, User)  # True

In programming, when a sentence starts with “Is”, the result is usually a Boolean value (True or False).

This method is widely used in Python to validate object types.

Summary

• Object-Oriented Programming (OOP) in Python is built around classes and objects.

• A class is a blueprint that defines structure and behavior.

• An object (instance) is a real entity created from a class.

• Python’s built-in data types like str, int, list, and dict are actually classes.

• Objects are created using parentheses () and stored in memory.

• You can create your own custom classes using the class keyword.

• Use type() to check an object’s class.

• Use isinstance() to verify whether an object belongs to a specific class.

• Understanding classes and objects is essential for mastering Python OOP.

Stay connected with hasabTech for more information:

Website | Facebook | LinkedIn | YouTube | X (Twitter) | TikTok

Before diving head-first into the world of Object-Oriented Programming (OOP), you need a solid grasp of a few "bread and butter" Python concepts. Think of it like building a house: you can't install the roof (OOP) until you’ve laid the foundation (Basics).

Don’t worry this series is designed for beginners. You don’t need to be a senior dev to get started, but having these few tools in your belt will make the transition to OOP feel like a breeze rather than a climb.

Core Python Basics You Should Know

To get the most out of this OOP series, ensure you're comfortable with the following three pillars:

1. Variables and Data Types

In OOP, we store data inside "Objects." To do that, you must understand how Python handles data. You should be familiar with:

• Strings: For names and descriptions.

• Integers/Floats: For counts, ages, or prices.

• Booleans: For "True/False" logic (essential for state management).

• Lists: For storing collections of objects.

  Why it matters: In OOP, these variables will eventually become Attributes the characteristics that define your objects.

2. Functions in Python

Functions are the "actions" of your code. Before moving to OOP, you should know:

• How to define a function (def).

• How to pass arguments (positional and keyword).

• How to return values to use elsewhere.

Why it matters: In the OOP world, functions living inside a class are called Methods. If you can write a function, you’re already 80% of the way to writing a class method.

3. Working with Dictionaries

You should understand how Key-Value pairs work because:

• Dictionaries represent structured data.

• Internally, Python actually uses dictionaries to store object attributes.

If you can pull a value from a dictionary using a key, you'll find the logic of accessing object properties very familiar.

What You Do NOT Need to Know

It’s easy to feel overwhelmed by the vast Python ecosystem. You do not need to master these before starting this series:

• Advanced Decorators or Generators: We’ll keep things simple.

• Web Frameworks: No Django or FastAPI knowledge is required.

• Database Management: We won’t be touching SQL or NoSQL in the beginning.

Our focus is strictly on Core Python OOP step by step.

Setup & Environment

Before we write our first class, make sure your environment is ready:

1. Python Installed: Ensure you have Python 3.x on your machine.

2. Terminal Access: You should be comfortable running a script via python filename.py.

3. Code Editor: Use whatever you like (VS Code, PyCharm, or even a simple text editor). No complex setup or heavy IDE configuration is required.

// Run this to check your Python version
import sys
print("Python version") //Should be 3.7 or higher

How to Master This Series

To truly "level up" your skills, don't just be a spectator. Engage with the content:

• Follow the Sequence: Concepts build on each other. Don't skip ahead!

• The "Type-Along" Rule: Never just read the code. Type it out. Muscle memory is a real thing in programming.

• Break Things: Change a value, delete a colon, or rename a variable. Seeing how the code breaks is the fastest way to learn how to fix it.

Resources & Practice

We believe in Hands-on Learning. To support you:

• All code examples are available on our GitHub repository.

• Links to the code are provided in our YouTube series descriptions.

• Clone it, fork it, or copy it just make sure you practice it.

Final Note

Object Oriented Programming isn't just a syntax change; it’s a mindset shift. It will help you write cleaner, reusable, and more professional code. Stay consistent, keep practicing, and don't be afraid to ask questions.

Stay connected with hasabTech for more information:

Website | Facebook | LinkedIn | YouTube | X (Twitter) | TikTok

Object Oriented Programming (OOP) in Python is a programming approach where software is built using objects that represent real world entities. Each object is created from a class which acts as a blueprint defining its data (attributes) and behavior (methods).

Why Do We Need Object Oriented Programming?

In the early days of programming, developers wrote code line by line variables and functions were all here and there. Data was scattered across the program.

This worked for small scripts, but as applications grew larger (such as social media platforms) this spaghetti code became difficult to manage, maintain, and scale.

Object Oriented Programming solves this problem by organizing code into structured, reusable components.

Understanding OOP with a Real World Example

Think about the creation of a human being. There is a basic biological blueprint that defines what makes a human:

• Heart

• Brain

• Lungs.

While individuals may differ in appearance, the core structure remains the same.

In Python terms:

• The Blueprint = Class: A Class defines common properties and behaviours.

• The Human = Object: A real instance created from a class is called an Object.

Each object is unique, but all objects follow the same structure defined by the class.

What Is a Class in Python?

A class in Python is a template used to create objects. It generally defines two things:

1. Attributes: Data or properties (e.g., eye color, height).

2. Methods: Functions that describe behavior (e.g., walking, talking).

Classes help developers write clean, organized, and reusable code.

What Is an Object in Python?

An object in Python is a real instance created from a class. While a class is just a blueprint, an object is the actual thing that exists and can be used in a program.

Each object:

• Contains its own data (attributes)

• Can perform actions using methods defined in the class

• Is independent and unique, even if it is created from the same class

For example, if a class represents a Human, then different people are objects of that class. They all share common features defined in the class, but their values (such as name, age, or height) can be different.

In simple words:

• Class = Blueprint

• Object = Real-world instance created from that blueprint

Objects allow programs to work with real-world concepts, making code more organized, reusable, and easier to understand.

Why Is It Called Object Oriented Programming?

It is called Object-Oriented Programming because programs are designed as a collection of organized, purposeful objects rather than just a loose list of instructions. This approach makes software easier to understand, maintain, and expand.

Summary

• OOP in Python uses objects to represent real-world entities.

• A Class is a blueprint or template defining attributes (data) and methods (behaviour).

• An Object is a real instance created from a class each object is unique but follows the same structure.

• Early programming worked for small scripts but as applications grew this line by line code turned into unmanageable spaghetti code

• OOP helps organize code, making it reusable, maintainable, and scalable.

• Real-world analogy: Humans are like objects created from a blueprint (class), with core features like a heart, brain, and lungs.

• Object Oriented Programming is called “object-oriented” because it treats programs as a collection of organized, purposeful objects.

• Benefits of OOP: Clean code, better structure, easy maintenance, and improved scalability.

What’s Next?

Now that you understand the theory, are you ready to code? In the next blog, we will write our first Python Class and Object.

Stay connected with hasabTech:

• Website: https://hasab.tech/

• Facebook: https://www.facebook.com/hasabTech

• LinkedIn: https://www.linkedin.com/company/hasabtech

• X (Twitter): https://x.com/hasabTec

• YouTube: https://youtube.com/@hasabTech

• TikTok: https://tiktok.com/@hasabTech

Introduction

Have you ever wondered how JavaScript code actually runs?

Does it execute on its own or is there a system working behind the scenes?

In this blog we will clearly understand:

• how JavaScript code really runs?

• what a JavaScript Runtime Environment is?

• The role of JavaScript Engine and it's types (V8, SpiderMonkey, JavaScriptCore)

• how the JavaScript V8 Engine looks like from inside? (Call Stack, Heap, Parser, JIT Compiler, Interpreter, and Garbage Collector)

This blog builds the foundation for understanding:

• Call Stack in detail

• The working of JavaScript Engine, Execution Thread and Context

• The event loop

• Callback queue

• MicroTask queue

• Async JavaScript

which we will cover in our future blogs. In this blog, we focus on building a strong mental model of the JS engine itself.

Does JavaScript Run on Its Own?

The simple answer is No.

JavaScript code cannot do anything on its own unless it is executed inside a Runtime Environment.

A runtime environment provides all the necessary tools, libraries, and features required for JavaScript to interact with the real world such as handling clicks, accessing files, or making network requests.

What Is a JavaScript Runtime Environment?

JavaScript Runtime Environment is a system where JavaScript code lives and runs.

You may have heard some popular runtime environments, such as:

• Web Browsers (Chrome, Firefox, Safari)

• Node.js

• Bun

• Deno

All of these provide an environment that allows JavaScript to execute.

What Does a Runtime Environment Provide?

Runtime environment offers:

• JavaScript Engine (the heart ♥️ of the runtime)

• Environment-specific APIs

• Event Loop, Callback Queue, and MicroTask Queue.

Together these components allow JavaScript to perform real-world tasks.

JavaScript Engine: The Heart of Runtime Environment

JavaScript Engine is the core component responsible for executing JavaScript code.

It is not something mysterious a JavaScript engine is simply a program that reads, compiles, and runs your code.

Popular JavaScript Engines

Different environments use different engines:

• Chrome & Node.js → V8 Engine

• Firefox → SpiderMonkey

• Safari → JavaScriptCore

Environment Specific APIs

Runtime environments also provide APIs which allow JavaScript to communicate with other software and systems. APIs depends on which environment they are in (like, Browser, Server, etc).

Browser APIs Examples

When JavaScript runs in a browser it gets access to:

• DOM (Document Object Model)

• Fetch API

• setTimeout and setInterval

• localStorage

• Event handling APIs

Server-Side APIs (Node.js)

In server environments like Node.js, JavaScript has access to APIs such as:

• File System (fs module)

• Networking

• Global objects

• Process management

These APIs are not available in the browser which shows that APIs depend on the runtime environment.

Event Loop (Brief Overview)

The runtime environment also contains:

• Event Loop

• Callback Queue

• Microtask Queue

These components handle asynchronous operations in JavaScript. We will discuss them in detail in upcoming blogs.

Inside the JavaScript V8 Engine

Now let’s take a deeper look at how a JavaScript V8 Engine (which is the most popular one) works internally.

Core Components of a JavaScript V8 Engine

1. Heap Memory

Heap Memory is an unstructured memory space used to store:

• Objects

• Variables

• Functions

It is mainly used for dynamic memory allocation.

2. Call Stack

The Call Stack keeps track of:

• Function calls

• Execution context

It follows the Last In First Out (LIFO) principle. We’ll discuss this in detail in the next blog.

Additional V8 Engine Components

Modern JavaScript engines like V8 also include several optimisation and processing components:

1. Parser

• Reads JavaScript code

• Converts it into AST (Abstract Syntax Tree)

• AST represents code in a tree structured format

2. Interpreter

• Reads and executes code line by line

• Produces intermediate bytecode

3. JIT Compiler (Just-In-Time Compiler)

• Converts byte code into machine readable code

• Improves performance by optimising frequently executed code

4. Garbage Collector

• Automatically cleans unused memory

• Removes objects and variables that are no longer in use

In our next blog, we will understand the working and execution of JavaScript V8 Engine with the help of a simple code snippet example.

Let’s quickly revise what we learnt in this blog.

Summary:

• The JavaScript language itself is limited until and unless it is inside of a Runtime environment.

• The runtime environment acts as a container that provides additional context, tools, and capabilities, enabling JavaScript to interact with browsers, servers, and outside world.

• The runtime environment comprises of JS Engine, environment specific APIs, Event Loop, Callback Queue, and MicroTask queue.

• Engine is the main working component of a runtime, which handles the execution.

• JavaScript V8 Engine comprises of a Heap Memory, Call Stack, Parser, JIT Compiler, Interpreter, and a Garbage Collector.

What’s Next?

In our next blog, we will understand the execution and working of the JavaScript engine with the help of a simple code example, where we will explore the:

• Call Stack and Heap Memory in action

• Execution Thread and Execution Context

Stay connected with hasabTech:

• Website: https://hasab.tech/

• Facebook: https://www.facebook.com/hasabTech

• LinkedIn: https://www.linkedin.com/company/hasabtech

• X (Twitter): https://x.com/hasabTec

• YouTube: https://youtube.com/@hasabTech

• TikTok: https://tiktok.com/@hasabTech

This Intermediate JavaScript Tutorial series is designed for developers who already understand JavaScript basics and want to go beyond syntax to understand how JavaScript actually works behind the scenes.

If you’re comfortable with variables, loops, and functions, but struggle with asynchronous code, unexpected bugs, or confusing behavior, this series will help you build real JavaScript understanding instead of relying on guesswork.

In this Intermediate JavaScript course, we explore the core concepts that power modern web applications, including:

• How JavaScript really runs (JavaScript engine and execution context)

• Call stack & memory heap

• Scopes in JavaScript

• Closures

• Hoisting (var vs let vs const)

• The this keyword in different contexts

• Prototype & prototype chain

• Event loop (microtasks vs macrotasks)

• Asynchronous JavaScript fundamentals

• Callbacks and Callback Hell

• Promises

• Async / await with real-world examples

Many people say they “know JavaScript.”
But knowing JavaScript syntax and understanding how JavaScript actually works behind the scenes are two very different things.

If you can write variables, functions, loops, and basic logic, congratulations!
You are no longer a beginner.

However, becoming an Intermediate JavaScript developer means going much deeper than writing basic code.

This blog introduces what Intermediate JavaScript really means and why it is a critical step in your web development journey.

Beginner vs Intermediate JavaScript: What’s the Difference?

At the beginner level, you focus on:

• Writing correct syntax

• Making code “work”

• Using variables, loops, functions, and conditions

At the intermediate level, your focus shifts to:

• Understanding why your code behaves a certain way

• Knowing what happens internally in JavaScript

• Debugging issues without guessing

• Writing code that is predictable, scalable, and maintainable

This is where real JavaScript learning begins.

What Does an Intermediate JavaScript Developer Know?

An intermediate JavaScript developer is someone who:

• Understands JavaScript behavior, not just syntax

• Can read and understand other developers’ code

• Writes clean, debuggable, and scalable code

• Knows how asynchronous JavaScript works

• Can confidently debug bugs and explain why they happened

• Is prepared to move into frameworks like React or backend tools like Node.js

This level is about clarity and confidence, not just writing more code.

Why Do Many Developers Get Stuck?

Many developers move forward too fast.

They jump into:

• React

• Node.js

• Frameworks and libraries

Without fully understanding JavaScript core behavior

This creates a dangerous gap.

Later, this gap shows up as:

• Bugs they can’t explain

• Code they don’t fully trust

• Unexpected behavior in real projects

• Fear of debugging complex issues

The problem is not frameworks. The problem is weak JavaScript foundations.

Why Understanding JavaScript Behavior Matters

JavaScript behaves differently from many other programming languages, which is why simply knowing the syntax is not enough. At the intermediate level, developers begin to understand why bugs happen, why code behaves unexpectedly, and how JavaScript handles execution and asynchronous tasks internally. This deeper understanding allows developers to debug issues logically instead of relying on guesswork. Ultimately, this knowledge is what separates average developers from confident and professional JavaScript engineers.

About the hasabTech Intermediate JavaScript Series

This is exactly why we designed the Intermediate JavaScript Series by hasabTech. The series focuses on understanding how JavaScript behaves, not just how it is written. It covers core concepts that developers usually skip, helps build strong fundamentals for real-world projects, and prepares learners for modern frameworks like React, backend tools such as Node.js, and advanced JavaScript development. Because knowing JavaScript is different from truly understanding JavaScript.

Watch the full video here

Stay connected with hasabTech:

Website: https://hasab.tech/

Facebook: https://www.facebook.com/hasabTech

LinkedIn: https://www.linkedin.com/company/hasabtech

X (Twitter): https://x.com/hasabTec

YouTube: https://youtube.com/@hasabTech

TikTok: https://tiktok.com/@hasabtech