Function Names in JS Can't Contain Spaces, Right?

WRONG!

Despite the widespread belief that function names in JavaScript MUST follow the same rules as identifiers - this is not actually true. Sure, when you use the function keyword to define a function then the name you give in the code must follow the naming rules for identifiers i.e. cannot start with a number, cannot contain spaces, can only use certain characters etc. However, it IS perfectly possible for the name of the function to contain spaces - or any other character. A function's name can actually be ANY string at all.

OK... Explain?

When you use the function keyword, the name you provide is used as the function's identifier and is ALSO used to set the name property of the created function - i.e. the function's name. That identifier is then used (scoped) in one of two ways depending on whether you are doing function declaration or function expression. The important thing here is that the function's identifier and the function's name happen to be the same, but are actually two different things. The fact that the language syntax mandates an identifier name here means that most of the time the function's name appears to be following the same rules... but it doesn't have to! There are other ways to set the name of a function:

• Using Object.defineProperty - AFTER function creation A function's name property is defined with { writable: false, configurable: true} - so we cannot set it directly by assigning our value to the property, but we can define it as follows:

  function myFunc() {}
  Object.defineProperty(myFunc, 'name', { value: 'my custom name 😛'})
  console.log(myFunc.name) // 'my custom name 😛'

• Using a property name trick - DURING function creation We can set the name at creation time without a separate step by use a computed property name trick, which leverages how JS infers names for object methods and functions:

  const name = 'my dynamic 🎉 name';
  const fn = { [name]: function() {} }[name];
  console.log(fn.name); // "my dynamic 🎉 name"

But This is Just a Trick That's Useless?

You might think that, but it's actually used in many libraries - usually for making nice names to appear in stack traces (most modern JS engines will use a function's name property to refer to the function).

Oh, and JavaScript actually already makes functions with names containing spaces... and you've probably already used this feature without knowing it:

function myFunc() {
    console.log('Hello')
}
const func2 = myFunc.bind({})

console.log(myFunc.name) // 'myFunc'
console.log(func2.name) // 'bound myFunc'

Yes, a function created by using bind has a name containing a space.

Comments

[Nazar Boyko]

The bind one is the sneaky part. Any code that keys off fn.name (a DI container, or a decorator that logs the function it wraps) quietly starts seeing "bound myFunc" the moment something gets bound, so a neat trick on the surface is a real footgun underneath.

[Dario Mannu]

why does the guy in the picture show such a desperate face?

[Mudassir Khan]

the bind one is the part that actually bites in production. we were using a logging decorator that pulled the function name for trace labeling, and after wrapping everything with .bind(this) in a class setup, every error log was showing "bound processPayment", "bound validateUser" etc.

took us longer than it should have to trace it back to the decorator + bind combo.

have you seen this show up in serialization patterns? anything that uses fn.name as a key for registration or dependency injection hits the same wall.

[algorhymer]

I liked your article, thank you.

I must confess that I liked your bio too: Artisanal developer - coding with varying degrees of success since 1983

I'm not a JS person, but I have a feeling you might rofl when you see what this guy managed pulled off in JS.
I'm a big baby and I like stuff which makes me smile.
I think there's a little bit of baby inside you too.

Oh, I'm not that developer guy from GH.
I do not know that guy.
I only saw an old video recording of that guy where he explained hoisting via Terry Pratchett.
I like people who have a tiny touch of madness, and also a healthy amount of disrespect towards the overserious enterprise cultural fitting game called Software Engineering.
I think you might be also a little bit on the punk side of the spectrum when it comes to S&P 500 Engineering Excellence.

[Frank]

This highlights the important distinction between valid identifier names

[Jon Randy 🎖️]

Did you forget to finish your sentence? Between valid identifier names and... ?