[JS] About Hoisting - 호이스팅이란? 간단한 개념정리

 

자바스크립트는

변수를 3단계에 걸쳐서 생성하며,

생성하는 순서는 아래와 같다.

 

Javascript 엔진에서의 변수 생성 단계 : 선언 -> 초기화 -> 할당

선언 단계	변수를 실행 컨텍스트(실행 코드에 제공할 정보 객체)의 변수 객체에 등록한다.
초기화 단계	변수 객체에 등록된 변수를 위한 메모리 공간을 확보한다. (이때, undefined로 초기화됨) 메모리가 할당되면 메모리 참조를 통해 변수에 접근할 수 있다.
할당 단계	사용자가 정의한 값을 변수에 할당해준다.

 

var 의 경우, 선언과 초기화가 함께 진행된다.

 

var 의 경우, 선언과 초기화(undefined)가 함께 진행되고

 

let 의 경우, 선언과 초기화를 각각 진행한다.

let 의 경우, 선언과 초기화가 각각 진행되어 - 정의가 되지 않았다는 ReferenceError가 출력되며,

 

const의 경우,  선언할 시 초기화 여부를 검증한다.

const 의 경우, 선언할 때 초기화 여부를 검증하게 되어 SyntaxError 가 출력되게 된다.

 

 

간략하게 변수의 선언 (var, let, const) 만 살펴보았지만,

함수를 선언할 때도 비슷하다.

 

 

함수 선언의 경우 선언, 초기화, 할당이 동시에 진행된다.

 

함수 선언의 경우, 위의 3가지 단계가 동시에 진행되기에

위와 같은 출력값을 표기하게 된다.

 

단, 아래와 같은 경우는 에러를 출력한다.

 

초기화 전, 호출되는 print()

 

 

---

 

위에서 간략하게 살펴본 내용대로,

자바스크립트 엔진 특성으로 인하여

변수와 함수의 선언 위치에 상관 없이

'선언 단계' 를 통과한 변수/함수를 문서 내에서 호출할 수 있게 되는것,

 

마치 문서의 맨 위로 변수/함수들을 끌어올리는 것만 같은 이러한 특성을

 

Hoisting (in Javascript) - 호이스팅 이라고 한다.

 

---

hoist 의 사전적 정의

 

 

let 과 const 는 호이스팅이 불가능하다?

 

엄밀히 말하자면, let 과 const 는

호이스팅으로 인해 생길 수 있는 버그 (에러가 아니다!) 를 예방할 수 있는 기법일 뿐

호이스팅은 이미 이루어지고 있다.

 

위의 예시에서 살펴보았듯,

Reference Error 혹은

Syntax Error 를 이용하여, 적절하지 못한 사용임을 표현해주고 있지만

이미 let 과 const 또한

자바스크립트 엔진의 특성상 호이스팅되어

선언되기 전에 사용되어도 접근할 수 있게 된다.

 

정리하여 말하자면

호이스팅은, 자바스크립트 엔진의 (인터프리터) 특성 상

코드 실행중 자연스럽게 거치는 전처리 과정일 뿐이다.

 

여러 사례들을 반복해서 경험하거나 학습한 후

상황에 맞는 방법을 찾는것이

성장하는 개발자의 옳은 방향이지 않을까..! 😎

 

참고 :

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

https://tecoble.techcourse.co.kr/post/2021-04-25-hoisting/

https://mong-blog.tistory.com/entry/JS-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85hoisting