<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Mihir Verma</title>
    <description>The latest articles on Forem by Mihir Verma (@mihirverma7781).</description>
    <link>https://forem.com/mihirverma7781</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F562211%2F1cc6604f-b86f-4034-b5d0-854a1b8e9e81.png</url>
      <title>Forem: Mihir Verma</title>
      <link>https://forem.com/mihirverma7781</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/mihirverma7781"/>
    <language>en</language>
    <item>
      <title>Inside Event-Driven Architecture</title>
      <dc:creator>Mihir Verma</dc:creator>
      <pubDate>Mon, 06 Apr 2026 14:35:43 +0000</pubDate>
      <link>https://forem.com/mihirverma7781/a-practical-guide-to-event-driven-architecture-1gcd</link>
      <guid>https://forem.com/mihirverma7781/a-practical-guide-to-event-driven-architecture-1gcd</guid>
      <description>&lt;p&gt;When building modern distributed backend systems especially microservices, one of the most critical design decisions you will make is how those services talk to each other. If services are too tightly coupled, your entire platform becomes fragile.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;This communication between services is known as service interaction.&lt;/em&gt; Broadly speaking, interactions fall into two categories: &lt;strong&gt;synchronous&lt;/strong&gt; (waiting for a the response) and &lt;strong&gt;asynchronous&lt;/strong&gt; (firing a call and moving on).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;In this blog, we’ll explore:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Different types of service interactions.&lt;/li&gt;
&lt;li&gt;Dive into Event-Driven Architecture.&lt;/li&gt;
&lt;li&gt;Real-world patterns, use cases &amp;amp; types.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  What is Service Interaction?
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;In a microservices architecture, multiple independent services collaborate to power an application. The communication between them is called service interaction, and it can be broadly classified into 3 types:&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;Time-Driven Interaction&lt;/li&gt;
&lt;li&gt;Request-Driven Interaction&lt;/li&gt;
&lt;li&gt;Event-Driven Interaction&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  1. Time-Driven Interaction (Synchronous)
&lt;/h3&gt;

&lt;p&gt;In a time driven system, actions are triggered at fixed predetermined time intervals. Think of it as cron jobs or scheduled batch processing. A service wakes up, performs its task (like generating a daily report or restoring token limits), and goes back to sleep.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;For Example:&lt;/strong&gt; Imagine you’re building an Employee Payroll Service.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Salaries are processed once every month.&lt;/li&gt;
&lt;li&gt;The system runs a scheduled job (cron).&lt;/li&gt;
&lt;li&gt;A salary cerdit notification is generated.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2nau0vet59o7v16rp7gw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2nau0vet59o7v16rp7gw.png" alt="Time-Driven Interaction" width="800" height="596"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  Request-Driven Interaction (Synchronous)
&lt;/h3&gt;

&lt;p&gt;This is the traditional API model. When Service A needs data or functionality from Service B, it sends a direct request (typically via HTTP or gRPC). Service A then waits for a response before it can continue the further operations.Although, it is simple to implement but the tight coupling can cause some issues. For example if Service B goes down or slow, Service A will also go down with it as it is tightly coupled (dependant on service B).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;For Example:&lt;/strong&gt; Let’s say a user places an order on your ecommerce platform.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A user places an order.&lt;/li&gt;
&lt;li&gt;The &lt;em&gt;&lt;strong&gt;Order Service&lt;/strong&gt;&lt;/em&gt; sends a request to the &lt;strong&gt;&lt;em&gt;Payment Service&lt;/em&gt;&lt;/strong&gt; to process payment.&lt;/li&gt;
&lt;li&gt;The Order Service waits for the payment response.&lt;/li&gt;
&lt;li&gt;Once payment is successful, it calls the &lt;em&gt;&lt;strong&gt;Notification Service&lt;/strong&gt;&lt;/em&gt; to send confirmation.
Each step depends on the previous service response if one service fails whole process goes down, making it a synchronous (request-driven) flow.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F264aerem5o8fa29vv4l5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F264aerem5o8fa29vv4l5.png" alt="Request-Driven Interaction" width="800" height="508"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  Event-Driven Architecture (Asynchronous)
&lt;/h3&gt;

