[JavaScript 기본] 변수와 상수 정리

React 공부할 때 꼭 알아야 할 기본 문법이 바로 변수(variable) 와 상수(constant) 임.
두 개념은 "값을 저장하는 공간"이라는 점은 같지만, 값을 바꿀 수 있느냐 없느냐가 핵심 차이임

---

1. 변수 (Variable)

• 계속해서 값이 바뀔 수 있는 저장소

선언 방법

let age = 28; // 선언과 동시에 초기화
console.log(age);

let name; // 선언만 함
name = "도서"; // 나중에 값 대입

 

특징

• `let`은 블록 스코프(block scope)를 가짐 -> `{}` 중괄호 안에서만 유효
• 같은 이름으로 중복 선언 불가
• 나중에 값 변경 가능

let city = "Seoul";
city = "Busan"; // 가능

---

2. 상수 (Constant)

• 선언 이후 값을 변경할 수 없는 저장소

선언 방법

const birth = "1998.02.07"; // 반드시 초기화 필요
// const birth; -> 초기화 없이 선언 불가!

 

특징

• 값 재할당 불가능
• 불변성은 값이 아닌 "참조"에만 적용됨 (객체나 배열의 내부 값은 바꿀 수 있음!)

const person = { name: "도서", age: 28 };
person.age = 29; // 가능! -> 객체 내부 프로퍼티 수정

즉, `const`는 "변수 자체의 참조"를 바꿀 수 없을 뿐 그 내부 내용까지 막는건 아님.

---

3. `var`, `let`, `const` 차이점

• `let`과 `const`가 생기면서 대부분 `var`는 사용하지 않음.

구분	재선언	재할당	스코프	호이스팅	비고
`var`	가능	가능	함수 스코프	됨 (초기화 없이)	사용 지양
`let`	불가	가능	블록 스코프	됨 (TDZ 존재)	자주 사용
`const`	불가	불가	블록 스코프	됨 (TDZ 존재)	기본 선택

 

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

// 위 코드를 아래처럼 처리함

var a; // 선언이 위로 올라감 (호이스팅)
console.log(a); // 아직 값 안 넣었으니까 undefined
a = 10; // 이제 값 할당
console.log(a); // 10

• a라는 공간은 이미 존재함. 다만 비어있어서 undefined됨
• 이후에 var a = 10으로 값을 10을 넣으면 다음에 10이 출력됨
• 결론은 참조할 공간은 존재하지만 값이 비어있던 상태

console.log(b); // ?
let b = 10;
console.log(b);

// (메모리에 b는 만들어지지만)
// 아직 초기화되지 않은 'TDZ(일시적 사각지대)' 상태

console.log(b); // ReferenceError
let b = 10; // 여기서 비로소 초기화됨
console.log(b); // 10

• `b`라는 공간은 이미 존재함.
• 자바스크립트는 "초기화 전에는 접근 금지"시킴 -> TDZ
• 그래서 `console.log(b)`가 그 구역 안에서 실행되면 에러가 남
• 결론은 참조할 공간은 이미 있지만, 아직 쓸 수 없는 상태.(초기화가 지연되어서)

TDZ(Temporal Dead Zone)란?

• 변수가 선언되기 전에는 접근할 수 없는 영역.
• `let`, `const`는 TDZ 때문에 안전한 코드 작성이 가능!

---

4. 네이밍 규칙

let $name;
let name1;
let _2name;

// 불가능한 목록
let 1name;
let if;

• `$`, `_` 외 기호 사용 불가
• 숫자로 시작 불가
• 예약어(`if`, `for`, `return`등) 사용 불가

---

5. 좋은 변수명 짓기

• 좋은 변수명은 코드 품질의 핵심
• 짧은 이름보다 의미를 명확히 전달하는 것이 중요!

// 나쁜 예시
let a = 1;
let b = 1;
let c = a - b;

// 좋은 예시
let salesCount = 1;
let refundCount = 1;
let totalSalesCount = salesCount - refundCount;

• 의미 있는 단어 사용
• camelCase 권장
• 줄임말보다 명확한 단어 사용

---

마무리 요약

• 변수는 "바뀔 수 있는 값"
• 상수는 "한 번 정하면 바뀌지 않는 값"
• 실무에서는 기본적으로` const`, 바꿔야할 때는 `let`을 사용