[JavaScript] 호이스팅(Hoisting)이란?

© 2020 Oracle

[JavaScript] 호이스팅(Hoisting)이란?

(글쓴날 : 2020.04.14)

 

---

* 이 글은 글쓴이가 공부한 내용을 정리하며 올리는 글입니다.

* 글의 내용은 MDN Web Docs 기반으로 공부하여 작성하였습니다.

---

 

 

호이스팅(Hoisting)이란?

---

1) 호이스팅(Hoisting)의 의미

먼저, 안 궁금하시겠지만 제가 궁금하기에 호이스트(Hoist)의 뜻은 다음과 같습니다.

출처 : 네이버 파파고

 

호이스팅(Hoisting)이란 ES6 이후에서 부각된 용어로, 쉽게 말하면 JavaScript 함수 내의 모든 선언들을 해당 함수 유효범위의 최상단으로 끌어올리는 것을 의미합니다.

 

원리를 좀 더 자세히 살펴보면, JavaScript의 경우 코드를 실행하기 전, 모든 선언문이 호이스팅되어 메모리(전역 객체)에 저장된 후, 런타임에 해당 선언문이 호출될 시 실행됩니다.

(따라서, 호이스팅이 되더라도 코드가 직접 상단으로 옮겨지지는 않으며, 실제 메모리상의 위치 변화 또한 없습니다.)

 

이러한 호이스팅으로 인해, 기존의 C 언어와 같은 프로그래밍 방식과 다른 코딩이 가능합니다.

 

JavaScript 함수 호이스팅(Hoisting) 예시

 

또한, 변수의 경우도 마찬가지인데 기가 막히고 코가 막히는 풍경이 펼쳐집니다.

 

JavaScript 변수 호이스팅(Hoisting) 예시

 

위의 예시들처럼, 이러한 방식은 기존의 관습적인 프로그래밍 스타일과 맞지 않으므로 대부분의 경우 혼란을 야기하게 됩니다. (한글 변수명 또한 혼란을 야기합니다...)

---

2) 호이스팅(Hoisting)의 해결

저의 경우, 키워드 var와 let 사이에 도대체 어떤 차이가 있는지 궁금해 공부하다가 호이스팅의 존재를 알게 되었습니다.

그 말인즉슨, ES6 문법인 let, const 키워드를 사용하시면 이러한 호이스팅 문제를 해결하실 수 있습니다.

(보통 ES6로 자바스크립트를 시작해 var를 안 쓰는 흐름상 몰라도 전혀 상관없었지만, 궁금하니까.. 찾아보니 면접에 나온다는 소문도...??)

 

JavaScript 변수 호이스팅(Hoisting) 해결 예시

 

그렇다면, 함수의 경우 어떻게 해결할까요?

역시, ES6의 Arrow function이 익숙해졌다시피, 함수를 선언이 아닌 변수에 리터럴로 할당해 주시면 되겠습니다. (굳이 Arrow function이 아닌 익명함수로 할당해 주셔도 됩니다!)

 

JavaScript 함수 호이스팅(Hoisting) 해결 예시

---

 

 

---

 

 

여기까지 JavaScript의 호이스팅(Hoisting)에 대해 알아봤습니다.

호이스팅의 경우 선언과 할당에 대한 개념만 확실히 잡혀있다면, 쉽게 이해할 수 있는 부분인 것 같습니다.

감사합니다.