Go to the top

STOP Creating Functions globally

Ronit / Blog, Javascript, Technical / 0 Comments
stop creating functions globally

"STOP Creating functions globally?  Ronit what are you saying?"

"Yes, guys I am saying correctly"

 

In today's post, I will highlight a Big Mistake which many of us do in our code and we should immediately stop doing that mistake, by the end of this post you will surely understand why I gave the title "Stop Creating Functions globally".

To understand the mistake we do in our code let's first understand a situation first.

Fuction dependency diagram

Function dependency diagram

 

From the above diagram, it can be understood that our main function is Function A which on some condition either calls Function B or Function C.

Function B internally uses Function B1, Function B2 and Function B3 and similarly, it happens inside Function C too.

 

"Situation clear to you guys, Right?"

Now let's see how a lot of us write code for this situation.

function A(){
  if(someCondition){
    B();
  } else{
   C();
  }
}

function B(){
 //Some code
 B1();

 //Some code
 B2();

 //Some code
 B3();
}

function B1(){
 //some code
}

function B2(){
 //some code
}

function B3(){
 //some code
}


function C(){
 //Some code
 C1();
 
 //Some code 
 C2();
 
 //Some code C3(); 
}

function C1(){
//some code
}

function C2(){
//some code
}

function C3(){
//some code
}

The above code seems to be perfectly correct, and indeed it is. But today I will highlight the mistake in it.

When the above code is run as all the functions are declared globally hence these functions will be created immediately on script load and all the functions will occupy the memory and are available to all even if not required.

Which means that the condition inside Function A is anything all the functions related to Function B  and Function C will occupy the memory.

"Does keeping all the functions in the memory on page load seems a good idea?"

I know all of you will answer a BIG NO.

"So Ronit, what's the solution?"

Create functions on demand

Let me make you guys understand with the updated code considering "Create function on demand"

function A(){
  if(someCondition){
    B();
  } else{
   C();
  }
function commonForBAndC(){
 // Some code
}

function B(){
 /*
 * Create functions required by B inside B
 */
 function B1(){
  //some code
 }
 
 function B2(){
  //some code
 }
 
 function B3(){
  //some code
 }

commonForBAndC();
 
 //Some code
 B1();
 
 //Some code 
 B2();
 
 //Some code
 B3(); 
}


 function C(){
 /*
 * Create functions required by C inside C
 */
   function C1(){
     //some code
   }
 
   function C2(){
     //some code
   }
 
   function C3(){
    //some code
   }

   commonForBAndC();
 
   //Some code
   C1();
 
   //Some code 
   C2();
 
   //Some code
   C3(); 
  }
}

In the above code, you can understand the approach - "Create a function in the scope only in which it's required."

As you can see the Function commonForBAndC is required in Function B and Function C both hence I have created the function in the scope which is available to both Function B and Function C.

So writing the above function will create only Function A so all the functions don't get loaded and occupy memory on script load, the remaining functions will be created only when it's parent function is called, so like this the scope of the functions are made closed-ended and only available to those who need it not all. 

"So does now it make sense why we should STOP creating functions globally?"

 

The above recommendation is made on my personal analysis and knowledge, this recommendation has not been recommended on any official sources of Javascript.

 

I would request all of you to kindly write your views in the comment section below and correct me if I am wrong, I would love to learn from you.