[JavaScript] 중급 #1 - 변수, 호이스팅, TDZ(Temporal Dead Zone)

 

let, const, var 차이점

  -  var는 한 번 선언된 변수를 다시 선언할 수 있다.

  -  let은 한 번 선언된 변수를 다시 선언할 수 없다.

  -  var는 선언하기 전에 사용할 수 있다.

 

var name; //호이스팅

console.log(name); //undefined 출력

name = ‘Angel’; //할당

→  var로 선언한 모든 변수는 코드가 실제로 이동하지는 않지만 최상위로 끌어올려진 것처럼 동작한다.

    (=호이스팅, hoisting)

→  undefined가 출력되는 이유는 선언은 호이스팅 되지만, 할당은 호이스팅 되지 않기 때문이다.

 

 

 

호이스팅(hoisting): 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동

 

let과 const도 호이스팅이 가능하지만 TDZ(Temporal Dead Zone)에 영향을 받아 에러가 발생한다.

TDZ에 있는 console.log(name);은 Reference Error가 발생한다.

다시 말해, 이 TDZ에 있는 변수들은 사용할 수 없다.

 

let과 const는 할당을 하기 전에 사용할 수가 없다.

이는 코드를 예측 가능하게 하고, 잠재적인 버그를 줄일 수 있다.

 

 

호이스팅은 스코프 단위로 일어난다.

여기서 스코프는 showAge() 내부이고, let으로 선언된 age변수가 호이스팅을 일으킨다.

만약 호이스팅이 되지 않았다면 함수 밖에서 선언된 age = 30이 콘솔에 찍혀야 한다.

하지만 Error가 뜨는 것으로 보아 let도 호이스팅이 일어난다는 것을 알 수 있다.

 

 

 

변수 생성 과정

let

1.  선언

2.  초기화

3.  할당

 

var

1.  선언 및 초기화

2.  할당

→  초기화 단계에서 undefined를 할당

 

const

1.  선언 + 초기화 + 할당

ex)  

const age; //Error 발생

age = 20;

※  let과 var는 선언만 하고 나중에 할당하는 것이 가능, const는 불가능

 

 

 

var는 함수 스코프(function-scoped)

let, const는 블록 스코프(block-scoped)

 

블록 스코프 – 함수, if문, for문, while문, try-catch문 등

ex)         

const age = 30;

if(age>19) {
	var txt = ‘성인’;
}
console.log(txt); //“성인” 출력

→  txt 변수가 let 혹은 const로 선언되었다면 if문 밖에서 사용 불가

 

 

 

↓[코딩앙마] 자바스크립트 중급 강좌 링크

https://www.youtube.com/watch?v=ocGc-AmWSnQ