[JavaScript] let과 var 그리고 호이스팅(hoisting)

자바스크립트에는 변수를 선언하는 3가지 방법이 있다.

1. Const

변하지 않는 값인 "상수"를 선언할 때
ex) const myGender = "Male";

2. let & var

변하는 값인 "변수"를 선언할 때

let은 ES6에 나온 문법으로, var 지양 let 지향하게 됨.

둘 차이점으로는 1) 변수선언방식 2) 스코프 3) 호이스팅 이 있는데,
여기서는 호이스팅에 대해 다뤄보려고 한다.

호이스팅(hoisting)

자바스크립트에서 변수와 함수 선언이 코드의 맨 위로 끌어올려지는 것.

이때 변수와 함수 선언은 메모리에 기억되면서 undefined으로 초기화가 됨.
그 후 해당 변수와 함수가 선언될때 제 값을 할당함.

---

ex) hoisting with var

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

// 출력:
// undefined 
// 1

해석 : 첫 줄에 작성한 console.log는 변수 a가 선언되기 전에 호출되었다. 하지만 호이스팅 덕분에 오류가 발생하지 않고 undefined가 출력되었다. 그 후 a에 1이라는 값을 할당해 주었고, 두 번째로 출력한 console.log에는 1이 나오게 된다.
(error =/ undefined)

---

ex) hoisting with var

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

// 출력:
// 1
// 2
// 3
// 4

---

ex) hoisting with var

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

// 출력:
// 1
// 2

---

ex) Doesn't hoisting with var

var a = 2;
function test () {
	var b = 1;
};
console.log(b)

// 출력:
// 에러 발생. ReferenceError: b is not defined

var은 함수만 지역변수로 호이스팅 되고 나머지는 전역변수로 호이스팅 됨

---

ex) hoisting with let

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

// 출력:
// 에러 발생. ReferenceError: Cannot access 'a' before initialization

let의 호이스팅은 var과는 다르게, 선언은 호이스팅 되지만 undefined로 초기화 되지 않는다. 그래서 변수에 값을 할당하기 전까지는 접근할 수 없다.

---

참고:https://youtu.be/fETYLCU2YYc?si=sCgaefSVLOz2KZXF