&lt;p&gt;In an Event-Driven Architecture, services communicate by generating and reacting to events. Instead of actively calling functions or waiting on other services, a service simply broadcasts that something happened.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It's about reacting to &lt;strong&gt;things that happen&lt;/strong&gt; (events), rather than directly invoking apis/function calls.&lt;/li&gt;
&lt;li&gt;Services are &lt;strong&gt;decoupled&lt;/strong&gt;, the producer service doesn't care who consumes the event or how many consumer services there are.&lt;/li&gt;
&lt;li&gt;In &lt;strong&gt;EDA&lt;/strong&gt;, components (services) are independent, meaning they can function without being directly communicating (tightly coupled) to one another.&lt;/li&gt;
&lt;li&gt;It uses Publish-Subscribe Design Pattern under the hood to carry out the communication.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Publish Subscribe Pattern in short:
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;It is a messaging paradigm in which senders (publishers) send messages message broker, which then distributes the messages to any interested receivers (subscribers) who have registered an interest in receiving those messages.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;For Example:&lt;/strong&gt; Consider a weather forecast application&lt;br&gt;
A Weather Service (Publisher) publishes updates like temperature or rain alerts.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The message is sent to a message broker.&lt;/li&gt;
&lt;li&gt;Multiple services subscribe to these updates:&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Forecasting Service&lt;/strong&gt; → predicts future weather.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;History Service&lt;/strong&gt; → stores past data.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Maps Service&lt;/strong&gt; → updates weather on maps.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn55q6thjdpvkmxu5qv6z.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn55q6thjdpvkmxu5qv6z.png" alt="Event-Driven Architecture" width="800" height="436"&gt;&lt;/a&gt;&lt;/p&gt;


&lt;h3&gt;
  
  
  Components of Event-Driven Architecture
&lt;/h3&gt;

&lt;p&gt;There are majorly 5 components of an event driven architecture.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Events:&lt;/strong&gt; The core unit of communication in EDA. A change in state is called an event. In an event-driven architecture, everything that happens within and to your backend system is an event for ex. a user singing up, an order created etc.. Events are emitted by sources and can encapsulate various types of information.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The &lt;strong&gt;User Service&lt;/strong&gt; emits a &lt;code&gt;UserRegistered&lt;/code&gt; event.&lt;/li&gt;
&lt;li&gt;The event is sent to an &lt;strong&gt;Event Broker&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;The Email Service, which is subscribed to this event, receives it.&lt;/li&gt;
&lt;li&gt;It gets the user data and sends a welcome email to the user.&lt;/li&gt;
&lt;li&gt;The &lt;strong&gt;User Service&lt;/strong&gt; doesn’t directly call the &lt;strong&gt;Email Service&lt;/strong&gt;. It simply emits an event and carries on.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa1ob74w7jznu71ulubod.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa1ob74w7jznu71ulubod.png" alt="Events" width="800" height="366"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Event Producers (Publishers):&lt;/strong&gt; Producers are the services responsible for emitting events (carrying out actions) when specific conditions occur. They translate system actions into enumeration messages that are consumed by other services (consumers).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;For Example:&lt;/strong&gt; Imagine a food delivery system like Zomato or Swiggy.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The delivery partner’s phone continuously sends live location (coordinates) via websocket.&lt;/li&gt;
&lt;li&gt;The &lt;strong&gt;Delivery Management Service&lt;/strong&gt; receives this data.&lt;/li&gt;
&lt;li&gt;It acts as a &lt;strong&gt;Producer&lt;/strong&gt; and emits a &lt;code&gt;LocationUpdated&lt;/code&gt; event to the event broker.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;3. Event Consumers (Subscribers):&lt;/strong&gt; Consumers listen for specific events and when a subscribed event is received by the service it triggers some internal logic based on the event.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;For Example:&lt;/strong&gt; Continuing the same food delivery system:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The &lt;strong&gt;Delivery Management Service&lt;/strong&gt; publishes &lt;code&gt;LocationUpdated&lt;/code&gt; events.&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Multiple services subscribe to this event:&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Tracking Service&lt;/strong&gt; → updates live location on the user’s app&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Analytics Service&lt;/strong&gt; → analyzes delivery performance&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Restaurant Service&lt;/strong&gt; → monitors delivery progress&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These services act as &lt;strong&gt;Consumers&lt;/strong&gt; which are reacting to events and performing their own tasks independently.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft6prp8r72z5abux8yfi9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft6prp8r72z5abux8yfi9.png" alt="EDA" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Event Broker:&lt;/strong&gt; It is a middleware service that enables multiple services to communicate with each other through a &lt;strong&gt;&lt;em&gt;centralized service&lt;/em&gt;&lt;/strong&gt;. It routes the events between services by accepting the events from the producers and delivers them to the consumers subscribed to receive them. For example: Kafka, Rabbitmq, Redis, EventBridge etc. are used as event brokers/Message Brokers.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Topics:&lt;/strong&gt; Topics Are components inside an Event-Broker. Each topic hold only certain type of events only to differentiate between the events. A publisher should know which topic it should generate the event to while consumers can subscribe to a certain topic they are interested in.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;For Example:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Producer&lt;/strong&gt; sends an event to a &lt;strong&gt;topic&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;OrderPlaced&lt;/code&gt; → published to topic: &lt;code&gt;orders&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Broker&lt;/strong&gt; (Kafka, RabbitMQ, etc.) stores the event under that topic.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Consumers&lt;/strong&gt; subscribe to the topic.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Inventory Service&lt;/strong&gt; and &lt;strong&gt;Notification Service&lt;/strong&gt; both consume from &lt;code&gt;orders&lt;/code&gt; topic.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmihvx8nfb7swabfzs79t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmihvx8nfb7swabfzs79t.png" alt="Topics" width="800" height="372"&gt;&lt;/a&gt;&lt;/p&gt;


