호이스팅

호이스팅

호이스팅(hoisting)은 JavaScript에서  코드를 실행하기 전에 해당 변수나 함수를 참조할 수 있는 현상을 의미합니다.

자바스크립트는 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정인 실행 컨텍스트를 거치게 된다.

이 실행컨텍스트를 위한 과정에서 스코프 내에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언을 하게 되는데,

여기에서 선언이 코드 실행 보다 먼저 메모리에 저장되는 과정으로 인한 현상(호이스팅)으로 인해 호출했을 경우 오류없이 값이 나오게 되는 것.

 

호이스팅 현상에서도 변수키워드 사이에서는 차이가 있다. var와 let,const의 차이점이다.

 

var와 let,const의 차이점

변수는 우선 선언 - 초기화 - 할당의 과정을 거친 후 생성이 되는데,

 

var의 같은 경우 선언하기 전에 해당 변수를 사용할 경우 선언 단계와 초기화 단계가 한번에 이루어진다. 그리하여 호이스팅 현상이 일어났을 때 아무런 오류없이 undefined의 값이 나오게 되지만, let과 const의 경우 선언 단계와 초기화 단계가 분리되어 진행이 되기 때문에, 

스코프 내에 변수를 선언하지만 초기화가 동시에 진행되지는 않고,  변수 선언문에 도달했을 때(코드 실행 후) 이뤄진다. 그리하여 호이스팅 현상이 일어나지 않는 것처럼 보이는 것.

 

 

TDZ(Temporal Dead Zone)

 

TDZ는 이 변수들의 생성과정과 관련된 용어이다.

변수를 생성할 때, 초기화 이전에 변수에 접근하려고 하면 참조 에러가 발생한다. 이유는 변수가 초기화 되는 과정에서 변수를 위한 메모리 공간이 아직 확보되지 않았기 때문이다.

이것은 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없다는 것을 의미한다. 다시 말해, 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 ‘일시적 사각지대(Temporal Dead Zone; TDZ)’라고 부른다.

 

 

함수의 경우, 함수 선언문은 전체 코드에서 어디에서든 호출할 수 있습니다. 함수를 호출하기 위해서는 함수의 선언부가 호이스팅되어야 합니다.

함수 선언문의 경우, 함수 선언의 위치와는 상관없이 코드 내 어느 곳에서든지 호출이 가능한데 이것을 함수 호이스팅(Function Hoisting)이라 한다.

component(2,3);

function component(num1,num2){
	return num1 + num2;
}