[Javascript] 호이스팅이란? | Hoisting

호이스팅이란?

"끌어올린다"는 뜻. 함수 안에서 변수의 선언만 분리해서 코드의 최상단으로 옮기는 것이다.

 

Code1

console.log(aaa)
var aaa = 3

Code1을 실행했을 경우 Undefined가 뜨는 것을 확인할 수 있다.

위와 같은 코드가 있다고 가정해보자. console.log(aaa)는 aaa를 선언하기 전에 불러왔으니 오류가 나야 정상이다. 하지만 undefined일 뿐 실행은 된다. 이것은 var aaa = 3 이 호이스팅 됐기 때문이다. 이러한 현상은 var로 변수/상수를 선언했을 때에 발생한다.

 

Code2

console.log(bbb)
const bbb = 2

Code2를 실행했을 경우 오류가 나는 것을 확인할 수 있다.

그렇다면 let/const는 어떨까?

여기도 마찬가지로 호이스팅은 이루어지나, TDZ(Temporal Dead Zone)라는 별개의 임시공간에 저장되었기 때문에 오류가 난다. 이러한 작동이 대부분의 컴퓨터 언어의 기본이다.

 

* 아직 let/const가 없었떤 ES6 이전에는 호이스팅이 표준 명세에 나타나지 않는다. 당시에는 호이스팅이 JavaScript의 동작 방식을 설명하는 일반적인 방법이었다. (참고: https://developer.mozilla.org/ko/docs/Glossary/Hoisting)

 

함수의 경우

여기서 문제는, 함수도 호이스팅이 된다!

위와 같은 코드를 입력하고 라이브 서버를 띄워보면, zzz라는 함수가 호이스팅되어서 코드 순서가 뒤집혔음에도 정상 작동 되는 것을 확인할 수 있다. (단, 이 경우 같은 이름의 함수 두개를 function으로 정의했기 때문에 함수가 꼬여 오류가 발생할 가능성이 높다.)

 

이러한 경우에 화살표 함수를 이용하면 조금 더 안정적으로 사용할 수 있다.

• 기본 함수보다 조금 더 느릴 수 있지만 안전성은 높다.
• 리액트의 경우 추가 기능으로 속도를 보완할 수 있다.

화살표 함수를 이용한 예시