function Caller in JavaScript

Sometimes in JavaScript development situation arises that you want to execute some block of code based on which function is calling the function being executed.JavaScript gives a nice property named “Caller” which provide can help you in this situation. Lets explore this.
For this I have created a JavaScript file(“myjs.js”) and added below code in it.

   1:  function function1()
   2:  {
   3:      console.log("function1 is called from :" +  (function1.caller!=null? function1.caller.name: " Global") );
   4:  }
   5:   
   6:  function function2()
   7:  {
   8:      console.log("Calling function1 from function2");
   9:      function1();
  10:  }
  11:   
  12:  console.log("Calling function2");
  13:  function2();
  14:  console.log("Calling function1");
  15:  function1();

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Then I created a html page(“Index.html”) and loading the JavaScript code by referencing it as below

http://myjs.js

Now browsing the “index.html” file in the Chrome browser and navigated the console section in the “Developer tools” (Developers tools can be opened using F12 function key) we can see below output.

image

Lets go through the code.

In the JavaScript code we are calling function2() first and which is calling function1(). Inside function1 we have written code to check “function1.caller” , This caller property gives access to the function2 and when we calls any function from another function we can check this property and here we are getting name of the caller function which is function2.

When any function is called globally then this property returns null. here we are calling function1 again(line 15) , In this case when we check the caller property then it returns null.

rare situation , if you want to call the caller function again, here if you want to again call function2 from function1 when it is called from function2. In this case you can use caller.call() method, which executes the caller function again.

Thanks for readying , hope it helped; Happy Coding. 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s