"Invocation Context" and "Execution Context" in JavaScript: Are We Talking of the Same Thing

Invocation context and execution context in javascript: are we talking of the same thing?

The two terms are closely related but not the same thing.

In a nutshell they define scope vs. context. Scope is about the environment that code runs in (kind of like a room - - it's about where the code is) and context is about an actual object that caused some code to be executed (like who was responsible for putting you in that room).

An "execution context" refers to the "scope chain" that is in
effect when some code is running. A scope chain is a list of
memory locations that should be checked (in a particular order) for
identifiers (variable, constant and function names) to be resolved to
a value. Since JavaScript is executed in a single-threaded
environment, only one task can be executed at a time. The currently
executing code (and its associated scope) define the execution
context.

A simple example can be shown like this:

// This area is in the Global execution context (scope) because the code is 
// not wrapped in a function or any other kind of code block.
var x = "Global";

// "Global" is the result because the JavaScript engine will always look
// in the current scope for a declaration for the identifier in question.
// It will find a declaration for "x" right here in the Global scope, so
// that's the value it will use.
console.log(x); 

var y = "Also Global";

function parent(){
   // This area is in the "parent" execution context (scope)
   var x = "parent";

   // "parent" is the result (not "Global") because when this function is
   // executing, its scope is the most accessible. The JavaScript engine
   // looks here first to find out what "x" is. This is known as variable 
   // "hiding" because the x in the parent scope hides the x in the Global scope.
   console.log(x); 

   function child() {
      // This area is in the "child" execution context (scope)
      var x = "child";

      // "child" is the result (not "Global" or "parent") because when this 
      // function is executing, its scope is the most accessible. The 
      // JavaScript engine looks here first to find out what "x" is. This
      // x now hides the x in parent, which is hiding the x in Global.
      console.log(x); 

      // "Also Global" is the result here. First the current execution
      // context (scope) is checked for a "y" variable. There isn't one,
      // so the next scope in the scope chain (function parent) is checked.
      // There is no "y" declared there either. So, again, the next highest
      // scope in the chain (Global) is checked and that is where "y" is
      // found, so the value of that "y" is used.
      console.log(y);

      // Here, we will get "undefined". All the scopes in the chain will
      // be checked and if we go all the way up to Global and still don't
      // find a declaration for "z", there is no other scope to look in.
      console.log(z);
   }
   child();
}

parent();

Why is the execution context of ES6 IIFEs and ES5 IIFEs different?

It's nothing to do with ES5 or ES6, arrow functions always get the enclosing function's context. Function invocation without using 'use strict'; is always get the global object as context (window in the browser for example), when used, the context is undefined by default.

This is a very good article explaining the topic:

https://rainsoft.io/gentle-explanation-of-this-in-javascript/

Execution context's in JavaScript

My question is, will the for loop have it's own execution context?

NO. The foor loop won't have it's own execution context. Only functions creates a new execution context.

Each time a function is called, a new execution context is created, even if the function call is inside another function definition. The scope that the function has available is defined by its lexical environment:

Anyway, the execution context of the for loop is the one created by copyArrayAndMutate function, that is the scope used by the for loop is the one that belongs to the copyArrayAndMutate execution context, that's why the loop has access to the output variable.

Inner function does not return changes to variable assigned in outer function

The reason I wasn't getting the expected output for masterCounter was because, in the timeKeyAdditionCheckfunction, I thought I was making a copy of the object in the masterCounter array, but I actually created a reference instead. Here is the moment in my code when I unintentionally created a reference instead of a copy:

let newEntry = masterCounter[masterCounter.length - 1];

When I thought I was adding a unique object to the array, I was instead adding the reference to that same object at the end of the array.

I fixed it using the following code:

while (i < timeKeysNeeded) {
                
   let lastObjectRef = masterCounter[masterCounter.length - 1];
   let newEntry = Object.assign({}, lastObjectRef)
   newEntry.timerange = newEntry.timerange + 60;
   masterCounter.push(newEntry);
   i++;
}

I used Object.assign() to create a copy of the last object in the array instead of creating another reference.

Javascript: why do callback functions with global execution context have access to scoped variables?

How is the callback function handled in terms of definition and then
invocation when thinking about scope and execution context?

A function scope is based on where it is physically present in the lexical environment

Explanation: The callback is lexically present in the function test(), so it will always try to find the value of this either within itself(if present) otherwise it will see its value in the outer environment (which is function test in this case)

The test function and LogCb function will follow the same practice. In this case the outer environment will be global

how does the engine keep track of scope separately to execution
context?

Lexical Environment: Where something sits physically in the code you write.

Execution Context: A wrapper to help manage the code that is running.

Now in your code there are lot of lexical environments. Which one is currently running is managed via execution contexts. It can contain things beyond what you have written in your code.

Whenever execution context is created we have three things that are available to us:

1. Global object (window) :Any variable or function in the global scope is linked to window object
2. 'this'
3. Outer environment

So depending on which execution context is currently running, these things will vary as per where it is physically or lexically present in code. For example the outer environment for cb is the function test()

Is this a scope error/leak in the JavaScript for-loop implementation of my browser or my misunderstanding?

In your first bit of code the H in bFunc is a global variable. The H in testFunc is not because it's an argument to the function. The zzz in your second example is always in global scope. let const and var can be used to control variable scope.

var bFunc = function(){
    for(H=1; H<5;H++){}
};
var testFunc = function(H){
    console.log("CallId 1, window.H: " + window.H);
    bFunc();
    console.log("CallId 2, window.H: " + window.H);
};

testFunc(0);

---

Related Topics