DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Languages
  4. JavaScript Execution Context

JavaScript Execution Context

Yusuf Aytaş user avatar by
Yusuf Aytaş
·
Jun. 29, 13 · Interview
Like (2)
Save
Tweet
Share
7.31K Views

Join the DZone community and get the full member experience.

Join For Free

javascript developers do not pay much attention to the internals of javascript execution, namely execution context. even experienced javascript developers lack the necessary knowledge about execution context.  nevertheless, the concept of execution context is simple. it consists of details for the environment of a function that is executed. to make execution context more clear,  we will try to give some insight for understanding execution context.

first of all, there are two types of execution context: the first one is global and second one is functional. global context can be accessed from anywhere in the program while functional context  can be accessed by the function itself and inner functions of it. accessing parent function context results in scope chains, which is the ability to access the scope of the calling function. let’s examine global and functional context with an example:


//global context 
var x = 1; 
function foo(){ 
	//foo context 
	var y = 2; 
	//console.log(x+","+y+","+z); (1) 
	return function inner(){
		//inner context 
		var z = 3; 
		console.log(x+","+y+","+z); //(2) 
	}
} 
//console.log(x+","+y+","+z); (3) 
foo()();

from the above code snippet, the first log will give a reference error because of the variable z, the second log will execute just fine and the third log will give a reference error for y.  the reference errors occur because the current execution context cannot resolve the identifiers. but, each inner function can see its outer function variables. after giving this basic example, let’s dive into details.
javascript execution context
browsers interpret javascript as single-threaded, which means one thing can be done at one time. similarly, we can see one execution context at one time. when a page loads, global execution context is created and put into the execution context stack. after that, the interpreter creates a new execution context for each function call while preserving scope chains. besides, each created execution context is put into the stack with respect to their order. when any of the execution context is finished, the interpreter removes it and continues to execute previous execution context. below, you can see the figure representing the stack for execution context.
moreover, execution contexts have a life cycle, that can be divided into creation and execution phase. in creation phase, interpreter follows the steps below:

  1. each variable, function or argument is created.(variable object is created)
  2. scope chain is initialized.
  3. value of “this” is determined.

in execution phase, code is interpreted and executed. now, let’s observe each steps of creation phase thoroughly.
in creation phase, variable object is created first. then, arguments object is created. after setting necessary objects, interpreter scans for function declarations and creates a corresponding property for each function in variable object. if there is already reference for the function in variable object, interpreter just overrides it. the same process followed for variable declarations but interpreter just passes declarations that already exists in variable object. after finalizing variable context, scope chain is created and we are ready to run the function. let’s see below function and how it looks like in creation stage.

function foo(z){
   var x = "hello world!";
   var y = function(){
      alert(x);
   };
   function f(){};
}
foo(13);

our function looks like as follows in creation stage.

executioncontextforfoo(){
   variableobject : {
      arguments : {
         0 : 13,
         length : 1
      },
      z : 13, // remember, reference to functions created first.
      f : pointer to the function f 
      x : undefined,
      y : undefined
   },
   scopechain : {...},
   thisforfoo : {...}
}

at this point, hoisting occurs since we first create pointers to the functions and variables, then execute. let’s look at the example below.

(function(){ 
	alert(typeof hello);//prints pointer to hello function 
	alert(typeof hi);//prints undefined 
	var hi = function(){ 
		alert("hi!"); 
	} 
	function hello{ 
		alert("hello!"); 
	}
})(); 

function decelerations are always hoisted, any variable is initialized to undefined. in above example, “hi” is a variable and defined as undefined in variable object.
in short, we have tried to explain execution context and give an overview. for more information, you can follow the link below.
ecma-262

Execution (computing) JavaScript Object (computer science)

Published at DZone with permission of Yusuf Aytaş, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Kubernetes vs Docker: Differences Explained
  • Automated Performance Testing With ArgoCD and Iter8
  • Secrets Management
  • Using AI and Machine Learning To Create Software

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: