Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do you find out the caller function in JavaScript?
In this tutorial, we will learn to find out the caller function in JavaScript. The function is the reusable code, and users can call it from anywhere. But sometimes, they need to know who is the caller function to perform some operation.
For example, suppose that we can call any single function from another 2 to 3 functions, and we need to perform some operation according to the caller function. Users can understand this scenario by the below code example.
function func3 () { If ( caller is func2() ) { // code for some operation } else if ( caller is func1() ){ // code for some different operation } } function func2 () { func3(); } function func1 () { func3(); }
Using the above example, users can understand the need to know the caller function.
Here, we have different methods to get the function name.
Using the function.caller Property
In this approach, we will use the function.caller property in JavaScript.
It returns the name of the function from which the current function is invoked.
It returns the null value if the function is invoked from the top-level JavaScript code.
Also, users can’t use this method with the strict function and async function as it always returns the null value for this kind of function.
Syntax
Users can follow the below syntax to use the caller property for any function.
function_name.caller.name;
Parameters
Caller property doesn’t contain any parameter.
function_name − It is the name of the function, for which the user wants to find the caller function.
Example
In the below example, we have created 3 functions and invoked one function from another function. When we invoke the function, we are rendering the caller function on the screen using the function.caller.name property.
<!DOCTYPE html>
<html>
<body>
<h3> Finding the function caller name in JavaScript. </h3>
<h4> Caller name for func3():</h4>
<div id="caller1"> </div>
<h4> Caller name for func2(): </h4>
<div id="caller2"> </div>
<script>
let caller1 = document.getElementById("caller1");
let caller2 = document.getElementById("caller2");
function func3() {
caller1.innerHTML += func3.caller.name + " <br/>";
}
function func2() {
caller2.innerHTML += func2.caller.name + " <br/>";
func3();
}
function func1() {
func3();
func2();
}
func1();
</script>
</body>
</html>In the above output, users can see that it prints the function name from which currently executing a function is invoked.
Using the Arguments Property of the Function
In JavaScript, every function contains the arguments object. Every function has its own arguments object, which includes the properties of the function, such as the caller name of the function and values of the parameters of the function.
Syntax
Follow the below syntax to get the function caller name using the arguments object of the respective function.
arguments.callee.caller.name
Example
In the below example, we have used the arguments property to find the function caller name. Here, we have create two functions name child() and parent() function. Also, we have invoked the child() function from the parent() function.
<html>
<head>
<title> find out the funciton caller name in JavaScript. </title>
</head>
<body>
<h2> Finding the function caller name in JavaScript. </h2>
<h4> Finding the caller name of child() function using arguments property. </h4>
<div id="caller1"></div>
<script>
let caller1 = document.getElementById("caller1");
function child() {
caller1.innerHTML += arguments.callee.caller.name + ". <br/>";
}
function parent() {
child();
}
parent();
</script>
</body>
</html>Logging the Stack Trace on the Console
Finding the function caller name using the stack trace is the most popular method to get the function name in JavaScript. As the stack trace name represents, it is the stack of active frames while we execute the program. It keeps track of the memory allocation to the program. When invoking a new function, it goes into the stack trace because our program allocates the new memory to that function.
So, the stack trace contains all the details of the errors, the operation, function call, etc.
Syntax
Users can follow the below syntax to get the stack trace.
console.trace();
Example
In this example, we will print the stack trace using the above method in function to check the caller name of the function. We can see the output in the console, and users can open the console by pressing the ctrl + shift + I key on the keyboard.
function func3() {
console.trace();
}
function func2() {
func3();
}
function func1() {
func3();
func2();
}
func1();To run the above code, you should have installed node JS on your local computer. Users can use the below command to run the above code.
Command
node filename.js
Output
We have run the above code using the Node Js in the terminal. Users can see the above output. It clearly shows that in the first trace, func3() is invoked from func1() only, and in the second trace, it shows that func2() is invoked from func1() and func3() invoked from the func2().
Conclusion
We have learned the three approaches to finding the name of the caller function. The first approach is the easiest and is supported by all modern browsers. The second approach is the most popular one as it prints the whole stack trace, and using the stack trace, users can also keep track of the errors and overcome them easily. The last approach is the oldest. Even though some of the browsers do not support the third approach, it is recommended to use either the first or second approach.
5K+ Views
