오늘 한 일

• 회원가입 번호인증 카운트다운 문제 수정
• 기본 브라우저 접속 외 결제 막기

TIL

• var와 let/const의 차이
• TDZ에 대해

var 와 let/const

그냥 var는 무조건 쓰면 안된다는 것 정도로만 알고 있었는데 오늘 그 정확한 차이에 대해서 한번 공부해 보았다.

변수 재선언 여부

• var의 경우 한번 사용한 변수를 재사용 가능
• 그러나 let/const의 경우 한번 사용한 변수를 재선언 하려고 하면 에러 발생

호이스팅 여부

호이스팅(hoisting)
자바스크립트는 함수 실행전 스크립트를 한번 쭉 훑은 다음 변수값들을 모아 유효범위(블록 스코프) 최상단에 선언하는데, 이를 호이스팅, hoisting이라 부른다.

var와 let/const 모두 호이스팅이 된다. 하지만 둘의 방식의 차이가 존재한다.
변수 선언에는 선언 -> 초기화 -> 할당의 3개의 단계를 거친다.

• var의 경우 스코프에 진입하면 undefined로 선언과(호이스팅) 동시에 초기화 된다.
• let/const의 경우 스코프에 진입하면 변수가 선언되고(호이스팅), 초기화문을 지나면 초기화된다. 이때, 할당되고 초기화 되기 전까지 TDZ에 머문다.

let/const는 호이스팅된다. 다만 TDZ에 존재하기 때문에 값을 읽어낼 수 없는 것이다. TDZ에 있는 let/const 변수에 접근하려 하면 ReferenceError를 낸다.

변수의 스코프

• var는 함수 범위를 가진다. 함수 내부에서만 지역변수의 기능을 한다.
• let/const는 블록 범위를 가진다. 블록 내부에서 선언한 변수는 지역 변수로만 사용이 가능하다.

if (true) {
  var a = 11;
  const b = 12;
}

function foo() {
  var c = 10;
  console.log(a);
}

function bar() {
  const d = 13;
  console.log(d);
}
 
foo(); // 10
bar(); // 13
console.log(a) // 11
console.log(b) // ReferenceError
console.log(c) // ReferenceError
console.log(d) // ReferenceError