호이스팅이란?

호이스팅(Hoisting)

호이스팅은 변수나 함수 선언을 함수 유효 범위(또는 함수 외부의 경우 전역 범위)가 JS 엔진에의해

맨 위로 이동하는 현상을 말한다.

( 🐸 : 이렇게 말하면 쉬운 문장 같으면서도 어려운거 알아요 저도 그랬으니까 천천히 읽으면서 내려가보면 조금씩 이해될겁니다..! ) 

JavaScript 엔진은 실행하기 전에 코드를 구문 분석하고 구문 분석 단계 중에 모든 
변수 및 함수 선언 을 범위의 맨 위로 이동합니다.
JS 엔진의 이러한 동작을 호이스팅( hoisting)이라고 합니다.

이를 제대로 이해하기 위해서는 TDZ와 변수의 생성 단계에 대한 이해가 필요하다.

---

TDZ

TDZ(Temporal Dead Zone)  직역시 일시적인 사각지대란 뜻이다.

이 일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간이다.

 

TDZ라는 것은 변수 선언 및 초기화 하기 전 사이의 사각지대 인 것을 알 수 있다!

즉 변수를 선언 및 초기화 하기전에 사용하게 되면 TDZ 상태에서 사용하는 것 이기 때문에 ReferenceError 에러가 나타나게 되는 것이다 !!

const 변수 선언 전에 num을 호출하는 행위 TDZ존에 걸림

---

변수의 생성 단계

자바스크립트에서 변수(variable)는 3가지 단계를 걸쳐 생성된다. 

 

Step 1. Declaration phase : 선언 단계

• 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계이다.
• 이 변수 객체는 스코프가 참고하는 대상이 된다.
• 변수를 선언한다. 예) var myValue

 

Step 2. Initialization phase : 초기화 단계

• 실행 컨텍스트에 존재하는 변수 객체에 선언 단계에서 생성된 변수를 위한 메모리를 만드는 단계이다.
• 이 단계에서 할당된 메모리에 자동으로 undefined 로 초기화 된다.

 

Step 3. Assignment phase : 할당 단계

• 초기화 단계에서 undefined로 초기화된 메모리에 다른 값을 할당하는 단계이다.
• myValue = 100

 

// 선언 var setId; // 초기화(할당) serId = '16'; // 사용 alert(myValue);

 

---

변수에 관한 배경지식

- Block scope(블록스코프)

{ }로 감싸져 있는 블록 범위를 말한다. ( if,for, 함수, while, try/catch 등...)

{ } 블록 스코프 안에 있는 얘들은 더이상 박스 밖에서 볼 수 없다( 사용할 수 없다, 블록안에서만 가능 )

 

// 전역 변수 let globalName = 'global scope' { let name = "Frog"; console.log(name); name = "Hello"; console.log(name); // 전역 변수는 블록 밖에서 호출은 물론이고 안에서도 호출할수있다. console.log(globalName); } console.log(name); // 블록 안에있는 name 변수에는 접근할 수 없다. Error console.log(globalName)

 

---

변수 호이스팅(Variable Hoisting)

변수 호이스팅에서는 Var 변수에 대해서만 Error가 뜨지않으며, undefined로 자동 초기화 된것을 알 수 있다.
다른 변수들( const, let )에 대해서는 아래에서 다뤄본다.

 

console.log(num); // undefined var num = "oneTwoThree";

num 변수의 값은 정의되지 않았지만 선언되기 전에 변수에 접근할 수 있음을 알 수 있습니다. 

이것은 실제로 보이진 않지만 JS 엔진이 실행 전에 코드를 아래👇🏻와 같이 수정하기 때문에 발생합니다.

 

var num; // 호이스팅 console.log(num); // undefined num = "oneTwoThree";

var의 경우 변수를 선언하면 초기화하는 과정이 자동적으로 동시에 일어나서 호이스팅이 발생한다.

마지막 줄에서, num 의 값이 할당됩니다.

Var 변수의 생성 단계

 

🚫주의

변수 선언은 선언된 범위의 맨 위로 이동된다는 점에 유의하는 것이 중요합니다.

