Declarações de função dentro de declarações condicionais

Em JavaScript, as declarações de função têm um comportamento diferente dependendo do padrão de linguagem predominante e do ambiente em que são executadas.

No modo estrito (ES5)

No modo estrito, introduzido no ECMAScript 5 (ES5), declarações de função não são permitidas em instruções condicionais. Isso ocorre porque as declarações de função criam variáveis ​​elevadas, que têm como escopo toda a função ou escopo global. Colocá-los dentro de uma instrução condicional quebraria esse mecanismo de elevação.

Modo não estrito (ES5)

No modo não estrito, entretanto, o comportamento das declarações de função dentro de declarações condicionais era imprevisível. Diferentes navegadores e mecanismos JavaScript implementaram suas próprias regras para lidar com essa situação, levando a resultados inconsistentes.

Em Modern JavaScript (ES2015)

A partir de 2018, a maioria dos navegadores modernos suporte ECMAScript 2015 (ES2015), que introduziu uma interpretação mais estrita de declarações de função dentro de blocos. No ES2015, as declarações de função têm como escopo o bloco em que são declaradas.

Exemplo:

Considere o seguinte código:

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); //writes "foo" even though 'foo' !== 'bar'

No modo estrito ou no ES2015, este código resultaria em um erro porque a função a não está definida no escopo global. No entanto, no modo não estrito, pode produzir resultados diferentes dependendo da implementação. No exemplo fornecido, o Chrome gera "foo" enquanto o Firefox gera "19".

Recomendação:

Para evitar comportamento inesperado, é recomendado usar expressões de função. de declarações de função ao definir funções condicionalmente. As expressões de função criam funções com escopo que só são acessíveis dentro de seu escopo imediato.