JS Essentials
Published in

JS Essentials

Execution Context Creation & Hoisting

Hi all ! In the last post of JS Essentials we have learnt about, The Global Object & Global Environment. In this post we will be learning about execution context creation and hoisting.

To understand how JavaScript creates an execution context, first we need to understand the term ‘Hoisting’. Look at the below example:

fun();
console.log(greet);
function fun() {
console.log(“fun() called!”);
}
var greet = “Hello World!”;

What output would you expect ? In most of the programming languages, we will consider this as an error, since it executes the code line by line & one line at a time. Since on the very first line there is a method called fun(), which is not defined yet. But JavaScript does not work like that. When you execute above lines of code, it will generate output as:

fun() called!
undefined

So even though the function was below the calling, it still ran. And the variable ‘greet’ is available on the second line, though it doesn’t have a proper value, but that variable somewhere is declared on that file. Now, if we do not define the variable ‘greet’ at all, then our compiler will throw an error as : “Uncaught ReferenceError: greet is not defined”. And this phenomenon is called ‘Hoisting’.

But don’t be under the wrong impression the way it is explained, means, in most of the websites it’s explained as — In JS, variables & functions are hoisted and moved to the top by JavaScript engine, as if they moved physically up to the top. It’s not like var greet = “Hello World!”; copied and moved at the top.

In JS, the variables & functions are to some degree available even though they’re written later in the code. To understand what JS is doing here, we need to understand the execution context and how it is created.

The execution context is created in two phases, the first phase is called the Creation Phase. In this phase we know, we have the ‘global object’ & ‘this’ which is set up within the memory that we have already seen in my past posts. Apart from that there is an outer environment. In this phase, the parser runs through the code and begins to set up what we have written for translation, it recognises where we have created variables & functions. In creation phase, it sets up the memory space for the variables & functions, and this step is called ‘Hoisting’.

Before the code begins to be executed line by line, the JavaScript engine has already set aside memory space for the variables and functions that we have created in that entire code we have built.

So those functions & variables exist in the memory, so when code executes line by line, it can access them. But functions entirely placed into the memory, means the function — it’s name and code inside the function is being executed.

The next phase of execution context is execution phase, where it actually executes the code line by line, and variables/functions assignments are set, example: var a equals to 3. So in creation phase, when the JS engine sets up the memory space for variable ‘a’, it doesn’t know it’s value at that time, so it puts the placeholder there called undefined’. It means oh, I don’t know what this value is yet.

I hope hoisting is now clear, we will more talk about the ‘undefined’ in next post. Thanks for the reading !

Conclusion:

  • Execution context has two phases: Creation and Execution phase.
  • All variables in JavaScript are initially set to ‘undefined’. And functions are entirely sitting in the memory at creation phase. This is hoisting.

Thanks for reading !

--

--

--

Place to learn JavaScript concepts in simple manner.

Recommended from Medium

Friday Frontend: Entering Holiday Craziness Edition

My understanding of JavaScript filter

Recursive algorithms and writing MergeSort in JavaScript

Tricky JavaScript

Getting Started With Axios

Create a Custom Input for Ion-Select

How to Add a Badge to Icons in React Native

React Hooks— useState

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anjali Tanpure

Anjali Tanpure

JS | Angular | React | PWA

More from Medium

call, apply and bind in JavaScript

The History Of JavaScript ⌛

Javascript Private Properties, setting and getting errors!

Play To Learn Story

NVM Express Primer