변수 호이스팅 관련 질문입니다.

JavaScript
1

자바스크립트 변수 호이스팅 관련하여 찾아보던 도중에 이해가 되지 않는 부분이 있어 질문 올립니다.

변수 호이스팅은 자바스크립트 엔진이 코드 실행 전 선언된 변수, 함수를 최상단으로 올리는 작업이고, 변수명과 함수명이 같을 경우 함수가 변수 선언을 덮어쓰는걸로 알고있습니다.

zxczxczxc

위 사진에서 즉시실행함수를 통해 중복으로 선언된 globalString 이름의 변수, 함수를 console.log 로 출력해보았는데 실행 결과는 아래와 같이 나옵니다.

`console.log#1 function globalString ()
{
console.log ( 'I\'m globalString function' );
}
console.log#2 I'm globalString variable`

함수 선언이 변수 선언을 덮어쓸 경우 둘다 같은 결과를 출력해야 맞는데…결과가 왜 저렇게 나오는지 궁금하네요…

2

함수 선언문의 경우 함수 까지 같이 끌어올리지만 변수 할당값은 끌어올리지 않습니다.

그래서 위의 코드가 어떤식으로 동작되게 되는지 살펴보면

var globalString = function globalString() {
    console.log("I am globalString function");
}

(function() {
    console.log('1# ' + globalString);
})();

globalString = 'global string';

(function() {
    console.log('2# ' + globalString);
})();

이런식으로 변경되어 말씀해주신 실행결과가 출력될 것 같습니다.

제일 위의 즉시 실행 함수가 없는 경우에는

var globalString = 'global string';

(function() {
    console.log('2# ' + globalString);
})();

function globalString() {
    console.log("I am globalString function");
}

이 경우는 결과 값이 2# global string 로 나오는데요.
변수에 값이 할당 되었을 경우에는 함수 선언이 호이스팅되지 않습니다.

즉, 처음 질문을 다시 살펴보면 var globalString = 'global string';
의 경우 값은 호이스팅되지 않고 변수 선언만 되기 때문에 var globalString; 가 될 것이고 값이 할당이 되어있지 않기 때문에 함수선언이 호이스팅됩니다.