Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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
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>
Caller name for func3(): func1 func2 Caller name for func2(): func1
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>
Finding the caller name of child() function using arguments property. parent.
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();
Trace
at func3 (filename.js:2:13)
at func1 (filename.js:10:5)
at Object.<anonymous> (filename.js:13:1)
Trace
at func3 (filename.js:2:13)
at func2 (filename.js:6:5)
at func1 (filename.js:11:5)
at Object.<anonymous> (filename.js:13:1)
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().
Comparison of Methods
| Method | Browser Support | Strict Mode | Use Case |
|---|---|---|---|
| function.caller | Good | Not supported | Simple caller detection |
| arguments.callee.caller | Limited | Not supported | Legacy approach |
| console.trace() | Excellent | Fully supported | Debugging and full stack trace |
Conclusion
We have learned the three approaches to finding the name of the caller function. The console.trace() method is recommended for modern development as it provides complete stack information and works in strict mode. Avoid using arguments.callee.caller in new projects as it's deprecated.
9K+ Views
