Differences Between Named and Unnamed Anonymous Javascript Functions
Asked Answered
C

3

11

Normally, in Javascript, when I want to pass an anonymous/inline function as an argument to another function, I do one of the following.

someFunctionCall(function() {
    //...
});

someFunctionCall( () => {
    //...
});

However, I've recently inherited a codebase that uses named function as inline arguments, like this

someFunctionCall(function foo() {
    //...
});

I've never seen this syntax before. The function still seems to be anonymous -- there's no foo function defined in either the calling or called scope. Is this just a matter of style, or can using a named function (foo above) as an anonymous function change the behavior or state of that program?

This is specifically for a NodeJS (not a browser based program) program, and I'm specifically interested in behavior specific to using functions as parameters. That said information from behavior across platforms and runtimes is welcome.

Canasta answered 12/4, 2019 at 18:24 Comment(7)
Stack traces. The name will show up in the trace if the callback throws. At least in the browser, haven't tested in node.Diversity
tfw you suddenly realize the avoidable-hell you've been causing other developers by not doing this. Thank you!Canasta
Also the function name would act like a self documentionGutierrez
you can also use them as a persistent yet not global object store for state. (function me(x){ me.lastX=x; })Potpie
Also, I would suggest you understand the difference between a function and a function expression - which kind of look the same but are not entirely.Dibb
If you promise to give me good stack traces from now on, we'll call it even ;)Diversity
Possible duplicate of Why use named function expressions?Bonnell
G
8

There are at least three advantages of using named function expressions instead of anonymous function expressions.

  • Makes debugging easier as the function name shows up in call hierarchy.
  • The function name is accessible in the inner scope of the function, so it can be used for recursion
  • The function name itself acts like a self documentation of what the function is doing instead of reading the code.
Gutierrez answered 12/4, 2019 at 18:36 Comment(0)
B
2

Using those "named anonymous functions" won't change the behavior but will show the function name in stack traces which is very useful. Also the function gets callable within itself that way.

Beadsman answered 12/4, 2019 at 18:27 Comment(0)
B
-1

I'll give an example

Case 1:

var obj =  {count: 0, counter: ()=> {this.count+=1;}}

If you do console.log(obj.count) you'll get 0

Case 2:

var obj  = {count: 0, counter (){this.count+=1;}}

In 2nd case if you do console.log(obj.count) value will be one.

Hope you understood by now. Lamda expressions cannot access values with reference of this object. It can only access variables with global reference.

In case 1 if you want to make it work with lamba you have to use obj.count+=1 with name has reference.

And rest of the JavaScript function implementation remains same there is not much difference.

Bet answered 12/4, 2019 at 19:45 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.