여기에 샘플 코드 스니펫이 있고 이 스니펫에 대한 가능한 출력을 말하고 이에 대한 설명을 제공해야 한다고 가정해 보겠습니다.
var name = 'Zakir';
(() => {
name = 'Rahul';
return;
console.log(name);
function name(){
let lastName = 'Singh';
}
})();
console.log(name); 순진한 접근 방식으로 이 문제를 한 줄씩 살펴보겠습니다.
1 → 변수명에 'Zakir' 저장
3 → 자체 실행 익명 함수 내부로 들어갑니다.
4 → 변수 이름이 'Rahul'로 다시 초기화됩니다.
5 → return 문을 만나서 함수를 종료합니다.
15 → 현재 값이 'Rahul'인 화면에 name 변수 출력
따라서 최종 출력은
Rahul
그러나 불행히도 그것은 틀렸습니다. 이번에는 변수와 함수 호이스팅의 개념을 염두에 두고 어디에서 잘못되었는지 코드를 다시 한 번 살펴보겠습니다.
1 → 변수명에 'Zakir' 저장
3 → 자체 실행 익명 함수 내부로 들어갑니다.
함수에 들어갈 때 함수 호이스팅이 시작되고 자체 실행 함수의 맨 아래에 정의된 함수 name()이 자체 실행 함수의 맨 위로 호이스트됩니다. 중간 상태에서 코드는 다음과 같습니다. /P>
예시
let name = 'Zakir';
(() => {
let name;
name = 'Rahul';
return;
console.log(name);
name = function(){
let lastName = 'Singh';
}
})();
console.log(name); 변수/함수가 해당 범위의 맨 위로 호이스트될 때마다 정의되고 초기화되기만 하면 실제 위치에서 초기화되고 맨 위에는 정의되지 않지만 존재합니다.
따라서 변수 이름이 다시 초기화되면 전역 변수가 아니라 다시 초기화되는 로컬 변수 이름이므로 자체 실행 함수에서 나와 전역 변수 이름을 콘솔에 인쇄합니다. 콘솔에는 여전히 'Zakir'가 있습니다. 따라서 출력은 -
출력
Zakir