<TIL 230105>var let const 호이스팅

1. 변수란 무엇인가?

변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 쉽게 말해서 우리가 물건을 상자에 담고 그 상자에 이름을 적어두는 것이라고 보면 된다.

2. var

ES5까지 쓰고 있던 변수로, 큰 단점을 가지고 있던 변수 선언 방식이다.
아래의 코드와 같이 var의 치명적인 단점은 바로 중복 선언이 가능하다는 것이다.

var a = 10
console.log(a) // 10
var a = 12
console.log(a) // 12

또한 var는 함수 스코프를 가지는데, 이때의 또 다른 문제점이 바로 아래와 같은 코드가
정상적으로 출력된다는 것이다.
즉, var는 전혀 다른 함수에서 선언이 되어도 다른 함수에서 출력이 가능하기 때문에 문제가 많았다.

function ex1(){
	var i = 0;
}

function ex2(){
	console.log(i)
}

ex1()
ex2()

심지어 for문에서 변수로 선언되어도 var는 함수 스코프를 가지고 있기 때문에
함수가 아닌 for문에서 선언되면 사라지지 않고 남아있는다.

for(var i = 0; i <= 10; 1++){
	console.log(i)
}
console.log(i) // for문으로 인해 1~10까지 나오고 for문 밖에서 i의 값인 11도 출력된다.

3. let과 const

2015년 ES6 때 var의 단점들을 보완해서 나온 것이 바로 let과 const다.
var와 똑같이 변수를 선언할 때 쓰이지만, var와 다르게 중복 선언이 불가능하다.

let a = 10
console.log(a)
let a = 12
console.log(a) // Uncaught SyntaxError: Identifier 'name' has already been declared

1) let과 const의 차이점

let은 중복 선언은 불가능하지만, 재할당은 가능하다.
즉, 같은 상자를 쓸 수는 없지만, 상자 안에 있는 물건을 다른 것으로 바꾸는 것은 가능하다는 이야기다.

let a = 10
console.log(a) // 10
a = 20
console.log(a) // 20

const는 중복 선언도 불가능하고, 재할당도 불가능하다. 그러나 객체는 재할당이 가능하다.
또한, const는 선언과 동시에 초기화가 이루어져야 한다는 조건이 있다.

const name; // Uncaught SyntaxError: Missing initializer in const declaration
const name = 'park'
-----------------------------------------------------------------------------
const name = 'park'
console.log(name) // 'park'
name = 'lim'
console.log(lim) // Uncaught TypeError: Assignment to constant variable.
-----------------------------------------------------------------------------
const name = 'park'
const name = {
	a = 'park'
}
name.a = 'lim'
console.log(name.a) = 'lim'

4. TDZ(Temporal Dead Zone)

TDZ는 Temporal Dead Zone의 약어로 var의 호이스팅 문제를 해결하고자 나온 것으로
변수들의 일시적 사각지대라고 보면된다.

아래의 그림처럼 코드가 실행되면 호이스팅으로 인해 변수들을 모두 위로 끌어올리고 동기 방식으로 위에서 순서대로 코드를 읽어나가는데 이때 변수를 TDZ에 넣어두고 변수의 값이 할당되기 전까지 TDZ라는 것이 변수의 접근을 막는다.
그래서 변수의 값이 할당되지 않은 pi; 에서 에러가 발생하였고 pi의 값이 할당되고 난 후에 정상적으로 작동한 것이다.

⭐

TDZ에 영향을 받지 않는 구문도 있다.
var, function, import가 대표적이다.

5. 변수의 호이스팅

변수의 호이스팅이란?
코드가 실행되고나서 코드를 읽어가기 전에 코드 내에 선언된 변수들을 모두 할당된 값과 분리하여 TDZ에 넣어둔다.
그 이후에 코드를 읽어나가면서 TDZ에 있던 변수에 값을 할당하며 실행되고, 값이 할당되기 전까지 변수에 대한 접근을 막는다.
이러한 TDZ와 호이스팅 방식 덕분에 기존에 쓰이던 var의 중복선언 문제가 해결되었고 현재는 대부분이 let과 const를 사용하여 변수를 선언한다.

⭐

const와 let은 호이스팅이 되지 않는 것처럼 보이는 것일 뿐
const와 let은 호이스팅이 된다 입니다.!!
아래의 코드 결과를 보면 호이스팅 된다는 것을 알 수 있답니다.

console.log(a) //Uncaught ReferenceError
let a = 10

console.log(b) //Uncaught ReferenceError
const b = 10

마치며...

호이스팅과 TDZ에 대해서 정리하며 확실하게 알게된 듯 합니다.
구글링에서는 호이스팅이 된다고 하고 강사님의 강의에서는 호이스팅이 안된다고 했었는데,
제가 직접 코드를 쳐보고 책도 보니까 확실히 이해도 되고 결과를 알게되어 좋네요!
결론은 let과 const는 호이스팅한다!!으아아