[JavaScript] 호이스팅(Hoisting)

호이스팅의 개념

함수 안에 있는 선언들을 모두 끌어 올려서 해당 함수 유효범위의 최상단에 선언하는 것을 의미합니다.

 

자바스크립트 Parser가 함수 실행 전에 해당 함수를 한번 훑고, 이 함수 안에 존재하는 변수/함수 선언에 대한 정보를 기억하고 있다가 실행하는 것입니다.

이 때 유효범위의 의미는 함수 블록 {} 입니다.

 

즉, 함수 내에서 아래쪽에서 선언되어지는 부분을 미리 다 선언해놓는 것이죠.

실제로 코드가 끌어올려지는 것은 아니고, 자바스크립트 Parser가 내부적으로 끌어올려서 처리하는 것입니다.

 

호이스팅의 대상

var 변수 선언과 함수 선언문에서만 호이스팅이 일어납니다.

var 변수/함수선언만 위로 끌어올려지고, 할당은 끌어올려지지 않습니다.

let/const 변수선언과 함수표현식에서는 호이스팅이 발생하지 않습니다.

 

좀 더 정확하게 말하자면, let과 const, 함수표현식에서도 호이스팅이 발생합니다.

이는 할당 전까지 TDZ(Temporal Dead Zone)에 머무릅니다. 

어떤 변수가 이 곳에 있는 동안은 스코프 내에 있는 것이라 생각하지 않기 때문에 엔진이 해당 변수를 찾지 못하게 됩니다.

 

결국, var은 어디에서 선언을 하든지 선언보다 변수할당이 먼저 되더라도 에러가 나지 않는것이죠.

하지만 let과 const에서는 변수 할당이 선언보다 먼저 위치하면 undefined 에러가 발생합니다.

 

호이스팅 우선순위

만약, 변수와 함수가 같은 이름을 사용한다면?

- 변수 선언이 함수 선언보다 위로 끌어올려진다.

- 값이 할당되어있지 않은 변수이면, 함수선언문이 변수를 덮어쓴다.

- 값이 할당되어있는 변수이면, 변수가 함수선언문을 덮어쓴다.

 

호이스팅 주의점

코드의 가독성과 유지보수를 위해서 호이스팅이 일어나지 않도록 하는 것이 좋습니다.

호이스팅을 제대로 모르더라도, 함수와 변수를 가급적 코드의 상단부분에 선언하면 호이스팅으로 인한 스코프 꼬임 현상을 방지할 수 있습니다.