DEV Community

Most Developers Can't Answer This Question About Anonymous Functions 🤯

Jon Randy 🎖️ on March 27, 2023

Given the following code: function add(a, b) { return a + b } const add1 = function(a, b) { return a + b } const add2 = function add(a, b) {...

Read full post

𒎏Wii 🏳️‍⚧️ • Mar 27 '23 • Edited

Correct me if I'm wrong, but JavaScript doesn't tag its functions with a name, right? So it's not like a function itself can be "anonymous".

The expressions c, e, f and h return functions that are directly stored in a variable, so there's a case to be made that they aren't anonymous.

a, d, and g are all functions that are, in some way or another, accessible through variables, so one might say they aren't quite anonymous either, yet it's also weird to call them named functions.

b and i return functions that aren't accessible through any variable, and each evaluation of the expression should return a distinct function object, although mathematically that statement makes no sense, but JS lets us compare functions with == and (n=>n) == (n=>n) evaluates to false. So those two are almost inarguably anonymous. Unless you then assign the expression to a variable, in which case one could, again, argue that the functions are no longer anonymous.

EDIT: After doing some reading, it seems like JavaScript does indeed tag functions with a name, if they are defined using the function name() {...} syntax or if the language can figure out a name for them (like when they appear directly in the RHS of a variable assignment), so in that sense, the anonymous functions (aka. the ones without a name) should be:

a) Yes. Not given a name or assigned to a variable.
b) Maybe; depending on where the expression appears (assigned to a constant?)
c) No. Given a name.
d) Yes. Not given a name or assigned to a variable.
e) No. Assigned to a variable.
f) No. Given a name.
g) No. Originally assigned to a variable.
h) No. Assigned to a variable.
i) Maybe; depends on where the expression appears (assigned to a constant?)

But I think the real question should be: Who the hell thought adding a .name attribute to a function that behaves this weirdly was ever a good idea? At best this can be used to improve debug output when it's available, but it can't really be relied on in any way. I am absolutely sure that interns have built terribly brittle code using this feature. Please make it go away.

Jon Randy 🎖️ • Mar 27 '23

function.name

Jon Randy 🎖️ • Mar 27 '23

You're pretty much correct. The expressions were meant to be evaluated alone.

Corners 2 Wall • Mar 28 '23

Unfortunately, some type of miscommunication caused the event to be cancelled without warning. We regret any confusion or inconvenience this may have caused. We apologize for not being able to provide a better heads up. We appreciate your understanding with this situation

Jon Randy 🎖️ • Apr 9 '23

???

Dusan Petkovic • Oct 30 '23

For me this one is important,
"The act of assigning an anonymous function to a variable gives it the name of the variable."

Also interesting observation also assigning an anonymous function to an object property does not assign the function name like with variables...

const test = { };

test.test1 = () => "test response"; 

console.log(test.test1.name) 

// returns ''

Jon Randy 🎖️ • Oct 30 '23 • Edited

Yep, that's a weird one. If you do console.log(test.test1) it does appear to have a name (at least in Firefox), yet the name property is an empty string. Chrome's behaviour is different

Alex Mustiere • Mar 27 '23

I'd say: a, b, d, g, h

Jon Randy 🎖️ • Mar 27 '23

Incorrect

Jon Randy 🎖️ • Mar 27 '23

But close

Alex Mustiere • Mar 28 '23

I'm curious of which one is wrong. And of the reason.

Jon Randy 🎖️ • Mar 28 '23 • Edited

Both g and h return the add3 function - which has the name 'add3' (you can check with function.name) - and are therefore not anonymous. The act of assigning an anonymous function to a variable gives it the name of the variable.

Alex Mustiere • Mar 28 '23

Thanks!

Randall • Apr 29 '23

The act of assigning an anonymous function to a variable gives it the name of the variable.

This behavior is news to me. Interesting, and a bit magical!

Rense Bakker • Apr 3 '23

Every arrow function by definition is annonymous, as well as every function declaratio'n that doesnt include a name before the parenthesis. That leaves add and add2 and any reference to them, which there are none, so only c and f are not annonymous.

Jon Randy 🎖️ • Apr 3 '23 • Edited

Not quite correct, assigning an anonymous function to a variable makes it cease to be anonymous. You can verify by checking the name property.

console.log(add1.name) // 'add1' 
console.log(add3.name) // 'add3'

I believe this only happens if the declaration occurs at the same time as assignment, as it is possible to store an anonymous function in a variable:

const arr = []
arr.push( () => 0 )
console.log(arr[0].name)  // <empty string> - anonymous

const func = a[0]
console.log(func.name)  // <empty string> - still anonymous, not affected by assignment

const func1 = () => 0
console.log(func1.name)  // 'func1' - anonymous function acquires name during assignment

JS sure has some interesting behaviour with this.

Ghaleb • Aug 30 '23

I believe the answer is: a;b;d;i

The common misconception is that people associate the arrow with anonymous immediately. At least that was my case. I used to call it "anonymous function" instead of "arrow function" because I was comparing it to Java's lambda expression (which indeed is anonymous).

PS: considering this is an old post, it's probably worth updating with the answer and explanation to make it more informative.