개요
JavaScript, TypeScript의 동작 특성 중 하나로 변수와 함수 선언이 실제 코드 실행 전에 위로 끌어올려지는 것처럼 동작하는 현상을 의미한다.
자바스크립트 엔진이 코드를 해석할 때, 코드의 선언 부분(변수 선언부, 함수 선언부)만을 먼저 처리하여 해당 블록 또는 스코프의 맨 위에 위치한 것처럼 동작한다.
console.log(x); // undefined
var x = 10;
// 위 코드는 사실상 아래처럼 동작한다.
var x;
console.log(x); // undefined
x = 10;
TypeScript
복사
함수 스코프와 블록 스코프
스코프란?
자바스크립트에서 스코프란 변수가 어디서 유효한지, 즉 어디서 접근 가능한지를 결정하는 규칙 이다.
함수 스코프
•
오직 함수 안에서만 새 스코프를 생성한다.
•
if, for, while, {} 같은 블록 안에서는 스코프가 나뉘어지지 않는다.
•
var 키워드로 선언된 변수는 함수 스코프를 따른다.
블록 스코프
•
if, for, while, {} , 함수 등 어떤 블록에서도 독립적인 스코프를 생성한다.
•
let, const 는 모든 중괄호 {} 블록을 스코프로 인식한다.
function test() {
let a = 10;
if (true) {
let b = 20;
console.log(a); // ✅ 10
console.log(b); // ✅ 20
}
console.log(a); // ✅ 10
console.log(b); // ❌ ReferenceError
}
JavaScript
복사
var, let, const의 호이스팅 차이
js, ts에는 변수 선언을 var, let, const 키워드를 사용해 변수를 선언할 수 있으며, 각각 호이스팅 동작이 다르다.
1. var 호이스팅
•
var로 선언된 변수는 스코프의 최상단으로 호이스팅된다.
•
호이스팅으로 인해 변수는 undefined로 초기화된 상태가 된다.
•
TDZ 존재 여부 없음.
◦
TDZ: 변수가 초기화되기 전까지 존재하지만 접근할 수 없는 영역
•
블록 스코프가 아닌 함수 스코프를 가진다.
function test() {
var a = 10;
if (true) {
var b = 20;
}
console.log(a); // ✅ 10
console.log(b); // ✅ 20 ← 블록 밖에서도 접근 가능!
}
test();
// 함수 스코프 밖
console.log(a); // ❌ ReferenceError
JavaScript
복사
위에서 본 듯이 b는 if문 안의 스코프(블록 스코프)에서 생성되었지만 test() 스코프 (함수 스코프)에서 접근이 가능하다.
2. let, const 호이스팅
•
let과 const는 선언은 스코프내 최상단으로 끌어올려지지만 var와 다르게 TDZ에 할당되기 때문에 초기화하기 전까진 접근 불가다.
console.log(c); // ❌ ReferenceError
const c = 15;
const d; // ❌ SyntaxError: Missing initializer in const declaration
d = 20;
JavaScript
복사
var, let, const 변수 정리
특징 | var | let | const |
스코프 | 함수 스코프 | 블록 스코프 | 블록 스코프 |
선언 호이스팅 | O | O | O |
초기화 시점 | undefined | 선언 지점 이후 | 선언 지점 이후 |
선언 전 접근 | 가능 (undefined) |  ReferenceError | ReferenceError |
TDZ 존재 | 없음 | 있음 | 있음 |
재할당 가능 | 가능 | 가능 | 불가능 |