&lt;h3&gt;
  
  
  Why Use Event Driven Architecture ? (Advantages)
&lt;/h3&gt;

&lt;p&gt;Using EDA can provide you lot of advantages while building a distributed system.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Scalable Environment:&lt;/strong&gt; Services can scale independently.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Loose Coupling:&lt;/strong&gt; Services don’t directly depend on each other.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Real-Time Processing:&lt;/strong&gt; Events are processed as soon as they happen.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Fault Isolation:&lt;/strong&gt; If a consumer is down, events can be &lt;strong&gt;retried later&lt;/strong&gt; from the broker.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cross Team Collaboration:&lt;/strong&gt; Enables different domain teams to work together.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Independent Testing:&lt;/strong&gt; Testing is easy as services are independent.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Highly Available:&lt;/strong&gt; Event broker system can be horizontally scaled.&lt;/li&gt;
&lt;/ul&gt;


&lt;h3&gt;
  
  
  Drawbacks of EDA:
&lt;/h3&gt;

&lt;p&gt;No architecture is perfect. EDA also has some trade-offs of its own.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Event Ordering:&lt;/strong&gt; Events may arrive out of order.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Event Schema Updates:&lt;/strong&gt; Over time, the structure of  events will change which can break      some consumers.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Debugging:&lt;/strong&gt; It's hard to trace end-to-end flows across asynchronous systems.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Late Event Processing&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;h3&gt;
  
  
  Some Real Life Applications of EDA:
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Realtime Notifications.&lt;/li&gt;
&lt;li&gt;Live Chat.&lt;/li&gt;
&lt;li&gt;Delivery / Cab Booking Systems (Zomato/Swiggy/Uber).&lt;/li&gt;
&lt;li&gt;Unified Logging Mechanism.&lt;/li&gt;
&lt;li&gt;Multiplayer Games.&lt;/li&gt;
&lt;/ol&gt;


&lt;h3&gt;
  
  
  Event-Driven Patterns in Practice
&lt;/h3&gt;

&lt;p&gt;When designing how your events carry data, there are three main architectural patterns you will encounter:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Event Notification Pattern&lt;/li&gt;
&lt;li&gt;Event Based State Transfer &lt;/li&gt;
&lt;li&gt;Event Sourcing&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;1. Event Notification Pattern:&lt;/strong&gt; In event notification pattern, events are used to notify other microservices in the system that an interesting change has occurred. The notification event is small and concise (contains very less information of what has changed in state) as it only contains a reference to the state that was changed. If a consumer needs more details, it must make a &lt;em&gt;synchronous call&lt;/em&gt; back to the source to fetch the data.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;For Example:&lt;/strong&gt; Imagine a user places an order on an e-commerce platform. The Order Service creates the order and publishes an OrderPlaced event.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The event is sent to the Event Broker.&lt;/li&gt;
&lt;li&gt;Multiple services subscribe to this event.&lt;/li&gt;
&lt;li&gt;Inventory Service → fetches order details and updates stock.&lt;/li&gt;
&lt;li&gt;Shipping Service → fetches order details and initiates delivery.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The event only contains basic information (like orderId), and consumers fetch additional data themselves.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example Event:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"eventType"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"OrderPlaced"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"eventVersion"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"1.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"timestamp"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"2025-07-07T14:00:32Z"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"eventId"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"b3d9f76a-18f2-4e34-a820-7d5f2e0b8212"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"source"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"order-service"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"data"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"orderId"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"ORD123456"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"userId"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"USR7890"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"orderStatus"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="s2"&gt;"Preparing_Order"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxpwcrovnf0888u8oxh6s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxpwcrovnf0888u8oxh6s.png" alt="Event Notification Pattern" width="800" height="305"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;2.Event Based State Transfer:&lt;/strong&gt; In this architectural pattern events are used to propagate state changes between services in an event-driven architecture. Instead of relying on synchronous &lt;em&gt;request/response&lt;/em&gt; patterns the state updates are directly sent inside the event information.**&lt;br&gt;
&lt;strong&gt;For Example:&lt;/strong&gt; Imagine a user places an order on an e-commerce platform. The Order Service creates the order and publishes an OrderPlaced event.&lt;br&gt;
Unlike notification pattern, this event contains complete order details like orderId, items, quantity, shipping address etc.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;Consumers do not need to call Order Service as they already have all required data.&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example Event:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"eventType"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"OrderPlaced"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"eventVersion"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"2.1"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"timestamp"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"2025-07-07T14:05:00Z"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"eventId"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"8fc67c8d-921c-443a-a67a-b3aefaed3384"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"source"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"order-service"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"data"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"orderId"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"ORD123456"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"status"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Not_Shipped"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"items"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"productId"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"P001"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"quantity"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"productId"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"P002"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"quantity"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"shippingAddress"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"city"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Hyderabad"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"pincode"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"000001"&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Figccw4ickvguej4hr3dc.png" alt="Event Based State Transfer" width="800" height="305"&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;3. Event Sourcing:&lt;/strong&gt; The Event Sourcing Pattern is a way to store data by recording every change as a sequence of events, instead of just saving the latest state. Event Sourcing records every single change which is immutable. If any failure occurs in the system the it can rebuild the current state at by using these event records any point in time.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhor2vrq9l329oereueff.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhor2vrq9l329oereueff.png" alt="Event Sourcing" width="800" height="342"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt; Event-Driven Architecture is not just a design pattern. It’s a paradigm shift in how systems think and communicate. The goal is not to eliminate synchronous communication but to use the right approach at the right place.&lt;/p&gt;

