함수 작용역 향상 및 함수 표현식 지정 이름

//  
print(); //  print
function print () {
   console.log('print');
}
...
print(); //  
var print = function () {
    console.log('print');
}
...
print(); //  print is not defined
let print = function () {
    console.log('print');
}

첫 번째 코드가 실행되고 출력될 수 있는 결과는 js해석 시 함수를 향상시키기 때문에 함수 정의 전에 발생한 호출이지만 마찬가지로 호출에 성공할 수 있습니다

두 번째 단락은 출력이 없습니다. 함수 표현식에 따라 마찬가지로 향상된 문제가 존재하지만 이때 브라우저가 향상된 변수가 있기 때문에print를undefined로 정의합니다

세 번째 단락은 우리가let을 사용했기 때문에let은 변수 승급이 존재하지 않기 때문에 호출 오류가 발생했습니다

일반적인 상황에서 우리는 let을 사용하여 각종 변수를 정의하지만 호환성을 위해 babel을 사용하여 코드를 디코딩합니다. 디코딩 후 신기한 일이 발생합니다

'use strict';

print();
var print = function print() {
    console.log('print');
};

이때 코드는 두 번째 코드와 같이 실행될 수 있다. 이 예는 정상적인 예가 아니다. 오류가 뚜렷하기 때문이다. 그러나 브라우저가 es6를 완전히 지원하기 전에 우리는 변수 향상 문제를 고려해야 한다. 비록 당신이 let을 사용했지만 컴파일러는 그것을 var로 바꾸었다. 그리고 왜 babel이 익명 함수 표현식을 변환할 때 함수 이름을 추가하는지 생각해 보자.

//  
var add = function (a, b) {
    return a + b;
}
...
//  
var add = function my_add (a, b) {
    return a + b;
}

나는 이곳이 주로 디버깅을 편리하게 하기 위해서라고 생각한다. 예를 들어 우리가 컨트롤러에add를 입력하는 것이다

//  
ƒ (a, b) {
    return a + b;
}
...
//  
ƒ my_add(a, b) {
    return a + b;
}

지금 이 간단한 함수에서 우리는 당연히 이 함수들이 무엇을 하는지 한눈에 알 수 있지만, 만약 함수가 매우 복잡하다면, 당신은 이 함수가 무엇을 하는지 직접 알 수 있습니까?그래서 함수에 설명된 명사를 추가하면 디버깅을 편리하게 할 수 있습니다. 이것도 왜 babel이 변환할 때 함수 이름을 추가하는지 추측합니다. 이것은github의 한 토론에서도 이 문제를 검증했습니다.