Variable environment is basically the location where a variable lives in memory. Variables with the same name that are declared in the global execution context are different from the ones that resides in a function’s execution context. Each execution context has its own variable environment.

To demonstrate, consider the following JavaScript code:

function fn1() {
  var sampleVar = "World";
  console.log(sampleVar);
  fn2();
}

function fn2() {
  var sampleVar;
  console.log(sampleVar);
}

var sampleVar = "Hello";
console.log(sampleVar);
fn1();

which will output the following on the developer console:

Hello
World
undefined

First, the global execution context is created and the sampleVar variable declared on line 12 is put into memory during the creation phase and then gets assigned the string "Hello" as its value during the execution phase. With that said, the variable environment of the global execution context (in a browser) is the window object.

Afterwards, fn1 is invoked and it creates its own execution context that is added on top of the global execution context. The execution context of fn1 will be the variable environment of the sampleVar variable declared on line 2 and will be assigned the string "World" as its value.

Lastly, fn2 is invoked inside fn1 which creates another execution context that is added on top of the execution stack and the sampleVar variable declared on line 8 will reside in this execution context and will be assigned the value of undefined.

Previous Post: Function Invocation and the Execution Stack in JavaScript

Next Post: The JavaScript Scope Chain

This is part 4 of the JavaScript Concepts series.