[개발일지] 4일차 - var와 let/const, TDZ
오늘 한 일
- 회원가입 번호인증 카운트다운 문제 수정
- 기본 브라우저 접속 외 결제 막기
TIL
var
와 let/const
의 차이
- TDZ에 대해
var 와 let/const
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
Author And Source
이 문제에 관하여([개발일지] 4일차 - var와 let/const, TDZ), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@grefer/개발일지-4일차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)