var drink = 'coke';
console.log(drink); // coke
var drink = 'pepsi';
console.log(drink); // pepsi
console.log(drink); // undefined
var drink = 'pepsi';
이유는 var는 아래와 같이 변수선언이 위로 끌어올려진다.호이스팅 (hoisting)
JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.
즉, 함수와 변수 선언부분이 코드 최상단부분으로 올라간다고 이해하면 된다.
다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의하세요.
var drink;
console.log(drink); // undefined
var drink = 'pepsi';
const a = 30;
if (a ===30) {
var i = 1;
}
console.log(i); //사용 가능
하지만 함수 내에서 선언한 var변수는 블록 밖에서 사용이 불가능하다.function add(a, b) {
var i = a+b;
}
add(1,3);
console.log(i); //사용 불가능
let drink = 'coke';
console.log(drink); // coke
let drink = 'pepsi'; // redeclaration error (재선언 에러)
console.log(drink);
console.log(drink); // Reference error
let drink = 'pepsi';
let은 호이스팅이 되어 선언부분이 최상단으로 끌어올려지지만 TDZ(Temporal Dead Zone)에 들어간다. 변수 스코프의 맨 위에서 변수의 초기화 완료 시점까지의 변수는 "시간상 사각지대"(Temporal Dead Zone, TDZ)에 들어간 변수라고 표현한다.const a = 30;
if (a === 30) {
let i = 1;
}
console.log(i); // 에러
블록 영역 스코프: 함수, if문, for문, while문, try/catch 등등const drink = 'coke';
console.log(drink); // coke
const drink = 'pepsi'; // redeclaration error (재선언 에러)
const는 선언과 동시에 할당을 해야한다.const drink;
drink = 'coke'; // 선언 에러
console.log(drink);
console.log(drink); // reference error
const drink = 'pepsi';
const a = 30;
if (a === 30) {
const i = 1;
}
console.log(i); // 에러
var | let | const | |
---|---|---|---|
변수의 생성과정 | 1. 선언 + 초기화 2.할당 | 1. 선언 2. 초기화 3.할당 | 1. 선언 + 초기화 + 할당 |
호이스팅 | 된다. | 되지만 변수사용은 불가능 | 되지만 변수사용은 불가능 |
스코프 | 함수 스코프(functional-scope) | 블록 스코프(block-scope) | 블록 스코프(block-scope) |