Hoisting

• 스코프 안에 있는 선언들을 모두 스코프의 최상위로 끌어올리는 것을 말함

• 코드를 실행하기 전 인터프리터가 실행 가능한 코드를 형상화 하고 구분하는 과정을 거치는데 이 과정에서 var, let, const, function등 을 스코프에 등록을 한다.

• 위의 과정 덕분에 해당 코드가 실행전에 이미 변수 or 함수 선언이 되어 있기 때문에 선언문보다 호출문이 먼저 나와도 오류 없이 동작이 가능하다

var

• var키워드로 선언한 문장만 오류가나지 않고 값은 undefined인 상태이다.

• var는 호이스팅이 될때 선언과 동시에 undefined로 초기화 된다.

  • cf) 초기화 : 변수 또는 객체의 값을 위한 공간을 메모리에 할당하는 행위
  • 선언 : 스코프와 변수 객체가 생성되고, 스코프가 변수 객체를 참조한다.

let, const

• const는 선언과 동시에 할당이 이뤄져야하기 때문에, 즉 재할당이 불가능 하기때문에 호이스팅현상이 일어날 수 없다.

• let은 엄밀히 따지면 호이스팅이 일어난다고 본다. 그러나 선언되고 초기화 되지 않은 상태이기 때문에 변수를 참조할 수 없다. 따라서 에러가 난다.

/* 정상 작동 */
console.log(text); //undefined
text = 'hello hoisting!';
var text;
console.log(text);	//hello hoisting
 

foo1(); // 작동
foo2(); // error - foo2 is not a function
function foo1() {
  console.log('Hello');
}
var foo2 = function() {
  console.log('world');
}

• 2번째줄의 foo2는 undefined이기 때문에 호출시 함수가 아니라는 오류를 낸다. 호이스팅현상은 일어난 상태이다.

• 함수 선언식은 호이스팅 현상(foo1)이 일어나고 함수 표현식(foo2)은 호이스팅이 일어나지 않는다.

• foo1은 var과 다르게 undefined로 나오지 않고 function으로 나오고 실행도 된다.

• es5가 많이 때문에 아직까지는 var가 어떻게 동작하는지 알고 있어야함...