DEV Community

Cover image for Most Developers Can't Answer This Question About Anonymous Functions 🀯
Jon Randy πŸŽ–οΈ
Jon Randy πŸŽ–οΈ

Posted on • Updated on

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

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) {
  return a + b
}
const add3 = (a, b) => a + b
const addFunctions = []
addFunctions.push( (a, b) => a + b )
addFunctions.push(add3)
addFunctions[2] = (a, b) => a + b
Enter fullscreen mode Exit fullscreen mode

Which of the following expressions evaluate to anonymous functions:

  • a) addFunctions[2]
  • b) (a, b) => a + b
  • c) add
  • d) addFunctions[0]
  • e) add1
  • f) add2
  • g) addFunctions[1]
  • h) add3
  • i) (function (a,b) { return a + b })

Give it your best shot in the comments! πŸ™‚


Since this post is now quite old, I've added the solution:

CLICK FOR ANSWER
The correct answer is: a, b, d, i

Top comments (21)

Collapse
 
darkwiiplayer profile image
π’ŽWii πŸ³οΈβ€βš§οΈ • 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.

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

function.name

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

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

Collapse
 
corners2wall profile image
Corners 2 Wall

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

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

???

Collapse
 
dsaga profile image
Dusan Petkovic

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 '' 
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • 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

Name or no name?

Collapse
 
alexmustiere profile image
Alex Mustiere

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

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Incorrect

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

But close

Thread Thread
 
alexmustiere profile image
Alex Mustiere

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

Thread Thread
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • 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.

Thread Thread
 
alexmustiere profile image
Alex Mustiere

Thanks!

Thread Thread
 
mistval profile image
Randall

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!

Collapse
 
brense profile image
Rense Bakker

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.

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • 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'
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

JS sure has some interesting behaviour with this.

Collapse
 
ghamadi profile image
Ghaleb

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.

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

Correct! I updated to add the answer. I might add some explanations too later if I have some time.

Collapse
 
amissah17 profile image
Frank Otabil Amissah

My answer is e.

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

Incorrect. There are 4 correct answers, and e isn't one of them

Collapse
 
amissah17 profile image
Frank Otabil Amissah

Oh okay. I'd love to know the answer but I guess I'd have to wait for others to try.