자바스크립트 중급 강좌 #1 - 변수, 호이스팅, TDZ(Temporal Dead Zone)를 보고 학습하였습니다.

자바스크립트의 변수란..? var, const, let을 떠올릴 수 있습니다. 개발 할 때 var는 사용하지 않기에 익숙하지 않은데요. 오늘은 이 변수에 대해 이야기해 보겠습니다.

변수의 구분

이 변수들을 각각 어떻게 구분할 수 있을까요?

• 만약 이 변수를 수정 가능한 것과 수정할 수 없는(상수)로 나눈다면 이렇게 나눌 수 있습니다.
  • var, let vs const
• 그러나 이 변수가 생긴 시점으로 나눈다면
  • const, let vs var
• 로 나눌 수 있을 것입니다.

var가 있었지만 const, let이 나온 이유

es6 업데이트가 진행되면서 const와 let이 추가되었습니다. 그렇다면 왜 추가되었을까요? 자바스크립트의 사용 범위가 넓어지면서(백엔드, 게임 등) 안정적인 프로그래밍 언어로써의 기능이 요구되었기 때문입니다.

왜 var가 불안정한가?(호이스팅, TDZ)

그런데 왜 안정적인 프로그래밍을 위해 let과 const가 등장했을까? 그것은 바로 var의 특성 때문이다. 혹자는 '그럼 그냥 var를 안정적으로 만들면 안되는건가?'라고 반문할 수 있다. 그러나 이미 서비스되고 있는 웹 중에서는 var를 사용해 개발한 서비스들도 많이 있다. 그렇기에 javascript는 기존 변수의 기능 변경 대신 변수 문법 추가를 택한 것이다.

그럼 무엇이 문제였을까? 바로 호이스팅과 TDZ문제 때문이라고 할 수 있다. 호이스팅은 영어 단어 뜻으로 보자면 '끌어올리는' 정도로 볼 수 있다. 즉 변수를 끌어올리는 동작원리를 말하는 것인데 아래 예시를 살펴보며 이야기 해보자.

// var name; <- 아래에서 선언한 변수도 컴파일 과정에서 '호이스팅' 됨.

console.log(name) // undefined를 반환.

var name = "stephan";

위에서 볼 수 있다시피 코드 아랫줄에서 선언한 변수도 컴파일 과정에서 최상단으로 올라가는 것을 볼 수 있다. 다음 코드도 알아보자.

// let color; <- 컴파일 과정에서 호이스팅이 일어남.

console.log(color) // error

let color = "black";

둘 다 똑같이 호이스팅이 일어나는데 왜 let만 에러가 날까? 그 원인은 바로 호이스팅 시 선언만 되느냐 초기화까지 되느냐의 차이이다. let은 값을 할당할 때 초기화가 되고 var는 선언할 때 기본적으로 undefined로 초기화가 된다. 그런데 아직 우리가 알아보지 않은 const가 있다. const는 선언, 초기화, 할당이 한 번에 일어나야만 한다. 자바스크립트에서 상수 역할을 하고 있으니 당연한 셈인 것이다.

TDZ

temporal dead zone은 무엇이고 왜 필요할까?

• 이것 또한 마찬가지로 안정성을 위해 생겨나게 된 개념이다. 아까 코드에서 보았던 것처럼 값이 초기화 되기 전에 변수를 참조하면 생기는 에러가 이 TDZ가 일을 하고 있기 때문이다.

  스코프 차이

  var, const, let은 사실 범위 차이가 있다. var는 함수 범위로 사용되고 const, let은 블록 범위로 사용된다.