<?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>DEV Community: Belal Ahamed</title>
    <description>The latest articles on DEV Community by Belal Ahamed (@belalahamed).</description>
    <link>https://dev.to/belalahamed</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%2F3964826%2F9619a569-111b-424b-a8b1-cc65b7b47339.png</url>
      <title>DEV Community: Belal Ahamed</title>
      <link>https://dev.to/belalahamed</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/belalahamed"/>
    <language>en</language>
    <item>
      <title>JS Internals : JavaScript Execution Context</title>
      <dc:creator>Belal Ahamed</dc:creator>
      <pubDate>Tue, 02 Jun 2026 14:55:39 +0000</pubDate>
      <link>https://dev.to/belalahamed/js-internals-javascript-execution-context-1gp</link>
      <guid>https://dev.to/belalahamed/js-internals-javascript-execution-context-1gp</guid>
      <description>&lt;p&gt;Before jumping into start writing to code in JavaScript, you should have the understanding of how JavaScript executes code behind the scene and it can be well explained by the javascript execution context.&lt;/p&gt;

&lt;p&gt;In this article, I am going to explain how javascript executes code with execution context. That is going to be the most fundamental topic of JavaScript, so you should make good understanding of it.&lt;/p&gt;

&lt;h2&gt;
  
  
  JavaScript Execution Context
&lt;/h2&gt;

&lt;p&gt;JavaScript Execution Context is the area in JavaScript where the code execution happens.&lt;/p&gt;

&lt;h3&gt;
  
  
  Types of Execution Context
&lt;/h3&gt;

&lt;p&gt;In JavaScript two different execution contexts are created.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Global Execution Context: Whenever code execution of a program starts, a Global Execution Context is created at first.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Local Execution Context: Whenever a function is called, a local execution context is created for that function.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Different Phases in Execution Context
&lt;/h3&gt;

&lt;p&gt;There are two different phases of every execution context either it is global or local.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Code Phase: Code is executed line by line from top to bottom.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Memory Phase: Variables and function bodies are stored into memory.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Understanding Execution Context
&lt;/h3&gt;

&lt;p&gt;Let's take an code example below to understand JS execution context:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Code execution started!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;35&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Age is incremented to: &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nf"&gt;incrementAgeByTwo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;incrementAgeByTwo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="cm"&gt;/**
Output:
    Code execution started!
    undefined
    Age is incremented to:  37
*/&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Step-by-step code execution of the above code:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; A global execution context is created with two different phases, a memory phase and a code phase.&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;In memory phase, variables and function bodies are stored in memory.  &lt;code&gt;age&lt;/code&gt; with value undefined and the function body of &lt;code&gt;incrementAgeByTwo()&lt;/code&gt; is stored in memory.&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%2Fcb6egfgwc74jfsd1aaaz.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%2Fcb6egfgwc74jfsd1aaaz.png" alt=" " width="800" height="416"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;In code phase, the code starts executing line by line from top to bottom.&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%2Fw1t842srhjmoamb9rt44.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%2Fw1t842srhjmoamb9rt44.png" alt=" " width="800" height="294"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Prints &lt;code&gt;Code execution started!&lt;/code&gt; in console.
&lt;/li&gt;
&lt;li&gt;Prints value of &lt;code&gt;age&lt;/code&gt; which is &lt;code&gt;undefined&lt;/code&gt; in console.
&lt;/li&gt;
&lt;li&gt;Value of &lt;code&gt;age&lt;/code&gt; is updated to 35
&lt;/li&gt;
&lt;li&gt;Creates local execution context of the function &lt;code&gt;incrementAgeByTwo()&lt;/code&gt; and prints 37, the value returned by the function in console.&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%2F49ngnq2cap634yac6sqd.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%2F49ngnq2cap634yac6sqd.png" alt=" " width="799" height="273"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdeb</category>
      <category>web</category>
      <category>executioncontext</category>
    </item>
  </channel>
</rss>
