Photo by on Shane Rounce Unsplash As a Programmer have you ever wondered how JavaScript engine executes your code when its run inside the ? And how they keeps track the local scoping using when they executed? JavaScript browser Lexical Environment In this article I will explain to you how it works behind the scene. When your code runs in the JavaScript Engine. Each statement of your code is executed in a certain Execution Context . In JavaScript environment there are 2 main types of Execution Context. First is when your code is initially run even if it’s spread across to a page using a tag, JavaScript creates one Global Execution Context in which your code was placed in when they execute and runs inside the browser. Second is the from the word itself it was created when you invoked the function that you define. , Global Execution Context <script /> Function Execution Context Each time you invoked a function it will create a new Function Execution Context. For instance: var message = ‘Hello there’; function foo(message) {bar(message);} function bar(message) {console.log(message);} foo(message); When this code runs, JavaScript engine create one and push it to . Global Execution Context Execution Context Stack Execution Context Stack — is a placed where our Global and Function Execution Context was handled and manipulated. When we call the function Global Execution Context was paused because they can only execute one code at a time. After that JavaScript engine will create a new Function Execution Context for foo and push it into Execution Context Stack, when function executed we invoked the inside definition**.** JavaScript engine paused the execution context in function and creates a new for and pushed it into stack. After the was finished executing it will popped out in the and go back to and resume its execution. Same process will applied to the until we finished and go back to the Global Execution Context and resume the execution. foo, JavaScript is a single threaded environment foo bar foo foo Function Execution Context bar bar Execution Context Stack foo foo How Execution Context push in Execution Context Stack. As we already know how the JavaScript Execution Context Works let’s dive in to and explained how they works. Lexical Environment Most likely works in when you have a function and inside that function you have another function. Lexical Environment code nesting For instance: var a = ‘a’; function foo() { var b = ‘b’; function bar() {var c = ‘c’; console.log(c); // You can access me here. console.log(b); // You can access me too.. console.log(a); // You can also access me.. } bar(); } foo(); Nothing special here in our code we define a nested function. When this code runs initially a was created and and was stored in that. When we invoked the below a new environment was created and stored the in foo environment which is only visible to because bar is an inner function in environment. When invoking the we also called the which is also creates a new environment for their definition. Global Environment a foo function foo variable b bar function foo foo() bar() function “Whenever we call a function, a new function execution context is created and pushed into execution context stack with a new associated lexical environment [[Environment]] ”. Diagram for Lexical Environment how they works Inside the we do logging to checks if the variables that we create is visible and if we can access it in their environment. bar function When was logged in the bar environment, it was displayed successfully obviously because it was inside his environment. variable c However when when we do logging the variable and variable it was also successfully displayed. How this is happened? b a Lets discuss. In the second logging we call the which is not in scope**.** So javascript does this internally to search it in other O** ** until they found that variable. In our case, they found the variable at since the bar function has reference to foo function the foo function environment is not pop out in the Execution Context! When was logged it was also successfully displayed because is stored in the Global Execution Context. Everyone can access the Scope in the Global Execution Context. variable b bar function uter Environment b foo function variable a variable a Accessing other environment Now that you understand how the Execution Context and Lexical Environment works Internally in JavaScript. You may now avoid some subtle bugs in your JavaScript Program. If you enjoy reading this article give a clapped for me… Hope it Helps ^_^ Thanks. “Don’t be a JavaScript Mediocre.” Follow me on twitter https://twitter.com/llaudevc/
