It's worth considering that everything in JS code can be viewed as a property of an execution context, whether it's a global, function, or eval() execution context. Why is this the case?
Each execution context has its own unique lexical and variable environments as properties. This means that every time a new execution context is created, new instances of variableEnv objects are also created along with new variables and references.
These lexical and variable environments store all your variables and their identifier-value mappings.
Closures serve as a good example to explain this concept:
function function0(sizevar) {
s = sizevar * 2;
return function function1() {
console.log(s);
console.log(sizevar);
};
}
var size12 = function0(12);
var size14 = function0(14);
size12()
size14()From the example above, when you return the embedded function1, you're essentially returning a reference to a specific execution context's lexical and variable environment where that function instance/object belongs as a property.
When function0() returns function1(), the scope chain is connected to the state of the execution context (i.e., its variableEnv), even after that execution context has finished executing.
Is this a correct way to think about JS variables?
Does anyone have a resource like a link, code snippet, or image depicting an actual JS execution context object?