How Do Function Declarations Behave Within if/else Statements in JavaScript?

Function Declarations Within if/else Statements

When function declarations are encountered within if/else statements, their handling can vary depending on the JavaScript environment. In the provided code snippet, function declarations are defined inside each if/else branch:

var abc = '';
if (1 === 0) {
  function a() {
    abc = 7;
  }
} else if ('a' === 'a') {
  function a() {
    abc = 19;
  }
} else if ('foo' === 'bar') {
  function a() {
    abc = 'foo';
  }
}
a();
document.write(abc); // Expected output: foo

Under ECMAScript 5 (ES5), in non-strict mode, the above code exhibits unpredictable behavior. Different browsers and engines handle function declarations within blocks differently.

However, in ECMAScript 2015 (ES2015) and later, function declarations are allowed within blocks. Function declarations within such blocks are scoped to the block. In the code snippet, the function a is declared within the innermost if block. As a result, it is undefined in the global scope, leading to an undefined function error:

if ('foo' === 'bar') {
  function a() {
    abc = 'foo';
  }
}
a(); // Error: a is not defined

For conditional function definition, it is recommended to use function expressions instead of declarations:

var a = 'foo' === 'bar' ? function() {
  abc = 'foo';
} : function() {
  abc = 19;
};
a();
document.write(abc); // Expected output: 19

The above is the detailed content of How Do Function Declarations Behave Within if/else Statements in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!