JavaScript 기초 <2. 변수와 상수의 차이 (var, let, const)>

자바스크립트 JavaScript

2. 변수와 상수의 차이 (var, let, const) 

 

안녕하세요! 태마입니다.

JavaScript 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

자바스크립트 JavaScript

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. 변수(Variable)란?

변수란 데이터를 저장할 수 있는 공간을 의미합니다.
JavaScript에서는 변수를 선언할 때 var, let, const 세 가지 방법을 사용할 수 있습니다.

var name = "Alice";  // 예전 방식
let age = 25;        // 최신 방식
const PI = 3.1415;   // 변하지 않는 값

📌 변수란? 데이터를 저장하고 변경할 수 있는 상자!

---

 

2. var, let, const의 차이점

세 가지 변수 선언 방식의 가장 큰 차이는 재할당 가능 여부, 범위(Scope), 호이스팅(Hoisting) 입니다.

키워드재할당 가능 여부스코프(Scope)호이스팅(Hoisting)

var	✅ 가능	함수 스코프(Function Scope)	✅ 끌어올려짐 (초기화 X)
let	✅ 가능	블록 스코프(Block Scope)	✅ 끌어올려짐 (초기화 X)
const	❌ 불가능	블록 스코프(Block Scope)	✅ 끌어올려짐 (초기화 X)

📌 간단하게 정리하면?
✔ var → 사용하지 않는 것이 좋음! (호이스팅 문제 발생)
✔ let → 일반적인 변수 선언에 사용
✔ const → 변하지 않는 값을 저장할 때 사용

---

 

3. let과 const를 사용해야 하는 이유

과거에는 var만 존재했지만, ES6(2015년) 이후 let과 const가 도입되었습니다.
그 이유는 var가 여러 문제를 야기했기 때문입니다.

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

반면, let과 const는 블록 스코프를 가지므로, 같은 코드에서도 오류가 발생합니다.

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

📌 var는 사용하지 말자! 블록 스코프가 없는 예전 방식!

---

 

✅ 여기까지 JavaScript의 변수와 상수 개념, var, let, const의 차이를 배웠습니다!
👉 "그렇다면, 호이스팅(Hoisting)과 TDZ(Temporal Dead Zone)는 무엇이고, 왜 중요한가?"
✅ 2부에서 var의 문제점, let과 const의 동작 방식, 성능 차이까지 상세히 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

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

호이스팅(Hoisting)이란 JavaScript에서 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 것을 의미합니다.
하지만, var, let, const는 호이스팅되는 방식이 다릅니다.

✅ var의 호이스팅 문제

console.log(a);  // undefined (오류 아님!)
var a = 10;
console.log(a);  // 10

📌 var는 호이스팅될 때 "변수 선언"만 올라가고, "초기화"는 나중에 이루어짐!

반면, let과 const는 다음과 같이 동작합니다.

✅ let과 const의 호이스팅

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

📌 let과 const도 호이스팅되지만, 초기화 전에는 접근할 수 없음!

---

 

2. TDZ(Temporal Dead Zone)란?

let과 const는 **선언되기 전까지 접근할 수 없는 영역(TDZ, Temporal Dead Zone)**이 존재합니다.

console.log(x); // ReferenceError
let x = 5;
console.log(x);

✅ TDZ란? 변수가 선언되었지만, 아직 초기화되지 않은 상태에서 접근할 수 없는 영역!

📌 TDZ가 존재하는 이유? → var의 문제를 방지하고, 안전한 코드 실행을 보장하기 위해!

---

 

3. const는 정말로 변경할 수 없을까?

const로 선언한 변수는 재할당할 수 없지만, 객체(Object) 내부 값은 변경할 수 있습니다.

const person = { name: "Alice" };
person.name = "Bob";  // 가능!
console.log(person);  // { name: "Bob" }

📌 const는 객체 내부 값을 변경할 수 있음! 불변성을 유지하려면 Object.freeze() 사용!

---

 

4. 성능 차이? var vs let vs const

실제로 성능 차이는 크지 않지만, const가 가장 최적화된 방식으로 동작합니다.
👉 가급적이면 const를 사용하고, 필요할 때만 let을 사용하세요!

📌 변하지 않는 값은 const로 선언하면 코드 안정성이 높아짐!

---

✅ 지금까지 JavaScript의 변수 선언 방식, 호이스팅, TDZ, const의 특성을 상세히 배웠습니다!
👉 "그렇다면, JavaScript에서 데이터 타입은 어떻게 동작하며, 형 변환(Type Conversion)은 어떻게 이루어질까?"
✅ 다음 회차에서 JavaScript의 데이터 타입과 형 변환을 깊이 있게 배워봅시다! 🚀