#1 변수, 호이스팅, TDZ(Temporal Dead Zone)

var, let, const의 차이점

1. 중복 선언과 재할당
2. 스코프 범위
3. 호이스팅

중복 선언과 재할당

var

var a = 5; 
console.log(a); // 5

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

a = 15;
console.log(a); // 15

var 에서는 중복 선언과 재할당이 모두 가능하다.
마지막에 할당된 값이 최종으로 변수의 값으로 저장된다.

let

let a = 5;
let a = 10;
cnosole.log(a); // SyntaxError: Identifier 'a' has already been declared

let 에서는 중복 선언을 허용하지 않는다.
중복 선언을 할 경우 SyntaxError 가 발생하게 된다.

let a = 5;
console.log(a); // 5

a = 10;
console.log(a); // 10

재할당은 var 와 동일하게 가능하다.

const

const a = 5;
const a = 10;
cnosole.log(a); // SyntaxError: Identifier 'a' has already been declared

const 에서도 let 과 동일하게 중복 선언을 허용하지 않는다.

const a = 5;
console.log(a); // 5

a = 10;
console.log(a); // TypeError: Assignment to constant variable.

하지만 const 는 다른 변수들과 다르게 재할당도 불가능하다.
이유는 const 는 상수를 선언하는 키워드이기 때문이다.
처음 선언과 초기화를 하고 나면 다른 값을 재할당 할 수 없어진다.

스코프 범위

var

var 는 함수 단위 스코프(function-level scope)이다.

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

hello(); // 10

console.log(a);  //ReferenceError: a is not defined

var 변수가 선언된 함수 내부의 어디서든 참조가 가능하지만, 외부로는 참조가 불가능하다.
또한 함수 내부에서 선언된 var 는 지역변수로 간주하지만, 함수 외부에서 var 가 선언 되었다면 전역변수로 간주한다.

let, const

let 과 const 는 블록 단위 스코프(block-level scope)이다.

function hello() {
	let a = 5;
	console.log(a); // 5
}

console.log(a); // ReferenceError: a is not defined

{ } 블록 내부에서 선언된 let , const 변수는 외부에서 참조되지 않는다.

호이스팅

var

var 는 호이스팅이 발생한다.

console.log(a);  // undefined :: 변수 선언 이전에 변수 참조 가능

var a  // 초기화

console.log(a);  // undefined

a = 10  // 할당

console.log(a);  // 10

뒤에 선언된 변수 a 가 앞에 참조되었음에도 에러가 아닌 uedefined 가 호출된다.

let, const

let , const 는 호이스팅이 발생하지만, 다르게 작동한다.

console.log(a);  // ReferenceError :: 변수 선언 이전에 변수 참조 불가능

let a  // 초기화

console.log(a);  // undefined

a = 10  // 할당

consloe.log(a);  // 10

var 와는 다르게 뒤에 선언된 변수를 앞에서 참조하려 하니 에러가 발생한다.
호이스팅이 발생하지 않는 것처럼 보일 수 있는데, 이런 현상은 let , const 의 호이스팅 과정이 var 와는 다르게 진행되기 때문이다.

 

let , const 로 변수를 선언하는 경우에는, 변수의 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간인 TDZ(Temporal Dead Zone) 가 존재하기 때문에 벌어지는 현상이다.

호이스팅은 발생하지만, 값을 참조할 수 없기 때문에 동작하지 않는 것처럼 보인다.