var 키워드 선언 할 때 호이스팅(Hoisting)이 일어난다 이게 뭘까?

자바스크립트에서 기본적으로 변수를 선언할 때 var 키워드를 사용하여 변수를 선언한다.

'그냥 var을 사용해서 변수는 선언하는 거야!' 라고 단순하게 생각만 하고 사용하고 있었다.

​

var 키워드를 사용하면 호이스팅이란게 일어나는데 이게 무엇인지 알아보자.

그 이유를 알아보고 이 지식을 기억하려 블로그에 남긴다...

 

 

호이스팅이란?

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - 용어 사전 | MDN

 

위 사이트 들어가면 자세하게 용어 설명이 되어있다.

이 글 쓴 후부터 MDN Web Docs 사이트를 자주 갈 것이다.

​

위 사이트에 나온 내용을 살펴보면

 

 

JavaScript에서 호스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을
선언 전에 미리 할당하는 것을 의미합니다.
var로 선언한 변수의 경우 호스팅 시 undefined로 변수를 초기화합니다.
반면 let과 const로 선언한 변수의 경우 호스팅 시 변수를 초기화하지 않습니다.
보이스 팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후,
선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다.
따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다.
다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의하세요.
MDN Web Docs

 

 

이렇다.. 처음엔 읽어도 이해가 어려웠다.. 이게 무슨 말이던가....

이해한 내용을 풀어서 복습삼아 글을 남겨본다.

 

function setData(bol) {
    if (bol) {
        var value = "blue";
    } else {
        console.log(value); // undefined
    }
}
setData(false);

// --------- 여기서 잠깐 -------------
// 1번 예시
console.log(one); // Error: one is not defined

// 2번 예시
var name;
console.log(name); // undefined

 

위 코드가 있다고 가정하자.

위 함수 setData 내부 내용을 살펴보면 내부 매개변수 bol 이 false를 받고 있다.

 

그럼 if 문에 console.log는 무엇이 찍히는가? undefined 이다.. 이상하지 않은가?

분명 value 변수가 선언이 안되어 있음에도 불구하고 말이다.

​

여기서 잠깐 설명을 돕자면 자바스크립트는 변수선언이 안되면 1번 예시 처럼

one 이라는 변수 선언이 없어서 에러코드가 찍힌다.

 

선언 자체가 안되었기 때문에 에러가 발생된다.

2번 예시를 보자 var로 name이 변수가 선언이 되었다...

 

근데 아무런 값을 넣지 않았다... console.log로 확인을 해보면 undefined가 나온다...왜?

아무런 값이 안들어있으니깐... 변수는 선언이 되었는데

초기화 즉, 값이 안들어 있기 때문이다.

​

자 다시 본론으로 들어가서 이제 저 함수의 if문을 보자.

이상하지 않은가?

 

위 알아본 내용으로 확인하자면 변수가 선언 자체가 안되서 에러코드가 나와야 하는데

에러는 커녕 함수가 정상동작하면서 저 console.log에는 undefined가 나온다....

​

그렇다... 저 함수 setData가 실행이 되면서 안에 var value가 호이스팅이 된거다.

이게 먼말이냐면 저 함수 setData가 실행이 되면서

 

if문 true 부분에 있는 var value가 실행이 안되었음에도 불구하고 선언이 된거다..

저 함수가 동작할 때 실제 어떻게 동작하는지 아래 코드를 보면

​

// 실제로는 이렇게 동작 함
function setData(bol) {
    var value; 
    if (bol) {
        value = "blue";
    } else {
        console.log(value);
    }
}
setData(false);

 

실제로는 이렇게 코드가 동작이 된다고 생각하면 된다...

if 문에 var 선언해서 변수를 선언해도 함수가 시작하면 저렇게 먼저 선언이 되면서 함수가 시작되는 거다.

 

그래서 undefined가 찍혔던 것....

결국 value 라는 변수가 if문 true 부분에 선언이 되었지만 이게 끌어 올려져 선언이 이미 되었다라고 이해하면 될 것 같다.​

 

호이스팅이 먼지 지금 이 기억을 남겨본다.