&lt;p&gt;I Hope now you have a better understanding of the Event-Driven Architecture, it's components and types.&lt;/p&gt;

&lt;p&gt;If you like the content please share it with your friends, colleagues, and coding buddies. Have a nice day ❤️&lt;/p&gt;

</description>
      <category>programming</category>
      <category>pubsub</category>
      <category>architecture</category>
      <category>eventdriven</category>
    </item>
    <item>
      <title>Inside Javascript Hoisting</title>
      <dc:creator>Mihir Verma</dc:creator>
      <pubDate>Mon, 05 Dec 2022 19:48:12 +0000</pubDate>
      <link>https://forem.com/mihirverma7781/inside-javascript-hoisting-304o</link>
      <guid>https://forem.com/mihirverma7781/inside-javascript-hoisting-304o</guid>
      <description>&lt;p&gt;As JavaScript is getting increasingly popular and extensively used, people are utilising its ability to make both server and client-side applications that are fast and use fewer resources of a machine.&lt;/p&gt;

&lt;p&gt;In my last post, we talked about a JS engine, its Execution context, phases and how things work inside a Javascript Engine. For this Post, we will talk about the most important concept of JS which is known as &lt;strong&gt;“HOISTING”&lt;/strong&gt;.&lt;/p&gt;




&lt;p&gt;In javascript, the variable declarations and how value is assigned to that variable work differently from other programming languages.&lt;/p&gt;

&lt;p&gt;As we have already talked about how the JS engine works in the earlier post. it will be now easy to understand the concept of hoisting&lt;/p&gt;

