JavaScript: Understanding underlying behavior #01

This series will be covering JavaScript Engine’s behaviour with our code. It is essential for us to understand our code execution process.

Whereas most of the time we are following a tutorial or a book that begins with Variables and Loops, there are certain aspects which end up being memorised than understood.

My take in this series will be to help you understand how Javascript behaves while executing your code under the hood.

There are three basic fundamental concepts that we need to understand in order to get the real idea about JS underlying behaviour.

Syntax Parsers,

Lexical Environment and

Execution Context.

Let's begin by understanding Syntax parsers:

Every Programming language has set of grammatical rules which is required to follow while writing our code. Syntax parsers are programs that read our code and checks if the grammar required for JavaScript in our case is correct or not ?

Based on that actions of throwing an error or allowing the code to run is actioned.

Lexical Environment:

This refers to where something in your code (be it variable or functions etc.) sits physically. To make it clear, in JS it matters where you put your functions and variables. Although this precedence is not something required for us to concentrate while understanding Lexical Environment, but we should just keep this is mind, for certain languages it matters where you put your code.

Execution Context is very important. I want you to pay a very close attention to this. Read it multiple times if you have to but this is an important aspect of how JavaScript behaves.

Which area of your code is running is managed by execution context. There can be multiple parts in your code (say many functions sitting in their own lexical environment). Execution context basically provides the wrapper for the code to run, it manages which part of the code will run currently. JavaScript executes only the block which is being called at that moment. Meaning that if a particular code block is being executed other code blocks will not be considered for execution and will only run when the current execution context has finished executing that particular code block.

It is okay if you do not understand this, it took me quite a time to wrap this around my head as well. Let’s understand with an example.

function a(){
var c;
function b(){
var d;
var d;

In the above code first the a() is called. The moment “a” function is called JavaScript creates an execution context for “a()” while running through the function we can see another function which reads as “b()” is called within a(), for this JS will create another execution context, an execution context stacked on top of another execution context.

Picture 1

Picture 1 illustrates how the execution context is being stacked on top of each other but keep this in mind JS will not run Execution Context 1 in this case until its finished with Execution context 2.

Now let’s go back to your code again. What we see is now we have a variable named “d” inside function “b()”, at this point JS will halt “execution context 2" and will create another execution context for “var d”.

Picture 2

The moment JS is done initializing var d it will pop off the Execution context 3 and figure will be same as “Picture 1". Again, execution context of “b()” will also be popped off when done. The thing to consider at this point is that Javascript is not working with “Execution Context 1” until it finished up with other contexts and variable “var d” you see at last line in our code will run after all the execution context has been finished because it has last precedence (JavaScript precedence is always line by line from top to bottom).

Re-read this article if you have to. Comment if more explanation is needed but in order to proceed further on this topic we need to understand this very well.

Postscript: These concepts are taken from an amazing tutorial on Udemy. You can give it a shot (trust my words it is worth every penny). If not, I will surely be posting important concepts in my continuation of this series. I am trying to put in concepts that not every 300-page book will be explaining to you.

Let me know your feedback in comments below.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.