Hoisting 호이스팅

호이스팅은 무엇인가?

 

함수, 변수 선언부가 유효범위 최상단으로 끌어올려지는 현상

 

자바스크립트는 코드를 실행할 때 기본적으로 상단에서 하단으로 내려가며 차례대로 실행된다.

 

하지만 자바스크립트 엔진에서 전체 코드를 동작하기 전에 함수, 변수 등의 각종 선언들을 먼저 읽고 구조를 파악하는 과정을 거치는데 이 때, 파악된 선언들이 코드 실행 전에 메모리에 저장되므로 선언부의 위치에 관계 없이 해당 유효범위의 최상단에서 선언된것 같은 현상이 나타난다. (변수의 경우 초기화가 진행되기 전 선언만 된 상태)

 

 

const a = 5
 
ten()
 
function ten(){
    console.log(a + 10)
}

이 코드를 살펴보면 ten이라는 함수를 3번 라인에서 호출하는데 아직 함수가 선언되기 전이므로 기본적으로 생각하면 정상 동작하지 않을 것으로 예상된다.

 

그러나 이 코드는 정상적으로 동작한다. 

 

5번 라인에서 ten 함수를 선언하는 부분이 호이스팅되어 최상단으로 끌어올려진 듯한 현상이 일어나게 되기 때문이다. 

 

위의 예시 코드는 함수 선언식 이었으므로 호이스팅이 발생하지만 

 

const ten = function (){
    console.log(a + 10)
}

이와 같은 방식의 함수 표현식 이었다면 호이스팅이 발생하지 않아 에러가 발생하게 된다.

 

호이스팅의 좋은점?

호이스팅이 발생하는 것으로 인해 생각할 것이 더 많아져 복잡해지기도 하는데 어떤 때에 도움이 될까?

 

호이스팅이 발생하지 않는다면 모든 함수의 내용을 코드 상단부에 작성한 후 하단부에서 그것을 실행해야 한다. 

 

이렇게 되면 언제 실행될지 모르는 함수 선언부를 위에서부터 전부 다 해석하며 내려가야 한다. 

 

하지만 호이스팅을 이용한다면 상단부에 함수를 호출하고 그 함수를 하단부에 선언하는 식으로 작성하여

 

상단부에서 함수의 이름을 보고 대략적인 구성을 유추하기 편할 수 있다.

 

약간 국어 문제 풀 때 본문 전부 읽고 문제 읽는것보다 문제 먼저 읽고 본문 읽는게 편한 것 같은 느낌?

 

개인적인 느낌으로는 아직 유용하게 사용하기 힘들 것 같은데 나중에 생각이 바뀔 지는 모르겠다.