조건문 내의 함수 선언

JavaScript에서 함수 선언은 일반적인 언어 표준과 함수가 실행되는 환경에 따라 다른 동작을 갖습니다.

엄격 모드(ES5)

ECMAScript 5(ES5)에 도입된 엄격 모드에서는 조건문 내에서 함수 선언이 허용되지 않습니다. 이는 함수 선언이 전체 함수 또는 전역 범위로 범위가 지정되는 호이스트된 변수를 생성하기 때문입니다. 조건문 내에 이를 배치하면 이 호이스팅 메커니즘이 중단됩니다.

비엄격 모드(ES5)

그러나 비엄격 모드에서는 함수 선언의 동작이 조건문 내에서는 예측할 수 없었습니다. 다양한 브라우저와 JavaScript 엔진은 이 상황을 처리하기 위해 자체 규칙을 구현하여 일관되지 않은 결과를 초래했습니다.

Modern JavaScript(ES2015)에서

2018년 현재 대부분의 최신 브라우저는 블록 내 함수 선언의 더 엄격한 해석을 도입한 ECMAScript 2015(ES2015)를 지원합니다. ES2015에서 함수 선언은 선언된 블록으로 범위가 지정됩니다.

예:

다음 코드를 고려하세요.

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'

엄격 모드 또는 ES2015에서도 "foo"를 씁니다. 함수 a가 전역 범위에 정의되어 있지 않기 때문에 이 코드는 오류를 발생시킵니다. 그러나 엄격하지 않은 모드에서는 구현에 따라 다른 출력이 생성될 수 있습니다. 제공된 예에서 Chrome은 "foo"를 출력하고 Firefox는 "19"를 출력합니다.

권장 사항:

예기치 않은 동작을 방지하려면 대신 함수 표현식을 사용하는 것이 좋습니다. 조건부로 함수를 정의할 때 함수 선언. 함수 표현식은 즉각적인 범위 내에서만 액세스할 수 있는 범위 함수를 생성합니다.