블록 범위 함수 안에서 따로 영향

function () { console.log(x); var x = '함수{}스코프 안에서 호이스팅'; } console.log(y); var y = '글로벌 범위 호이스팅';

 

❗플러스

{ age = 4; var age; } console.log(age); // block scope을 무시하고 콘솔찍힘 var 깡패;;;

 

---

함수 호이스팅(Function Hoisting)

JavaScript의 형식 함수 선언도 변수와 마찬가지로 범위의 맨 위로 호이스트됩니다. 

class 구문은 호이스트되지만 영향을 받지 않는다.

 

Hello(); // Hello function Hello() { console.log("Hello"); }

위의 코드에서 볼 수 있듯 함수도 선언도 전에 Hello() 사용했지만 호이스팅으로 인해 Hello 값이

출력되는 것을 볼 수있는 것이다. ( 호이스팅 )

 

변수 호이스팅과 함수 호이스팅 의 중요한 차이점은 

변수가 호이스트된 var다음 undefined으로 자동 초기화되는 반면

함수 선언은 호이스트 되어 해당 함수 값으로 초기화된다는 것 입니다.

 

🚫주의

함수 호이스팅은 아래와 같이 함수 표현식 할당에는 적용되지 않는점 주의하자

Hello(); // TypeError: greeting is not a function console.log(hello); // undefined var hello = function Hello() { console.log("Hello!"); };

 

 

---

Var, function 호이스팅 이외

위의 글로 우리는 지금까지 var,  function선언 에 대해서 호이스팅되는 것을 알았다.

우리가 잘아는 let과 const은 호이스팅 되지 않는걸까? 알아보자 

우선 기본적으로 모든 선언 ( var, let, const, function, import구문, class) 은 JavaScript에서 "호이스트" 된다.

 

이는 앞서 계속 말했듯 이름이 범위에서 선언된 경우 해당 범위에서 식별자가 항상 앞서 인식되고

해당 특정 변수를 참조한다는 것을 의미합니다.

 

하지만 const , let, 클래스 구문은 아래와 같이 실행해보면 호이스트 되지 않은것 처럼 에러가 발생한다.

console.log(hello) const hello = "Hello frog" //error : ReferenceError

let 키워드는 선언된 변수는 선언 단계와 초기화 단계가 나누어서 진행된다.

호이스트에 의해 변수를 등록(선언단계)하지만 초기화 단계는 변수 선언문에 도달했을 때 이루어지며.

그렇기 때문에, 초기화 이전에 변수에 접근하면 참조 에러(Reference Error)가 발생한다

console.log(num); // Reference Error, TDZ구간 let num; // 선언문에 도달 초기화 단계 console.log(num); // undefined num = 10; // 할당 단계 console.log(num); // 10

 

const 

const는 재할당 및 재선언이 금지된다.

그렇기 때문에, const 키워드로 선언된 변수는 선언 및 할당을 동시에 해야 한다.

console.log(hello) //error : ReferenceError const hello = "Hello frog" // 선언 할당을 꼭 동시에 해야한다

 

결론

따라서 var / function(함수) 선언과 let / const / class선언 의 차이점 은 초기화 이다. 

var / function(함수)는 *스코프 상단에 *바인딩이 생성될 때 바로 변수 또는 함수는 undefined로 초기화된다 . 

let / const / class로 선언된 변수는 초기화 되지 않은 상태로 유지 된다.

let / const / class 문이 실제로 선언문 코드 위치에 도달했을때만 초기화된다.

TDZ는 선언하기 전에 변수를 사용하는 것을 허용하지 않는 다는 것.
반대로 var 변수는 선언 전에도 사용할 수 있기 때문에 코드가 엉키거나 오류를 일으키는 원인이 될 수 있기 때문에 var 사용은 피하고 let과 const 사용을 주로 하라

 

* 스코프 : 변수가 값을 참조할 때 접근할 범위 ( 전역/ 지역 )

* 바인딩: 프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는 행위

 

📚출처

---

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

https://nuhends.tistory.com/111

https://cpro95.tistory.com/431

https://s-bug.tistory.com/45