Multiple ways to get function name javascript?(Example)

Multiple ways to get function name javascript?(Example)

In this post, You learn how to get function names from inside a function and outside a function.

Functions can be normal, anonymous, or named functions, and arrow functions

The function can be created with a name called named functions as seen below.

function namedfunction() {
  // code inside the function
}

Also, functions created without a name are called anonymous functions (without a name)

var anonymousFunction = function () {
  // code inside the function
};

ES6 introduced arrow functions using lambda expressions

var anonymousFunction =(=> {
  // code inside the function
};

We can get the function name using

  • function.name: the function name returned, introduced in ES6
  • object.constructor.name : using constructor name

How to get Function name using ES5

The first way, ECMAScript 6 introduces a Function object which has a name attribute to give the name of the function. It is readonly property.

Let’s see how to get named functions.

// Normal Function example

function normalFunction() {
  console.log("my function");
}
console.log(normalFunction.name); //normalFunction

// Anonymous Function example
var anonymousFunction = function () {
  // code inside the function
};

console.log(anonymousFunction.name); //anonymousFunction

// Arrow Functione example
var arrowFunction = () => {
  // code inside the function
};
console.log(arrowFunction.name); //arrowFunction

In this example,

  • Normal Functions returns normalFunction , and Anonymous Functions returns anonymousFunction for both name property
  • Arrow Functions returns arrowFunction for name property

Use constructor.name property

Another way using prototype.constructor.name to get the name of the function

We can also get function names using object

Let’s create an object of function.

The object has a constructor object which has a name property. This can also be invoked with the class prototype as seen below.

Here is a syntax

{function}.prototype.constructor.name
{object}.constructor.name

Here is a code to for example get the name of the named function.

// Normal Function
function normalFunction() {
  console.log("normalFunction"); //Person
}
var mf = new normalFunction();
console.log(normalFunction.prototype.constructor.name); //normalFunction
console.log(mf.constructor.name); //normalFunction

Here is a code for example to get the name of anonymous function

// Anonymous Function example
var anonymousFunction = function () {
  // code inside the function
};

console.log(anonymousFunction.name); //anonymousFunction
console.log(anonymousFunction.prototype.constructor.name); //anonymousFunction

For Arrow Functions, the name property returns the name, constructor.name returns an error as the constructor is undefined.

// Arrow Functione example
var arrowFunction = () => {
  // code inside the function
};
console.log(arrowFunction.name); //arrowFunction
console.log(arrowFunction.prototype.constructor.name); //error  Cannot read properties of undefined (reading 'constructor')

How to get the running function name

Suppose, we have a function in javascript running, that wants to get the name of the function inside a body.

In multiple ways, we can get a function name.

First, use the arguments.callee.toString method to get the name of the function. The second way using the arguments.callee.name property.

  • arguments.callee.toString method

arguments.callee returns the function definition, and from that definition, gets the function name using toString() functions.

Here is a complete code example

function myfunction() {
  var functName = arguments.callee.toString();
  console.log(functName); // prints function definition
  functName = functName.substr("function ".length);
  functName = functName.substr(0, functName.indexOf("("));
  console.log(functName);
}
myfunction();

Another way is to get arguments.callee.name property

In this example, the Function is defined and called from the outside global scope.

function myfunction1() {
  console.log(arguments.callee.name);
}
myfunction1();

How to get dynamic function names in javascript

dynamic functions created using variable declaration by assigning functions.

Dynamic functions contain different names.

Let’s create a dynamic function with a variable containing the name of the function.

Inside a function, you can access the name directly that returns the name of the function.

var dynamicfunction = "myfunction";

window[dynamicfunction] = function () {
  console.log(dynamicfunction);
};

Conclusion

You learned multiple ways to find the name of the function inside a running function and from the global scope outside.