[Javascript] 호이스팅(hoisting)

호이스팅 이란?

Javascript 에서 호이스팅(hoisting)이란

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

Javascript 매커니즘 상 변수와 함수 선언은 맨 위로 이동된다.

 

여기서 인터프리터란 뭘까 궁금하여 검색을 해봤다.

인터프리터란 코드를 위에서부터 한 줄씩 읽어 내려가며 실행하는 프로그램을 말하는데

Javascript 는 기본적으로 인터프리터 언어라고 한다.

 

 

변수 선언의 호이스팅

Javascript는 초기화를 제외한 선언만 호이스팅 한다.

 

var 의 호이스팅

변수 선언시 var 로 선언한 경우 호이스팅 시 undefined 로 변수를 초기화 한다.

그러므로 호이스팅시 에러를 반환하지 않는다.

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; //선언
num = 5; //초기화
console.log(num); // 5 ===> 초기화한 값이 들어감

 

 

let, const 의 호이스팅

반면에 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화 하지 않는다.

그러므로 변수를 선언하기 전에 호출을 하면 에러가 발생한다.

// const의 경우
console.log(num); // ReferenceError: num is not defined
const num = 5; //선언 및 초기화

//let의 경우
console.log(num); // ReferenceError: num is not defined
let num; //선언
num = 5; //초기화

 

여기서 헷갈릴 수 있는 부분이 let과 const가 호이스팅 되지 않는다고 생각하게 되는데, let과 const도 호이스팅은 된다.

단지 위에서 설명한 것처럼 초기화를 제외하기 때문에

var의 경우 undefined로 변수를 초기화해 undefined가 출력되는 것이고

let과 const의 경우 호이스팅시 변수를 초기화하지 않기때문에 ReferenceError 가 나오는 것이다.

 

 

함수의 호이스팅

Javascript는 함수의 코드를 실행하기 전, 함수 선언에 대한 메모리부터 할당한다.

덕분에 함수를 호출하는 코드를 함수 선언보다 앞에 배치할 수 있다.

( 참고로 함수 선언문이 호이스팅이 일어나고, 함수 표현식은 해당되지 않는다. )

 

우리가 일반적으로 함수를 사용 할 땐 아래의 방식(함수를 선언하고 호출하는 방식)으로 선언하고 호출한다.

function myName(name) {
	console.log(`제 이름은 ${name} 입니다.`)
}

myName("나비"); // 제 이름은 나비 입니다.

 

그렇다면 함수를 선언하기 전에 호출을 먼저 하면 어떻게 될까?

myName("나비");

function myName(name) {
	console.log(`제 이름은 ${name} 입니다.`) // 제 이름은 나비 입니다.
}

함수의 호출이 함수 자체보다 앞에 있지만, 그럼에도 이 코드는 동작한다.

이것이 Javascript 에서 함수가 동작하는 방식이다.

 

 

참고 : https://developer.mozilla.org/ko/docs/Glossary/Hoisting