면접을 좀 봐본 프론트엔드라면 let과 var의 차이
그리고 그에 따른 꼬리 질문으로 호이스팅에 대한 것을 한 번쯤? 경험해 봤을 거라 생각한다

이것에 대해 가장 잘 정리되어 있는 유튜브를 발견하고 그 영상을 나를 위해 이렇게 정리한다
나를 힘들게 하던 호이스팅과 let,, var,, 완벽 정리

---

Javascript에는 변수를 선언하는 방법이 세가지가 있다

• var
• let
• const

const

const는 가장 쉽다
⇨ 걍 상수 만드는 거임, 변하고 싶지 않은 값들을 만들 때 쓰임

const id = 'yezi'
const password = '12345'
password = '6789'  // error, const는 값을 바꿀 수 없음

그래서 var와 let은 뭐가 다른데,,

우선 var는 let 보다 먼저 나왔다
기존에 변수 선언은 var 뿐이었는데 2015년 ES6의 등장으로 let과 const가 등장한 것이다
기존에 사용하던 var가 문제가 있으니까 새로운 변수 선언법이 나온거 겠지?

호이스팅

var의 단점을 알아보기 전에 호이스팅이라는 것에 대해 알아야 된다 ㅎㅋ
매번 느끼는 거지만,, 뭔가 배우려고 할때 부가적으로 알아야 할게 항상 생긴다 공부의 끝은 업지,,

자바스크립트에는 특이한 특징이 있는데, 실행 순서로 보자면

1. 코드를 짠 후(ex. var a = 1; console.log(a);), 코드 실행 꾸꾹
2. 코드 실행되기 전, 자바스크립트 엔진이 선언된 변수와 함수들을 가져가서 메모리에 기억
   매우 중요하다 매우매우매우매우매우
3. 메모리에 기억을 한 후,
   어디선가 a라는 변수를 불렀을 때 JS 엔진이 메모리에서 a를 찾아서
   너가 찾던 a 여기잇성~ 하는 것이다

⇨ JavaScript는 코드를 실행하기 전에 선언된 변수와 함수들에 대한 메모리부터 할당하고,
덕분에 함수를 호출하는 코드를 함수 선언보다 앞서 배치할 수 있는 것
이게 바로 호이스팅의 개념이다.

+ 그래서 호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 한다.

호이스팅의 이해를 돕는 예시들 - var

1. a가 선언되기 전에 a를 쓴 코드, 에러가 날까? ❌ 안 난다

   console.log(a);	// undefined
    var a = 1;			// 코드 실행 전, 메모리에 a라는 변수가 할당되어 있기 때문
    console.log(a);	// 1

   JavaScript는 초기화를 제외한 선언만 호이스팅한다.
   변수를 먼저 사용하고 그 후에 선언 및 초기화가 나타나면,
   선언 이전 시점의 변수는 default 초기화 상태이다.
   (var의 default 초기화 상태는 undefined, 그 외에는 초기화 상태 없음)
   
   

2. ㅋㅋ이번엔 선언도 안하고 a를 쓴 코드, 에러가 날까? ❌ 안 난다

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

   선언 전에 먼저 사용하고 초기화도 하고 나중에 선언을 해도 에러가 안 나는 코드,,
   JS가 이 어려운 걸 해냅니다,,,
   왜 JS가 무시당하는지 이제서야 깨달았다~
   
   

3. for문 안에서 사용된 i, 스코프(Sope) 밖에서 불러도 호출이 될까? ⭕️ ㅋㅋ가능

   for(var i = 1; i < 5; i++) {
      console.log(i)	// 1, 2, 3, 4
    }
    console.log(i);	// 5

   i가 지역 변수임에도 불구하고 스코프 범위 밖에서도 사용할 수 있던 이유는,
   var는 함수만 지역 변수로 호이스팅되고 변수는 전역 변수로 호이스팅 하기 때문이다.
   
   

4. 같은 이름의 변수가 두개인 경우, 사용이 가능할까? ⭕️ 가능~

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

   자고로 변수명이라 함은 주민번호와 같은 것인데 변수의 이름은 절대로 중복이 되면 안되는데
   JS가 또 이 어려운 걸 해냅니다 JS에게 박수를
   
   

var의 단점

예시에 나온 var의 단점 정리하자면

• var의 default 초기화 상태는 undefined 이기 때문에 변수 초기화 전 사용해도 에러가 안 난다.
• 함수만 지역 변수로 호이스팅되고 변수는 전역 변수로 호이스팅한다.
• 같은 이름의 변수가 두개인 경우 허용한다.

∴ var의 단점들이 모이고 모여 let의 등장 이유가 된다

앞서 본 예시들의 var을 let으로 바꾼다면?

1. a가 선언되기 전에 a를 쓴 코드, 에러가 날까? ⭕️ 에러 발생

   console.log(a);	// 초기화 전, a에 접근할 수 없다는 ReferenceError 발생
    let a = 1;
    console.log(a);

   var만 default 초기화 상태가 undefined이며,
   그 외에는 초기화 상태 없기 때문에 ReferenceError가 발생한다.
   ⇨ Temporal Death Zone (TDZ) : 선언은 되었지만 초기화 하기 전까지 죽어있는 상태
   (초기화 전까지 접근 불가)
   
   

2. 선언도 안하고 a를 쓴 코드, 에러가 날까? ⭕️ 에러 발생

   console.log(a);	// a가 정의되지 않았다는 ReferenceError 발생
    a = 1;
    let a;
    console.log(a);

   
   

3. for문 안에서 사용된 i, 스코프(Sope) 밖에서 불러도 호출이 될까? ❌ 불가능

   for(let i = 1; i < 5; i++) {
      console.log(i)	// 1, 2, 3, 4
    }
    console.log(i);	// i가 정의되지 않았다는 ReferenceError 발생

   
   

4. 같은 이름의 변수가 두개인 경우, 사용이 가능할까? ❌ 불가능

   let a = 1;	// a가 이미 선언됐다는 SyntaxError 발생
    console.log(a);
    let a = 2;
    console.log(a);

이정도면 미래에 또 까먹고 찾아볼 나에게 충분히 설명이 된 것 같다
var 쓰지마~~~

---

References

• https://youtu.be/fETYLCU2YYc