Javascript-1 (var, let, const, TDZ hoisting)

INTRO

직장인 취준생으로써 공부를 하다보면 프로그래밍과 전혀 다른 내 일을 하다가 HTML, CSS를 공부하다보면 Javascript를 잊어먹거나 혹은 반대로 되는 경우도 종종 있다.

특히 Javascript의 경우에도 React 등을 다루다보면 map, reduce, filter 등 몇몇을 제외하고는 잘 안 쓰다보니 잊어버릴 때가 있다.

하지만 "기본은 알고 있어야지!" 하는 생각에 나를 위해서 Javascript를 조금 정리해보려고 한다.

[ var, let, const ] + TDZ, hoisting

: var, let, const → 이들을 '변수'라고 한다
: hoisting → scope 내부 어디서든 변 수 선언은 최상위에 선언 된 것처럼 행동

var

• function-scoped (함수형 스코프)
• 한번 선언 된 변수를 재선언 할 수 있다
• hoisting이 되므로 선언하기 전에 사용 가능하다
  but, 할당 된 것은 hoisting 되지 않는다.

[예시]
console.log(name); //undefined
var name = "dooly";

이렇게 보면 undefined가 나올 뿐 error가 나오지는 않는다!
왜? 왜 error가 안 생길까?
그 이유는 바로...

var name; 
console.log(name); //undefined
name = "dooly";

실제로 보이지는 않지만 이런 식으로 name이라는 변수가 hoisting 되기 때문이다.
변수는 hoisting 되지만, 할당 된 값('dooly')는 hoisting 되지 않는다

let

• Block-scoped(블록 스코프)
• 한번 선언 된 변수는 재선언이 불가하다

const

• Block-scoped(블록 스코프)

hoisting

• scope 내부 어디서든 변수 선언은 최상위에 선언 된 것처럼 행동
• let을 해보면 드디어 기다리던(?) error가 뜬다

console.log('nickName'); 
let nickName = "Dooly";

let은 왜 Uncaught ReferenceError가 나올까?
그 이유는 바로!!!! TDZ 때문!!

TDZ

Temproal Dead Zone

• let, const는 TDZ의 영향을 받으며, 할당하기 전에는 사용이 불가하다
  → 이를 통해서 코드를 예측 가능하게 하며, 잠재적인 버그를 줄일 수 있다

console.log(nickName);
const nickName = "Dooly"
console.log(nickName);

첫 번째 줄이 TDZ이며, 두 번째 줄은 함수 선언 및 할당을 했고, 세 번째 줄은 두 번째 줄의 할당한 것을 사용 할 수 있다