호이스팅?

• 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진것 같은 현상을 말한다.
  하단 코드 구문을 보자

function hello1() {
    console.log('hello1');
}

hello1();


//함수의 호출을 먼저

hello2();

function hello2() {
    console.log("hi there");
}

함수의 호출을 먼저 한 hello2에서 오류가 발생할것 같지만 실제로는 두 함수 모두 문제 없이 작동한다.

다음 코드 구문을 보자

console.log(name);

name = 'mark';

console.log(name);

var name='yeongchan';

이 코드를 실행하면

첫번째 console.log(name)의 값이 undefined라고 되어있다.
분명 마지막 줄에 name의 값을 정의했는데도 불구하고 정의가 되어있지 않다는 오류가 나온것이 아니라 undifined라고 출력이 된다.

이번엔 let을 이용한 구문이다.

console.log(name);

name='mark';

console.log(name);

let name;

같은 방식으로 코딩을 했는데 이번엔 오류가 나타난다.
왜그럴까?

호이스팅은 "선언이 먼저 메모리에 저장되는 것"이기 때문!

• 자바스크립트 엔진은 코드를 실행하기 전 컨텍스트를 위한 과정에서 모든 선언(var, let, const function, class)을 스코프에 등록한다.
• 코드 실행전에 이미 변수선언/함수선언 이 저장되어있기 때문에 선언문 보다 참조/호출이 먼저 나와도 오류가 없이 동작한다.
• var의 경우 선언과 함께 undefined로 초기화가 되어서 메모리에 저장된다. 그래서 위의 구문에서 초기 값이 undefined라고 나온 것!
• 반면 let과 const 초기화되지 않은 상태로 선언만 메모리에 저장되기 때문이다.(초기화 단계는 변수 선언문에 도달했을 때 이루어지고 초기화 이전에 변수에 접근하려고 하면 참조 에러가 발생한다.)
• 초기화 되지 않으면 변수를 참조할 수 없다. 그래서 참조 에러를 일으키는 것이다.
• 따라서 var 에서만 호이스팅이 일어나는 것이 아니라, let, const 에서도 호이스팅이 일어난다는 것을 알 수 있다.