Why does `setTimeout` fail to execute with a function expression assigned to a variable before it\'s declared, but succeeds with function declarations?

JavaScript Function Declaration and Evaluation Order

Problem:

Why does the following JavaScript example fail to execute?

<code class="javascript">(function() {
  setTimeout(someFunction1, 10);
  var someFunction1 = function() { alert('here1'); };
})();</code>

While other similar examples work as intended:

<code class="javascript">(function() {
  setTimeout(someFunction2, 10);
  function someFunction2() { alert('here2'); }
})();

(function() {
  setTimeout(function() { someFunction3(); }, 10);
  var someFunction3 = function() { alert('here3'); };
})();

(function() {
  setTimeout(function() { someFunction4(); }, 10);
  function someFunction4() { alert('here4'); }
})();</code>

Solution:

The issue lies in the order of evaluation between function declarations and function expressions.

Function Declaration vs. Expression

• Declaration: Declares a function using the function keyword (e.g., function someFunction() {}). Function declarations are processed during the compilation phase.
• Expression: Creates a function using an expression that evaluates to a function (e.g., () => {}). Function expressions are processed during the execution phase.

Evaluation Order

JavaScript code undergoes two processing phases:

1. Compilation: Variables are created and function declarations are processed.
2. Execution: Function expressions and other code are executed.

Analysis of Examples

• Example 1:

  • The function someFunction1 is created as a function expression during the execution phase.
  • The setTimeout function is called before someFunction1 is fully evaluated and assigned to the variable someFunction1.
  • The setTimeout function receives an undefined value for someFunction1 and fails to execute.

• Examples 2, 3, and 4:

  • In each of these examples, the function is declared using the function keyword, making it a function declaration.
  • Function declarations are processed during the compilation phase, so they exist before the setTimeout function is called.
  • The setTimeout function receives a valid function reference and executes successfully.

Additional Clarification

• Function arguments in JavaScript are always passed by value, meaning the setTimeout function does not directly reference the variable someFunction1 but rather a copy of the function it refers to.

The above is the detailed content of Why does `setTimeout` fail to execute with a function expression assigned to a variable before it\'s declared, but succeeds with function declarations?. For more information, please follow other related articles on the PHP Chinese website!