&lt;p&gt;So now let’s get started with an introduction hoisting in laymen's terms.&lt;br&gt;
&lt;br&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  &lt;strong&gt;What is Hoisting ?&lt;/strong&gt;
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;“It is a mechanism inside JS due to which all variable and function declarations are moved at the top of the scope before the code is executed”.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It does not matter where the variables or functions are declared the JS engine moves all the declarations at the top of their respective scopes before the code execution phase. The assignments stay at their place.&lt;br&gt;
&lt;br&gt;&lt;br&gt;
Now you will wonder what is this scope now.&lt;br&gt;
For now, consider scope as a container where your code is present.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;For Example:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function container() {
  var num1 = 4; // num1 scope is limited to container function
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the above example, the scope of num will be limited to function (locally scoped) as it is contained inside it. If your variable or function is present at the parent level i.e not inside any function it means it is globally scoped ie. it can be accessed from anywhere (depends on how it is declared).&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Types of Hoisting&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;There are two types of hoisting: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Variable hoisting &lt;/li&gt;
&lt;li&gt;Function Hoisting&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;1. Variable Hoisting:&lt;/strong&gt;
&lt;/h4&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;In variable hoisting, the variable declarations are moved on top of their scope while the process is still inside the memory creation phase.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fejbrz0m4btikvmljscul.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fejbrz0m4btikvmljscul.png" alt="variable hoisting" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The hoisting working differs from the way that a variable is declared. We have three ways to define a variable: &lt;code&gt;let&lt;/code&gt; &lt;code&gt;const&lt;/code&gt; and &lt;code&gt;var&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;For every variable declaration, the variable is first assigned with a default value of &lt;code&gt;“undefined”&lt;/code&gt; before the code execution phase where the actual value is given to the variable.&lt;br&gt;
&lt;br&gt;&lt;/p&gt;
&lt;h4&gt;
  
  
  &lt;strong&gt;var declaration:&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;For Example:&lt;/strong&gt; let's consider this code snippet&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log("before num ==&amp;gt; ", num);
var num = 10;
console.log("after num ==&amp;gt; ", num);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here is how the JS engine will treat this code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1. num = undefined           // memory creation phase
2. before num ==&amp;gt; undefined  // execution phase
3. num = 10                  // execution phase
4. after num ==&amp;gt; 10          // execution phase
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is how the basic &lt;code&gt;var&lt;/code&gt; declared variables work.&lt;/p&gt;

&lt;p&gt;In the first step, the JS engine will look for all variable and function declarations. In our case, it will find only &lt;code&gt;“num1”&lt;/code&gt; and move it to the top of its execution context (if it is inside any function it will go to the top of that function). Memory is allocated to the variable and the value is assigned as &lt;code&gt;"undefined"&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;point to be noted that our variable is in global space here and it is bound to the global object due to the &lt;code&gt;var&lt;/code&gt; declaration. &lt;/p&gt;

&lt;p&gt;After the &lt;code&gt;memory creation phase&lt;/code&gt; code starts executing from top to bottom.&lt;br&gt;
At the first line it will find &lt;code&gt;console.log(“number is  = ”, num);&lt;/code&gt; as the value of &lt;code&gt;num&lt;/code&gt; is &lt;code&gt;undefined&lt;/code&gt; right now it will print &lt;code&gt;undefined&lt;/code&gt;&lt;br&gt;
In the second step, the variable gets initialised with a new value i.e &lt;code&gt;10&lt;/code&gt;&lt;br&gt;
Again it will come to the log line 4 and print after &lt;code&gt;num is =  10&lt;/code&gt;  as it is now being assigned an actual value.&lt;/p&gt;

&lt;p&gt;This is how var declared hoisting works. Now let's see how to let and const hoisting works.&lt;/p&gt;


&lt;h4&gt;
  
  
  &lt;strong&gt;let &amp;amp; const declaration:&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;For Example:&lt;/strong&gt; let's consider this code snippet&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log("before num ==&amp;gt; ", num);
let num = 10;
console.log("after num ==&amp;gt; ", num);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;run this code you will get:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log(num);
           ^
ReferenceError: Cannot access 'num' before initialization
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;You are wondering Why this error came up?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The let and const variables are hoisted and assigned a value of undefined in a separate memory space &amp;amp; are in a &lt;strong&gt;&lt;em&gt;Temporal Dead Zone&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;They are not bound to the global object of JS instead they have their separate memory space where they are hoisted.&lt;br&gt;
The JS engine knows that they exist but cannot access their value, and these are available for access only when they are initialised with a value else they are not accessible and will give a reference error. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;For Example:&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm0kn4ksrd74202ww0w4i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm0kn4ksrd74202ww0w4i.png" alt="variable hoisting" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;as you can see in the image, the var declared variable &lt;code&gt;a_var&lt;/code&gt; is bound to the global object so it can be accessed before initialisation. While the let and const declarations: &lt;code&gt;b_let&lt;/code&gt; and &lt;code&gt;c_const&lt;/code&gt; are in a separate script memory phase space but they are &lt;strong&gt;&lt;em&gt;hoisted&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhx5iozjhk4k323ptftvo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhx5iozjhk4k323ptftvo.png" alt="variable hoisting" width="800" height="656"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Temporal Dead Zone:&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;So basically from the time of hoisting till the time of value initialisation the let and const variable declarations are not accessible this time period is known as the &lt;strong&gt;&lt;em&gt;“Temporal Dead Zone”&lt;/em&gt;&lt;/strong&gt;.&lt;br&gt;
&lt;br&gt;&lt;/p&gt;




&lt;h4&gt;
  
  
  &lt;strong&gt;2. Function Hoisting:&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Functions in JS can be declared in two ways&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Function Declaration&lt;/li&gt;
&lt;li&gt;Function Expressions&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Function Declaration:&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;In JS, the function declarations are stored as it is inside the memory in the memory creation phase. So when we call the function which is declared using legacy function declaration syntax it is accessible i.e we can call it before it is initialised. This means that function declarations are hoisted.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgln25sbhz2xddyhfkhce.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgln25sbhz2xddyhfkhce.png" alt="function declaration" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here you can see in the above image, I have added a breakpoint at the start of the script which means the function is not yet started executing (only the memory phase is completed) still you can clearly see inside the global object the &lt;code&gt;allow&lt;/code&gt; function is attached. Now let's just run the whole code&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frad4bjzlv6wjqz3b8o43.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frad4bjzlv6wjqz3b8o43.png" alt="function declaration" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;here you can see that we have called the &lt;code&gt;allow&lt;/code&gt; function just before the actual function declaration but it is still printing &lt;code&gt;allowing...&lt;/code&gt; this shows that function declaration are also &lt;strong&gt;&lt;em&gt;hoisted&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The difference between variable and function hoisting is just that the variables are first assigned an &lt;code&gt;undefined&lt;/code&gt; value whereas the function is stored as a whole inside the memory. &lt;/p&gt;




&lt;h4&gt;
  
  
  &lt;strong&gt;Function Expression:&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;In function expression, we store the function inside a variable which is then used to call the function.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Funpuevzoos7g5xexjlyb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Funpuevzoos7g5xexjlyb.png" alt="function expression" width="800" height="219"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As we know variables are hoisted and assigned an undefined value in it. Unlike function declarations, function expression hoisting work like variable hoisting. The first variable holds an &lt;code&gt;undefined&lt;/code&gt; value in the memory creation phase and then the function is assigned to that variable.&lt;/p&gt;

&lt;p&gt;Due to this if we call the function before actually assigning it to the variable it will throw a &lt;code&gt;Type Error: allow is not a function&lt;/code&gt; which basically means the &lt;strong&gt;&lt;em&gt;function expressions are not hoisted&lt;/em&gt;&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F22vxae865ufthzekohh9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F22vxae865ufthzekohh9.png" alt="function expression" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Arrow functions work in the same way as function expressions.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Tip:&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;You can try all of the above-given examples in your browser by opening inspect window in the source panel. &lt;/p&gt;






&lt;h2&gt;
  
  
  &lt;strong&gt;Conclusion:&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;JavaScript hoisting occurs during the creation phase of the execution context that moves the variable and function declarations to the top of the script.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The JavaScript engine hoists the variables declared using the let keyword, but it doesn’t initialise them as the variables declared with the var keyword.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The JavaScript engine doesn’t hoist the function expressions and arrow functions.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I Hope now you have a better understanding of what is JS Hoisting and what its types are. &lt;/p&gt;

&lt;p&gt;If you like the content please share it with your friends, colleagues, and coding buddies. Have a nice day ❤️&lt;/p&gt;

</description>
      <category>hoisting</category>
      <category>javascript</category>
      <category>temporaldeadzone</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Inside Javascript Engine</title>
      <dc:creator>Mihir Verma</dc:creator>
      <pubDate>Thu, 21 Jul 2022 20:28:51 +0000</pubDate>
      <link>https://forem.com/mihirverma7781/inside-javascript-engine-373</link>
      <guid>https://forem.com/mihirverma7781/inside-javascript-engine-373</guid>
      <description>&lt;p&gt;As JavaScript is getting more and more popular and extensively used, people are utilising its ability to make both server and client-side applications which are fast and use fewer resources of a machine.&lt;/p&gt;

&lt;p&gt;In this post, we will talk about the JS Engine, its Execution context its phases and how things work inside of a Javascript Engine.&lt;/p&gt;

&lt;p&gt;Before going into the terminologies let's see why getting the deep info about the internal workings of JS is more important. If we talk about Javascript, without understanding the internal working of the javascript engine and runtime we might get output from the program which we did not expect to come. This makes javascript stand out from other languages and harder to understand for some programmers.&lt;/p&gt;

&lt;p&gt;Now let's get started with an introduction to the Javascript Engine.&lt;/p&gt;




&lt;h3&gt;
  
  
  What is a Javascript Engine?
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;"Javascript Engine is nothing but a program that takes code written in javascript and executes it."&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Internally, several steps are involved while executing the code, but here we just need to know that, the javascript engine takes high-level code, converts it into machine code, does memory allocation, and executes our program.&lt;/p&gt;

&lt;p&gt;Currently, there are several Javascript engines out there in the internet space. but most importantly all the engines follow a standard which is known as &lt;strong&gt;"ECMA Script"&lt;/strong&gt;. ECMA Script tells every engine implementation how the Javascript will be executed or we can say how will it behave that's why with every engine Javascript almost works in the same way.&lt;/p&gt;

&lt;p&gt;The most popular JS Engines are Google V8 engine, Spider Monkey, Javascript Core, Chakra etc. &lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7chj7gzzs8p0z32ma2bn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7chj7gzzs8p0z32ma2bn.png" alt="Javascript-engine javascript engine callstack executioncontext" width="800" height="768"&gt;&lt;/a&gt;&lt;/p&gt;


&lt;h3&gt;
  
  
  Where is this Javascript Engine reside?
&lt;/h3&gt;

&lt;p&gt;Now you are wondering, Ok I got the point what does JS Engine do but where is this JS engine reside? Is this engine came builtin inside my machine or is it situated somewhere else?&lt;/p&gt;

&lt;p&gt;So here is the answer to that question. The Javascript engine is placed inside the JS runtime ( we will cover JS runtime in the next part ) and this JS Runtime is prebuilt inside our browser. So when we install any browser we will get this Javascript Engine embedded inside it and with the help of this engine, the browser can handle all the websites/web apps that use javascript.&lt;/p&gt;
&lt;h4&gt;
  
  
  Components of JS Engine:
&lt;/h4&gt;

&lt;p&gt;Now here starts the main part of JS Engine, the JS Engine has two major components, &lt;/p&gt;
&lt;h5&gt;
  
  
  &lt;strong&gt;Memory Heap &amp;amp; Call Stack&lt;/strong&gt;.
&lt;/h5&gt;

&lt;p&gt;&lt;strong&gt;1. Memory Heap:&lt;/strong&gt; This is the place where all the primitives i.e. functions and objects assigned memory space.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Call Stack:&lt;/strong&gt; As the name suggests this is a data structure which is a stack and is maintained by the Javascript Engine to keep track of the execution flow of our javascript program. Call stack keeps an eye on execution context which we will talk about just in a bit. Whenever a function is invoked a new Execution Context is created and Javascript Engine pushes that execution context inside this stack data structure. As we know stack uses LIFO i.e. Last In First Out property so whenever an execution context finishes its execution it just gets popped out of the stack.&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9gud9jjho6qodyqshwj2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9gud9jjho6qodyqshwj2.png" alt="javascript engine js-engine browser javascript-engine v8" width="800" height="524"&gt;&lt;/a&gt;&lt;/p&gt;


&lt;h3&gt;
  
  
  How code is Internally executed?
&lt;/h3&gt;

&lt;p&gt;Now as we know that javascript code is executed by the JS Engine but how it is executed let's get into that.&lt;br&gt;
When we execute a particular piece of code it goes inside the Javascript Engine it creates a special environment to execute the code which is known as &lt;em&gt;"Execution Context"&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Now the question is when exactly this execution context is created? So to understand this we need to know how many types of execution contexts are there.&lt;/p&gt;

&lt;p&gt;So, majorly there are two types of the execution context. first is the GEC i.e. &lt;em&gt;Global Execution Context&lt;/em&gt; and the second one is the FEC i.e. &lt;em&gt;Function Execution Context&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Now, I know you might be overwhelmed with all this info but just bear with me all info will make sense in just a bit.&lt;/p&gt;



&lt;p&gt;&lt;strong&gt;Global Execution Context:&lt;/strong&gt;&lt;br&gt;
The Global Execution Context is created every time whenever your script file gets loaded inside the Javascript Engine in other words whenever you try to execute a javascript file, first of all, the global execution context is created. Inside that, all of the javascript code get's executed. For every javascript file, there will be only one GEC.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Function Execution context:&lt;/strong&gt;&lt;br&gt;
As the name suggests, the function execution context is created whenever you try to call/invoke a function. As the function execution context is created separately for every function, there can be multiple FEC exist while the code is being executed.&lt;/p&gt;

&lt;p&gt;Both the execution context GEC and FEC are similar just there is only one difference which is the time of creation.&lt;/p&gt;



&lt;p&gt;Now, further, this execution context is divided into two parts:&lt;/p&gt;
&lt;h5&gt;
  
  
  &lt;strong&gt;Memory &amp;amp; Thread of Execution / Code&lt;/strong&gt;
&lt;/h5&gt;

&lt;p&gt;&lt;strong&gt;1. Memory:&lt;/strong&gt; This is the place where all the primitives i.e. functions and objects assigned memory space.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Code:&lt;/strong&gt; The thread of execution or we can say the Code part is the place where our program actually gets executed.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx4z3unyksr0w9t0jda2k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx4z3unyksr0w9t0jda2k.png" alt=" " width="800" height="472"&gt;&lt;/a&gt;&lt;/p&gt;



&lt;p&gt;Both these parts of the execution context have their own phases to process the program.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Memory Creation Phase&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Code Execution Phase&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;In the &lt;strong&gt;Memory Creation Phase&lt;/strong&gt;, all the variables and functions get stored inside our heap i.e. memory area. All the variables and functions are allocated with memory "at once" i.e. the memory allocation starts from the top and goes till the script ends. Initially, the variables are assigned with a default value of "undefined" and the functions are stored as it is written in the code. because of this process, a concept called Hoisting takes place. also, the creation phase adds one more piece to the memory which is known as the "Lexical Environment" but we will not talk about lexical environment and hoisting here we will save it for later.&lt;/p&gt;

&lt;p&gt;In the &lt;strong&gt;Code Execution Phase&lt;/strong&gt;, The variables which have been assigned undefined earlier in the creation phase are now assigned with the actual value defined inside the program and if we talk about function if they are invoked i.e called somewhere in the program it will create its own Function Execution Context inside its parent execution context which by default is GEC i.e global execution context.&lt;/p&gt;



&lt;p&gt;Now let's understand all things we just saw with an example of how our code gets executed. Let's say we have a function which takes a number and returns the square of the given number.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var number = 2;

function getSquare(num) {
  var answer = num * num;
  return answer;
}

var square2 = getSquare(number);
var square4 = getSquare(4);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;Now as the first step Javascript Engine will create a global execution context and as we discussed earlier in this section. This execution context will be pushed inside the Call Stack to keep track of the execution flow.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F82g35nmaga4epin3w9yt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F82g35nmaga4epin3w9yt.png" alt=" " width="800" height="415"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Now our first phase starts ie. the &lt;em&gt;“creation phase”&lt;/em&gt;. Here in our program, we can see there are three variables at the first level (outside any function) &lt;code&gt;number&lt;/code&gt;, &lt;code&gt;square2&lt;/code&gt; and &lt;code&gt;square4&lt;/code&gt;. All these three variables are allocated with memory in our memory space and assigned with &lt;code&gt;undefined&lt;/code&gt;. The function &lt;code&gt;getSquare()&lt;/code&gt; is stored as it is in our memory area.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frtl12oknfflglazuacx7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frtl12oknfflglazuacx7.png" alt=" " width="800" height="413"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;After the memory allocation phase-2, i.e actual code execution starts line by line. As the execution starts it will encounter 1st line which is&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var number = 2;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now as the variable number is already stored inside the memory Javascript Engine will just allocate its value which is &lt;code&gt;2&lt;/code&gt; to it and update inside the memory area as well.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbb62gu5uek1s62okys2i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbb62gu5uek1s62okys2i.png" alt=" " width="800" height="414"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Now, our code execution will come to the function definition but here nothing will happen because the function is already assigned memory in the creation phase. Remember the function code only gets executed only when it is invoked/called.&lt;/p&gt;

&lt;p&gt;Now it will encounter the below line:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var square2 = getSquare(2)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here we are invoking a function by passing an argument and storing its return value to the square2 variable.&lt;/p&gt;

&lt;p&gt;As we are invoking the function a new Function Execution Context is created inside our Global Execution context (GEC) which has its own memory, and code execution part and also, our new execution context is pushed inside the call stack.&lt;/p&gt;

&lt;p&gt;Now as the stack have the &lt;strong&gt;Last In First Out&lt;/strong&gt; property our new execution context will start executing first.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function getSquare(num) {
  var answer = num * num;
  return answer;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For this new execution context, the creation phase will start. We can see here there are two variables that need memory to get stored which are answer and num. In the function execution context if we have some parameters then those parameters are also treated as variables and assigned memory just like this.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh4i9hqt9fncvkf1qvvmt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh4i9hqt9fncvkf1qvvmt.png" alt=" " width="800" height="370"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Now, after phase one again phase two i.e. the code execution phase will start.&lt;/p&gt;

&lt;p&gt;It will encounter the first line of the function &lt;code&gt;“function getSquare(num)”&lt;/code&gt;. The value which we have passed while invoking the function is assigned to the num so the num will be assigned 2.&lt;/p&gt;

&lt;p&gt;Now line 2 which is &lt;code&gt;var answer = num*num;&lt;/code&gt; will start executing. The result of num*num which is stored inside the answer&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl80ods6zmfibikr3klkn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl80ods6zmfibikr3klkn.png" alt=" " width="800" height="366"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;At last return statement will get executed. As all the code is executed the function execution context is popped off from the call stack and the value which we have returned is assigned to square2. Return statement tells a function execution to jump on the previous execution context so it will again start executing GEC.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frucqpwd3mdvynvfgxlbt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frucqpwd3mdvynvfgxlbt.png" alt=" " width="800" height="308"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Now, this same process is followed for square4 and it is assigned with 16. After execution of both the function call, our whole program ends and the global execution context is also popped off from the call stack and memory gets cleaned up.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsir19d1rkt59vedgbsmf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsir19d1rkt59vedgbsmf.png" alt=" " width="800" height="336"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;This is how the javascript program executes under the hood.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;As the Javascript Engine executes one line of code at a time that is why the javascript is "single-threaded"&lt;/em&gt;.&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h4&gt;
  
  
  Tip:
&lt;/h4&gt;

&lt;p&gt;You can see all these things working live inside your browser&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxbf10q9gh5b79qasdp4e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxbf10q9gh5b79qasdp4e.png" alt=" " width="800" height="316"&gt;&lt;/a&gt;&lt;/p&gt;



&lt;h3&gt;
  
  
  Conclusion:
&lt;/h3&gt;

&lt;p&gt;JavaScript Engine and Execution Context is the basis for understanding many other fundamental concepts correctly.&lt;br&gt;
The Execution Context (GEC and FEC), and the call stack are the processes that are carried out internally by the JS Engine to run our javascript code.&lt;/p&gt;

&lt;p&gt;Hope now you have a better understanding of what is JS Engine and in which order a program/code run and how JavaScript Engine allocated memory to them.&lt;/p&gt;

&lt;p&gt;If you like the content please share it with your friends, colleagues, coding-buddies.&lt;/p&gt;

&lt;p&gt;Have a nice day &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>beginners</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
