[코드팩토리] 호이스팅:Hoisting

개념

모든 변수 선언문이 코드의 최상단으로 이동되는 것처럼 느껴지는 현상을 이야기한다.

 

모든 프로그래밍 언어들은 Top to Bottom의 개념이다. 이것은 위에서 쓰인 함수부터 차례대로 실행한다는 의미인데,

호이스팅은 변수를 선언하면 그 변수들을 미리 메모리에 저장해두고, 나중에 호출이 되면 값을 출력해주는 방식을 일컫는다.

위의 코드는 정상적이다. fruit라는 변수에 사과라는 값을 담았고 이를 콘솔에 출력했더니 정상적으로 사과라는 string이 출력됐다.

그런데 이 경우를 보면 1번줄의 console.log(fruit);는 분명히 변수가 선언되기도 전에 쓴 함수이기 때문에 에러가 출력되어야 하는데 변수의 초기화를 의미하는 undefined가 출력됐다.

2번째 줄에서 변수를 선언한 것인데 변수를 최상단으로 이동시켰기 때문에 1번째 줄에선 초기화를 시켜버리고, 3번째 줄에서는 정상적으로 출력을 했다.

위 코드는 마치 아래와 같이 짠 것과 동일하다. 원래대로라면 아래와 같이 짜는 것이 맞다.

호이스팅을 활용하면 편리하게 활용할 수 있는 분야가 있지만 일반적인 환경에서는 자칫 코더의 실수를 불러올 수도 있기 때문에 자바스크립트는 ES6에서 let과 const를 만들게 된다. let과 const도 호이스팅이 적용되는 함수지만,

기능을 하나 더 추가해서 변수가 선언되기 전에 변수를 불러오면 에러를 발생시키는 기능이 추가되었다.

 

전의 예제에서 var 함수를 let으로만 바꾼 것인데 아래와 같이 에러가 출력된다.

let도 호이스팅이 지원되기 때문에 JS는 1번째 줄에서 변수가 선언되기 전에 이미 fruit를 꺼내왔어도 값을 알고 있지만,

fruit가 정의되기 전까지는 너에게 fruit값을 보여줄 수 없다는 에러 문구이다.

 

정리하자면, 의도적으로 호이스팅을 활용할 순 있지만 일반적인 코딩 환경에서는 의도치 않은 에러를 발생시킬 수 있기 때문에 var 함수보다는 let과 const를 사용하는 것이 편리하다.

 

 

 

출처 : https://youtu.be/ZOVG7_41kJE?si=zny239vN2kVMI0w8

https://www.youtube.com/watch?v=AlcRl4pJd0c