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

호이스팅의 개념 : 자바스크립트 및 액션스크립트 코드를 인터프리터가 로드할 때, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되어 변수의 선언을 항상 컨텍스트 내의 최상위로 끌어올리는 것을 의미한다. 이는 오로지 변수에만 해당되는 것은 아니고 함수도 가능하며, 자바스크립트에서 함수의 호출을 첫 줄에서 하고 마지막 줄에 함수를 정의해도 문제없이 작동되도록 하는 유용한 특성이다. 

 

예시를 들어보자면

 

test();

 

function test(){

alert("test");

}

 

코드는 위에서 아래로 실행되는게 원칙이다. 

하지만 test라는 함수선언식이 밑에 있음에도 불구하고 호이스팅을 통해 test함수가 먼저 선언될 수 있다.

 

원리를 살펴보자.

 

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.
함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
유효 범위: 함수 블록 {} 안에서 유효
즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.
실제 메모리에서는 변화가 없다.

출처 : https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog

 

 

호이스팅은 함수 선언식은 사용이 가능하나 함수 표현식은 사용이 불가하다고 한다.

변수에 할당된 함수 표현식은 변수의 스코프 규칙을 그대로 따른다고 한다.

 

유용한 기능인 것 같으나, 예상치 못한 버그의 원인이 되기 때문에 가급적 호이스팅이 발생되지 않도록 코드를 짜는것이 좋다고 한다!