[Frontend] JavaScript : 호이스팅(Hoisting)이란?

호이스팅 (Hoisting)

호이스팅이란 변수나 함수가 어디서 선언되든지 해당 스코프 최상단에 위치하게 되어 동일 스코프 어디서든 참조할 수 있는 것을 말한다. 간단히 얘기하면 변수나 함수가 선언된 시점보다 앞에서 사용되는 현상을 말한다.

 

자세히 얘기하자면..

컴파일 단계 동안 코드가 실행되기 전에 변수와 함수 선언이 스캔된다. 모든 함수와 변수 선언들은 렉시컬 환경이라 불리는 자바스크립트 데이터 구조 내의 메모리에 추가된다. 그리고 소스 코드 내에서 실제 선언되기 전 일지라도 사용할 수 있게 된다. 즉, 코드 실행 전 이미 변수와 함수 선언이 저장되어 있기 때문에, 선언문보다 참조(호출)이 먼저 나와도 오류 없이 동작하게 된다.

func1();	
func2();	// Uncaught TypeError!

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

var func2 = function() {
  console.log('func2');
}

위에 예제를 보면 func2도 호이스팅이 적용되긴 했다. 하지만 에러가 나는 이유는 var 변수로써 func2가 선언은 되었지만 아직 초기화되지 않은 상태에서 실행했기 때문이다. 만약 let, const 변수였다면, ReferenceError가 나게 된다.