Function names defined as parameters to a function call aren't hoisted. Why not?

StackOverflow https://stackoverflow.com/questions/14218779

  •  14-01-2022
  •  | 
  •  

Question

Consider the following code.

<!DOCTYPE html>
<script>
  console.log(a);
  function a() {}
</script>

Notice that a is seemingly accessed before it is defined. The console output is: (jsfiddle)

function a() {}

Function and variable names are defined before any other code runs, so the console.log call works here. This is called hoisting.

But this doesn't work if the function is defined as a parameters in a function call. Look at this code.

<!DOCTYPE html>
<script>
  function a() {}
  a(function b() {});
  console.log(b);
</script>

Notice that the function b is defined inside of a call to a. Not inside of a closure, but inside of a call. The console output is: (jsfiddle)

Uncaught ReferenceError: b is not defined

I'm wondering why this happens. Is this the intended behavior? This happens in both Chrome and Firefox.

UPDATE: This jsfiddle shows that names in function expressions are never available in the scope in which they are defined. However, the name is defined inside the scope of the function itself. This means a named function expression can refer to the name, but only inside the function. The name is also stored in the function's name parameter. 

<!DOCTYPE html>
<script>
  console.log(a); // undefined
  var a = function b() {
    console.log(b); // function b() { … };
  };
  a(); // function b() { … };
  console.log(a); // function b() { … };
  console.log(a.name); // b
  console.log(b); // Uncaught ReferenceError: b is not defined
</script>
Était-ce utile?

La solution

Inside a(function b() {});, the function is a function expression and not a function declaration (only which are hoisted). You might have a look at var functionName = function() {} vs function functionName() {} for the difference.

Autres conseils

EcmaScript §13 (see the paragraph below the NOTE) defines how Function Expressions and Function Declarations are handled.

Function Declarations are instantiated when the EnvironmentRecord is built (§10.5) and thus hoisted, a Function Expression is evaluated later and it's optional Identifier is never visible to the enclosing scope.

As this is a function expression, it's name is not visible to the outer scope. It's the same like

a = function(){};  // valid as it is a function expression

a = function b(){};// also valid

// b is is not accessable here, same as the anonymous function, but a of course is.

both are valid, but b is not visible to the outer scope. Omitting the name in a function declaration however is not valid.
The optional Identifier of the function expression is for reference purposes inside the function body (e.g. to enable recursive calls).

Update to your Update:

The reason why the first console.log yields undefined instead of throwing an error is the hoisting (While the instantiation is hoisted the initialisation isn't):

  console.log(a); // undefined
  var a = function b() {};
  console.log(a); // function b() {}

  // equals (hoisted):
  var a;
  console.log(a); // undefined
  a = function b() {};
  console.log(a); // function b() {}

function b() doesn't exist until the call a(function b() {}); is executed.

JS doesn't search the code for functions, that way. Also, function b() {} isn't a function declaration, you're merely passing it as a parameter. The only way to access that function would be within function a():

function a() {console.log(arguments[0])}
a(function b() {});
//function b() {}

However, this does not mean that you can actually call b() inside a(), since b() is defined in the scope of a's function call, not in the function itself. Basically, the name b is useless.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top