JavaScript wants your functions to have names

JavaScript function names can be quite helpful for debugging and logging, but how does JavaScript determine what a function's name is?

JavaScript functions have a name property

The first thing to note, since it's not at all obvious, is that JavaScript functions are special kinds of objects with a few default properties:

function myFunction(){}; console.log(Object.getOwnPropertyNames(myFunction)); // [ 'length', 'name', 'prototype' ] 

One of those properties is the name field. That's where your function's name is stored.

Function names are readonly

If we take a named function and look at its name property descriptor, we see that it is readonly:

function myFunction(){}; console.log(Object.getOwnPropertyDescriptor(myFunction, 'name')); // { // value: 'myFunction', // writable: false, // enumerable: false, // configurable: true // } myFunction.name = 'anotherName'; // TypeError: Cannot assign to read only property 'name' of function 'function myFunction(){} 

Notice that the name property is configurable by default. So while we can't directly re-assign the name using an assignment operation, we can still use Object.defineProperty to rename a function:

function myFunction(){}; Object.defineProperty(myFunction, 'name', {writable: true, value: 'myRenamedFunction'}); console.log(myFunction.name); // myRenamedFunction 

JavaScript wants to name your functions

You can explicitly name a function by using the function myFunctionName(){} syntax. But when you don't use that syntax, e.g. with arrow functions or with "anonymous" function(){} declarations, JavaScript will still try to find a name to give to your function.

If you've declared your function on the right-hand-side of an assignment, the name of the variable on the left is used as the name:

const myFunction = function(){}; console.log(myFunction.name); // myFunction const myArrowFunction = () => {}; console.log(myArrowFunction.name); // myArrowFunction const myObject = { myMethod: function(){}, myArrowMethod: () => {} }; console.log(myObject.myMethod.name); // myMethod console.log(myObject.myArrowMethod.name); // myArrowMethod 

Do "anonymous" JavaScript functions even exist?

No, not really. If you create an "anonymous" function that also isn't directly assigned to a named variable, you can get an "anonymous" function:

const anonymousFunctionGenerator = ()=>()=>{}; const myAnonymousFunction = anonymousFunctionGenerator(); console.log(myAnonymousFunction); // [Function (anonymous)] 

BUT! The function does still have a name, it's just a sneaky one: an empty string!

const anonymousFunctionGenerator = ()=>()=>{}; const myAnonymousFunction = anonymousFunctionGenerator(); console.log(Object.getOwnPropertyDescriptor(myAnonymousFunction, 'name')); // { value: '', writable: false, enumerable: false, configurable: true }