1. var

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

var name= 'Mike';
console.log(name); // Mike

var name = 'Jane';
console.log(name); // Jane

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

var name;
console.log(name); // undefined
name = 'Mike'; // 할당

*호이스팅이 가능하다. 선언 호이스팅 가능, 할당 호이스팅 안됨.
-> 호이스팅: 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동

var 선언, 초기화, 할당

*var는 변수를 바꿀 수 있다. var는 선언+초기화 후 할당이 일어난다. 그렇기 때문에 할당전 호출 하여도 undefined가 나온다.

2. let

Temporal Dead Zone

*let 과 const 도 호이스팅이 된다. 하지만 TDZ 영역에 걸린다. 이것은 코드 예측이 가능하고 버그를 줄여준다.

let 선언, 초기화, 할당

*let은 변수를 바꿀 수 있다. let은 선언 초기화 할당 과정이 따로따로 일어난다.

3. const

Temporal Dead Zone

*let 과 const 도 호이스팅이 된다. 하지만 TDZ 영역에 걸린다. 이것은 코드 예측이 가능하고 버그를 줄여준다.

const 선언, 초기화, 할당

*const는 선언+초기화+ 할당이 한번에 일어난다.

예시 코드

let name;
name= 'Mike'

var age;
age = 30;

const gender;
gender = 'male'; // 오류코드 

4. 정리

var:

함수 스코프 ( 함수 내에서만 지역 변수로 사용)

let, const:

블록 스코프 ( 함수, if문, for문, while 문, try/catch문 등에서 지역 변수로 사용)