[JavaScript] 호이스팅이란?

이번 글에는 변수나 함수를 선언할때 발생하는 호이스팅(Hoisting) 이라는 현상에 대해 알아보겠습니다

호이스팅(Hoisting) 이란?

변수 및 함수를 선언과 할당을 할때 선언 부분을 강제로 맨 위로 끌고가서 그거 부터 먼저 처리하고 할당을 하는 방식으로 자바스크립트가 코드를 해석하는 순서입니다.

    function hoisting() {
       console.log(name);//undefined
       var name = "hoon";
       console.log(name);//hoon
     }
     hoisting();

위 함수를 호출하면 변수 생성전의 console에는 무엇이 뜨고 생성후의 console에는 무엇이 뜰까요?
생성 전에는 에러가 안뜨고 undefined가 뜨게 되며 생성후는 당연히 hoon이 뜨게됩니다. 변수 생성 전에 name을 출력한건데 왜 이런 현상이 발생할까요?

function hoisting() {
	console.log(name);
    var name = 'hoon';
    console.log(name);
}

이라고 hoisting 함수안에 name를 선언과 할당을 하면
자바스크립트는 자동적으로 var name만 따로 빼서 그 범위의 맨위로 올려보내고 코드를 해석합니다. 이렇게 말이죠

function hoisting() {
	var name;
	console.log(name);
    name = 'hoon';
    console.log(name);
}

이것을 호이스팅이라고 부릅니다.

때문에 맨 처음 실행했던 함수에서 자체적으로 맨 위에서 name 변수를 선언했기때문에 단순히 값이 없는 undefined가 출력된 것이죠

---

하지만 let 은 상황이 다릅니다.

    function hoisting() {
       console.log(name); //error : Cannot access 'name'
       let name = "hoon";
       console.log(name); //hoon
     }
     hoisting();

이렇게 let을 사용하게되면 name에 접근 할 수 없다는 에러가 발생합니다.
왜 이럴까요? let은 호이스팅이 안되는 것일까요?
아닙니다. let도 호이스팅이 되긴 되는데 var과는 방식이 약간 다릅니다.

변수를 만들때 선언, 초기화, 할당이라는 단계가 있는데

선언 단계 - 변수 실행 컨텍스트에 변수 객체를 등록한다.
초기화 단계 - 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다.
할당 단계 - undefined로 초기화된 변수에 실제 값을 할당한다.

var 키워드는 선언과 초기화 단계가 한번에 이루어집니다. 때문에 변수를 위한 공간이 미리 확보가 되어있어서 접근이 가능한거지만 let은 선언이 먼저 이루어지고 초기화가 이루어지는데(선언과 초기화 단계가 분리되어 발생합니다),
console.log로 접근 시 초기화가 이루어지기 전이기때문에 접근이 불가능한 것입니다. 이것을 일시적 사각지대 라고 불립니다.

var과 let은 비슷해보이면서도 차이점이 참 많은것 같습니다 :)

참고자료
https://poiemaweb.com/es6-block-scope