[JS] 호이스팅

 

호이스팅
함수가 실행되기 전에 안에있는 변수들을 범위의 최상단으로 끌어올리는 것

---

 

자바스크립트의 특이한 특징

짜놓은 코드들이 실행이 되기 전에 먼저 자바스크립트엔진이 선언해둔  변수와 함수들을 가져가서 메모리에 기억을 해둔다. 

 

 

예시1)

console.log(a);
var a = 1;
console.log(a);

undefined
1

var는 선언과 초기화가 동시에 진행된다.
이 때 값을 undefined로 초기화하기 때문에 값을 할당하기 전에 참조해도 오류가 나지 않고 undefined값을 얻는다. 

다른 언어들에서는 오류 발생 but, 자바스크립트는 오류 발생안된다.
왜? 호이스팅 때문에

 

 

 

 

전역변수 : 블럭{} 밖에서 선언을 한 어디서든 쓰일 수 있는 변수

지역변수 : 블럭{} 안에서 선언을 해 블럭 안에서 만 사용 가능

예시2)

for(var i = 1; i <= 5; i++) {
  console.log(i);
}
console.log(i);

1
2
3
4
5
6

예시3)

function ex3 () {
  var a = 3;
  console.log(a);
}
console.log(a);

ReferenceError: a is not defined

var는 function만 지역변수로 호이스팅 되고, 나머지는 다 전역변수로 올려버린다. (for, if문 등등)

 

 

 

예시4)

var a = 1;
console.log(a);
var a = 2;
console.log(a);

1
2

예시 2, 4을 보면 상식적으로 이해가 안된다.

왜? 다른언어에선 상상조차 못할 변수 재선언과 지역변수의 개념을 위반하기 때문

따라서 var에는 많은 오해와 문제들이 있다

-> 따라서 개발자가 let을 개발함.

 

예시5)

console.log(a);
let a = 1;
console.log(a);

ReferenceError: a is not defined

 

let을 쓰는 순간 var에서 있던 기상천외한 일들이 해결

 

반면 let과 const는 선언 단계와 초기화 단계가 분리되어 진행된다.

호이스팅 되면서 선언단계가 이루어지지만, 초기화 단계는 실제 코드에 도달했을 때 진행된다.

따라서, 실제 코드에 도달하기 전에 먼저 참조를 하게 되면 ReferenceError가 발생한다.

 

이는 Temporal Dead Zone(TDZ) 때문이다.

let과 const로 선언된 변수들은 실제 코드에 도달하기 전까지는 TDZ 영역에 존재하며, 접근할 수 없다.

이렇게, TDZ로 인해 잠재적인 버그를 줄일 수 있다.

 

 

요약

1. 호이스팅은 변수 선언문이 마치 호이스팅 최상단에 끌어올려진 듯한 현상이다.

2. var로 선언된 변수는 선언과 초기화가 동시에 진행된다.

    값을 할당하기 전에 참조해도 오류가 나지 않고 undefined 값을 얻는다.

3. let과 const로 선언된 변수는 선언과 초기화가 분리되어 진행된다.

    실제 코드에 도달하기 전까지는 TDZ 영역에 존재하며, 접근할 수 없기 때문에 ReferenceError가 발생한다.

 

결론 : let 써라.