자바스크립트 (이하 'JS') 내에서 다뤄지고 있는 문법 또는 데이터 타입에 대해 공부를 하다보면 호이스팅이라는 단어를 자주 보게되는데 사실상 간단하게 개념만 알고 넘어가도 크게 상관이 없을 수도 있지만 JS의 동작 원리를 알고있어야 추 후 더욱 딥하게 프로그램밍을 하기 위해선 필요하다.
✍️ 정의
📝 사전적 정의
사실 호이스팅의 사전적 정의는 간단하다.
무엇인가를 끌어 올리는 행위
물론 JS 내에서도 저런 행위를 하긴 하지만 어떤 것(변수 또는 함수)을 호이스팅 하냐에 따라 어떻게가 달라진다.
📝 JS 내에서의 정의
JS내에서의 호이스팅의 의미는 다음과 같다.
JS에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.
조금 더 쉽게 이해하기 위해 다음과 같은 예제를 함께 보자.
console.log(studentName); // undefined
var studentName = "Sean"; // 가정 : 20번째 줄에서 선언 및 할당예를 들어, 위와 같이 식별자인 studentName을 20번째 줄에서 var 키워드를 사용해서 선언 및 할당을 했다고 하자.
만약 선언 및 할당 전 식별자를 호출하면 에러가 날 것이라 생각하지만 신기하게도 undefined가 출력된다.
이렇듯, JS는 var키워드로 선언 및 할당된 식별자를 호이스팅하여 최상단으로 끌어올린 것 같다. 물론 할당된 값까지 가져오지는 못한 것 같지만 어떤 것을 호이스팅했냐에 따라 달라지기 때문에 가볍게 정리해보도록 하자.
✍️ 호이스팅 종류 및 방식
📝 변수 호이스팅
var키워드
- 선언 및 초기화단계, 할당 이전 호이스팅 되어 진행
let&const키워드
- 어떻게보면 이 두 개의 키워드는 변수 호이스팅이 발생하지 않는 것처럼 보이지만
호이스팅이 된다는 점을 우선 알아두자 var키워드와 다르게 초기화단계가 이뤄지지가 않을 뿐 JS 엔진에 의해선언 단계 선 진행초기화단계의 경우, 선언문에 도달했을 때 실행된다.
- 함수 표현식
console.log(add(1,2)) // undefined 출력
const add = (x,y) => {
return x+y
}함수임에도 불구하고 함수 호이스팅의 하단부가 아닌 변수 호이스팅 하위에 있는 이유는 함수 호이스팅 처럼 함수가 최상단으로 끌어 올려져 실행이 되는 것이 아닌 var 키워드처럼 호이스팅 되면서 초기화단계 까지만 진행되고 할당 부분까지 내려온 후 동작이 된다.
- 클래스
클래스 선언문도 워에서 설명한 let과 const 키워드로 선언한 변수처럼 호이스팅 된다. 클래스도 호이스팅이 되지 않은 것처럼 동작하지만 호이스팅이 된다는 점 잊지 말자.
📝 함수 호이스팅
- 함수 선언문
console.log(add(1,2)) // 7 출력
function add(x,y) {
return x+y
}위에 보이는 것 처럼 함수 선언문으로 정의된 함수의 경우 정의된 위치는 하단에 있음에도 불구하고 호이스팅에 의해 코드의 선두로 끌어 올려져 동작하므로 함수 호이스팅이 제대로 이뤄졌다.
