3

Consider this piece of code:

var x = function z(){
    console.log("called x");
}

x(); // will print out "called x"
z(); // ReferenceError!

So, it is possible to store a named function inside a variable, but we still can only call the function by the variable name.

Is there any reason for this behavior? Why is it possible for us to store a named function inside a variable? Is there any other scenario where this might be useful?

Sebastian Simon
  • 14,320
  • 6
  • 42
  • 61
Jackyef
  • 3,473
  • 14
  • 22
  • You *can* do the following: `var z = function () { ... }; var x = z;`. Then you can call both `x()` and `z()`. – Phylogenesis Aug 21 '17 at 08:28
  • 1
    Hi, my purpose in asking this question isn't to find out how to make the call to z() works, but mainly to understand the reason for this particular behavior in javascript. @Phylogenesis – Jackyef Aug 21 '17 at 08:33

2 Answers2

8

When you use a named function expression (NFE) like that, the function's name is only in scope within the function:

var x = function z(){
    console.log(typeof z); // "function"
};
x();
console.log(typeof z);     // "undefined"

This is one of the big differences between a named function expression and a function declaration: An NFE doesn't add the function's name to the scope in which the expression appears; a declaration does add the function's name to the scope in which the declaration appears. (They also happen at different times, etc.; I do a rundown of the various ways of creating functions and how they work in this other answer.)

There are a couple of reasons for doing this:

  • It lets the function call itself (via its name) without relying on the variable, for situations where recursion is useful.

  • In ES5 and earlier, it gave you a way to give the function a name (for stack traces and similar). (In ES2015+, the function will have a name even if you use an anonymous expression is most cases; the name is set based on the expression.)

  • In ES2015+, it lets you give the function a different name from the one that would be inferred from the expression.

T.J. Crowder
  • 879,024
  • 165
  • 1,615
  • 1,639
  • I noticed that z will be available in the function scope. But, isn't x also available in the scope? Is there any advantage of giving a name to the function you are going to store in a variable anyway? – Jackyef Aug 21 '17 at 08:35
  • @Jackyef: In case the variable changes, or you're not assigning the result to a variable at all (for instance, passing a recursive function into another function as a callback), that sort of thing. – T.J. Crowder Aug 21 '17 at 08:37
3

Just assigning the function z to the variable x like this:

function z () {
  console.log("called x");
}
var x = z;

x(); // will print out "called x"
z(); // will print out "called x"
Yosvel Quintero Arguelles
  • 15,149
  • 4
  • 33
  • 35
  • 2
    *"Try like this"* Why? What did you change? Why did you change it? What effects does the change have? Code dumps are not *useful* answers. – T.J. Crowder Aug 21 '17 at 08:33
  • Hi, I am not trying to find out how to make the call to z() works, but mainly to understand the reason for this particular behavior in javascript. – Jackyef Aug 21 '17 at 08:33