호이스팅이란? / var를 지양하고 const, let 사용하라는 이유

Hoist

: 끌어올리다, 들어올리다

 

자바스크립트

: 위에서 아래로 순서대로 코드가 실행되는 인터프리터 언어!

 

자바스크립트에서 선언이 상단으로 끌어올려지는 것 = 호이스팅이 된다!

---

호이스팅이 되는 경우들

1. 함수 선언문

hoistFunc();

function hoistFunc() {
	console.log("hoist func");
}

함수선언이 호이스팅이 되기 때문에, 실행이 된다.

 

2. var 을 이용한 변수선언

자바스크립트의 변수 선언 var, let, const !

세가지 모두 호이스팅 되지만, var을 제외한 나머지는 호이스팅 특징에 영향을 받지 않는다!

 

변수 선언과정을 살펴보면

1. 선언 단계 (Declaration) : 변수 객체에 변수 등록
2. 초기화 단계 (Initialization) : 등록된 변수를 메모리에 할당. (변수는 undefined로 초기화)
3. 할당 단계(Assignment) : 할당된 값을 undefined에 할당

- var

im_var; // undefined
var im_var = 1;

- let

im_let; // Uncaught ReferenceError: im_let is not defined
let im_let = 1;

- const

im_const; // Uncaught ReferenceError: Cannot access 'im_const' before initialization
const im_const = 1;

var만 유일하게 선언과 동시에 초기화가 이루어져, 선언보다 먼저 변수를 사용하면 에러가 나지 않고 undefined로 초기화가 된다!

---

const와 let도 호이스팅을 한다면서! 에러는 왜 발생?

✨  let과 const는 TDZ(Temporal Death Zon)의 영향을 받는다!

 

TDZ는 잠재적인 버그를 줄인다. 값을 할당하기 전에는 사용할 수 없는 죽은 공간으로 만든다.

Uncaught ReferenceError: Cannot access 'im_const' before initialization

: 'im_const'라는 변수가 호이스팅으로 메모리할당은 되었지만, 값이 초기화 되기전에는 접근이 불가능하다는 오류!

= 일시적으로 죽은 zon이라고 말해줌

---

아니! 오히려 호이스팅 좋은거아닌가? 라고 생각이 들었지만,

호이스팅의 치명적 단점!

호이스팅은 결과의 예측을 힘들게 한다!

var n = 4;
function funcHoisting() {
	console.log(n); // undefined
    var n = 6;
    console.log(n); //6
}
funcHoisting();

호이스팅은 함수가 있을 경우, 해당 함수의 최상단으로 끌어올려져, 전역변수인 n = 4 가 실행되기 전에,  첫 로그 출력에서는 할당이 되지 않았다는 undefined가 들어가게 된다. 

 

이를 해결하기 위해 let과 const가 나왔다고 한다!

---

결론

var는 변수 호이스팅 문제와 함수 Scope를 고려하면서 작성해야하기 때문에, 오류를 발생시킬 가능성이 농후합니다.

var를 지양합시다!~!