[JavaScript] let, var, const와 호이스팅

 
JavaScript를 배우다 보면 let, var, const와 호이스팅(Hoisting) 개념은 중요한 주제입니다.
이 글에서는 스코프(Scope)와 특성을 중심으로 차이점을 설명하고, 호이스팅이 어떤 영향을 미치는지 다뤄보겠습니다.

 

함께 읽으면 좋은 포스팅 ▼ ▼ ▼

[JavaScript] 변수

 

---

 

1. var, let, const의 기본 개념

JavaScript에서 변수를 선언할 때 사용하는 세 가지 키워드는 다음과 같습니다.

• var: ES6 이전에 사용되던 변수 선언 키워드.
• let: ES6에서 도입된 블록 스코프(Block Scope)를 가진 변수 선언.
• const: ES6에서 도입된 상수(Constant) 선언. 변경 불가능한 값을 저장.

---

2. 스코프(Scope)의 차이점

(1) var의 스코프

• var는 함수 스코프(Function Scope)를 가집니다.
• 함수 내부에서 선언된 var 변수는 함수가 끝날 때까지 접근 가능합니다.
• 함수 외부에서는 전역 변수처럼 동작합니다.
• 블록 레벨 스코프(Block Scope)를 무시합니다.

if (true) {
  var x = 10;
}
console.log(x); // 10 (블록 밖에서도 접근 가능)

 
(2) let의 스코프

• let은 블록 스코프(Block Scope)를 가집니다.
• 블록({}) 내부에서만 유효하며, 블록 외부에서는 접근할 수 없습니다.
• let으로 선언한 변수는 동일한 블록 내에서 재선언이 불가능합니다.

if (true) {
  let y = 20;
}
console.log(y); // ReferenceError: y is not defined

 

(3) const의 스코프

• const도 블록 스코프(Block Scope)를 가집니다.
• 상수로 선언된 값은 재할당할 수 없습니다. 그러나, 객체나 배열의 내부 속성은 변경할 수 있습니다.

 

const z = 30;
z = 40; // TypeError: Assignment to constant variable

const obj = { key: "value" };
obj.key = "newValue"; // 객체의 속성은 변경 가능

 

---

3. Hoisting(호이스팅)이란?

호이스팅(Hoisting)은 JavaScript가 실행되기 전에 변수 선언과 함수 선언을 스코프의 최상단으로 끌어올리는 동작을 의미합니다.

 
호이스팅의 특징

• 변수 선언만 끌어올려지고, 값 할당은 끌어올려지지 않습니다.
• var는 호이스팅에 영향을 받지만, let과 const는 호이스팅 이후 Temporal Dead Zone(TDZ)의 영향을 받습니다.

---

4. var, let, const와 Hoisting

(1) var의 호이스팅

var로 선언된 변수는 스코프의 최상단으로 끌어올려지며, 초기값은 undefined로 설정됩니다.

console.log(a); // undefined (변수 선언이 호이스팅됨)
var a = 10;
console.log(a); // 10

 
(2) let과 const의 호이스팅

let과 const도 호이스팅은 되지만, TDZ(Temporal Dead Zone)에 의해 변수를 사용하기 전까지는 접근할 수 없습니다.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 30;

 

---

5. Temporal Dead Zone(TDZ)

• TDZ(일시적 사각지대)는 변수 선언 이전에 해당 변수에 접근할 수 없는 영역입니다.
• let과 const는 선언 전에 변수에 접근하려 하면 ReferenceError가 발생합니다.

{
  console.log(x); // ReferenceError
  let x = 10; // 선언 이후에만 접근 가능
}

---

6. 변수 키워드 비교표

키워드	스코프	호이스팅	초기화값	재선언	재할당
var	함수 스코프	지원	undefined	가능	가능
let	블록 스코프	지원 (TDZ)	없음	불가능	가능
const	블록 스코프	지원 (TDZ)	없음	불가능	불가능

---

7. 실무에서의 권장 사항

• const 기본 사용: 변경되지 않는 값을 선언할 때는 const를 사용하세요.
• let은 필요한 경우만 사용: 재할당이 필요한 경우에만 let을 사용합니다.
• var는 사용하지 않기: 함수 스코프와 호이스팅 문제로 인해 예기치 않은 오류를 방지하려면 var를 피하는 것이 좋습니다.

 

---

요약

 
JavaScript에서 let, var, const의 올바른 사용과 호이스팅 개념을 이해하면
더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있습니다!
 
let과 const는 블록 스코프를 지원하고, TDZ로 인해 선언 전에 접근하는 실수를 방지합니다.
var는 과거의 유물로 간주되며, 새로운 코드에서는 사용하지 않는 것이 권장됩니다 : )
 

 
 

~ 오류나 보완할 점에 대한 조언과 응원은 언제나 감사합니다! ~