The name property of the Function object is used to get the function’s name.
name is a read-only property of the Function object.
function.name
Let’s observe several functions and use function.name to return their name.
console.log("\Normal Function")console.log("-------------------------")function test(){ }console.log(test.toString(), "-- name -- ", test.name);let fn1 = test;console.log(fn1.toString(), "-- name -- ", fn1.name);let fn2 = function(){ }console.log(fn2.toString(), "-- name -- ", fn2.name);console.log("\nFunction Expression")console.log("-------------------------")let fn3 = function f() { }console.log(fn3.toString(), "-- name -- ", fn3.name);console.log("\nObject function")console.log("-------------------------")let obj = { fobj() { } }console.log(obj.fobj.toString(), "-- name -- ", obj.fobj.name);console.log("\n with new Function constructor")console.log("-------------------------")let fn4 = (new Function); // "anonymous"console.log(fn4.toString(), "-- name -- ", fn4.name);console.log("\n Arrow function")console.log("-------------------------")let arrow = ( () => {} ).name;console.log("Arrow function name", arrow); // empty stringconsole.log("((){}).name => ", ( () => {} ).name); // empty stringconsole.log("\n Bind Function")console.log("-------------------------")function fn5() { };let bindFn = fn5.bind({});console.log(bindFn.toString(), "-- name -- ", bindFn.name);
The following explanations can provide a better understanding of the code above.
The test.name will be test.
function test() {
}
We used the test.toString method to print the function as a string.
function test(){
}
let fn1 = test;
fn1.name; // test
We assigned the test function to an fn1 variable and accessed the name property through the fn1 variable like fn1.name. This will return test as the function name.
let fn2 = function(){
}
fn2.name;
We created an anonymous function and assigned it to a variable. Internally, the function name is inferred as the variable name. So, the fn2.name will hold fn2 as its value.
let fn3 = function f(){
}
fn3.name;
We created a function expression with the function name f and assigned it to an fn3 variable. Now, the fn3.name holds f as the value.
let obj = {
fobj(){
}
}
obj.fobj.name; // fobj
We created an object that has the fobj function. The obj.fobj.name will hold fobj as the function name.
let fn4 = (new Function);
fn4.name;
We created a function with new Function, which will internally generate a function called anonymous. The fn4.name will hold anonymous as a value.
let arrow = (()=>{}).name;
arrow; // ""
We created an arrow function. The name property of the arrow functions is an empty string.
Additionally, the name of the anonymous function is also an empty string if it is not assigned to a variable.
(function(){}).name; // ""
function fn5() {};
let bindFn = fn5.bind({});
We created an fn5 function and bound it to an empty object. For the bind function, JavaScript will add the word bound before the function name.
In our case, the bindFn.name will have bound fn5 as a value.