7

Just wanted to ask: Is there some reason to name a function as variable in JavaScript?

(I mean using Dep two times. Just was crawling in Vue.js and found this)

var Dep = function Dep () {
    this.id = uid++;
    this.subs = [];
  };

2 Answers2

4

The variable name is not the name of the function; it's just a variable that happens to contain a reference to the function.

The "Dep" after the function keyword is the name of the function. No matter what happens later to the variable called "Dep", inside the function "Dep" will always be its own name.

In this case of course it doesn't matter at all because the function does not refer to itself.

Back a while ago it was a good idea to do that to avoid having errors reported in the browser console as being from an "anonymous function". Modern browser debugging environments are pretty good at grabbing an appropriate name, but there are still cases when they can't.

Pointy
  • 371,531
  • 55
  • 528
  • 584
  • Quite difficult to understand the purpose of that code, but thanks any way =) –  Mar 29 '19 at 21:13
  • 1
    @Anton the language behavior is actually really weird around this topic. Suffice to say that it doesn't *hurt* anything to give names for function expressions, and in some cases it can help with debugging. – Pointy Mar 29 '19 at 21:18
  • okay, why not define just a function without assigning it to the variable ? –  Mar 29 '19 at 21:23
  • 2
    Well that's part of the weird semantics of function declarations versus function expressions. In a function *expression*, as in the example you posted, that name (the name after the `function` keyword) is bound into the lexical scope of the function code. No matter what happens to the external "Dep" variable, inside the function "Dep" will always refer to the function. In a function *declaration*, that's not the case, which has always seemed extremely illogical to me but that's the way things work. – Pointy Mar 29 '19 at 21:31
  • 1
    Cool, thanks a lot for explaining, it was very helpful! –  Mar 29 '19 at 21:34
2

Is there some reason > I mean using Dep two times

If you mean why not ->

var Dep = function () {
  this.id = uid++;
  this.subs = [];
};

IOW: Why not just assign an anonymous function, It's most likely for debugging reasons, you'll get better named call-stack's if you name your functions.

Keith
  • 15,057
  • 1
  • 18
  • 31
  • 2
    Most debuggers can infer names from the variable it was assigned to. – SLaks Mar 29 '19 at 21:16
  • @SLaks Yes, debuggers get better all the time, I assume when Vue.js was first written it helped with call stacks. Also it might help with 3rd party loggers too. I certainly remember errors that used to say @ anonymous.. etc in the past. – Keith Mar 29 '19 at 21:25
  • 1
    @SLaks + Keith: It’s not just debuggers; it’s part of the language spec now, since ES6. `Dep.name` is required to be `'Dep'` after `Dep = function () {}` and various other forms. The function name is the reason a lot of existing code contains this pattern for sure, though. – Ry- Mar 29 '19 at 22:50