[JavaScript] 변수 생성 방법(var vs const, let), 호이스팅 , 변수 네이밍 컨벤션

log의 위치, 변수 키워드가 다른 것뿐인데 왜 결과가 다를까?

var a;
var b = 1;
const c = 2;

console.log(a);
console.log(b);
console.log(c);

>> undefined

1

2

console.log(a);
console.log(b);
console.log(c);

var a;
var b = 1;
const c = 2;

>> ReferenceError : Cannot access 'c' before initialization

undefined

undefined

 

3단계를 거쳐 생성되는 변수

1️⃣ 선언 단계 : 변수를 변수 객체에 등록

2️⃣ 초기화 단계 : 변수를 메모리에 할당하고, undefined로 초기화 (초기화되지 않았을 경우 접근 아예 불가!)

3️⃣ 할당 단계 : undefined로 초기화된 변수에 실제로 값 할당

 

여기서 키워드별로 다르게 동작합니다. (var, const, let)

 

구분	var	let	const
재선언	가능 (위험함)	불가능	불가능
재할당	가능	가능	불가능 (상수)
스코프	함수 레벨 스코프	블록 레벨 스코프	블록 레벨 스코프
호이스팅	선언+초기화(undefined)	선언만 (TDZ 발생)	선언만 (TDZ 발생)
단점	- 키워드 생략 가능 (할당, 재할당 모습 달라 혼란) - 중복 선언 가능 (처음 목적과 달리) - 변수 호이스팅 (실행순서와 무관) - 전역변수화 (무분별한 변수 접근)

호이스팅

- var 

: 코드 평가(코드 선언 + undefined 초기화) -> 코드 실행(값 할당 진행)

=> 코드 평가시점에 초기화 되어있으므로, 변수의 할당문이 실행되기도 전에 참조가 가능합니다. (호이스팅)

 

- let, const

: 코드 평가(코드 선언) -> 코드 실행(undefined 초기화 + 값 할당)

=> 선언문 이전에 접근하려고 하면 ReferenceError가 발생합니다. 이 구간을 TDZ(Temporal Dead Zone)라고 부릅니다.

 

breaking point 따라 

var은 이미 초기화가 되어있으므로 undefined

var이 할당되어 1

const 할당이 되어 2

c는 초기화까지만 진행되어 undefined로 마무리됩니다. 

스코프 (Scope)

- 함수 레벨 스코프 (var)
: 함수 내부에서 선언된 변수만 지역 변수로 인정합니다. if문이나 for문 안에서 만든 변수도 밖에서 접근할 수 있어 의도치 않은 버그를 만듭니다.

- 블록 레벨 스코프 (let, const)
: 모든 코드 블록(함수, if문, for문, while문 등) 내에서 선언된 변수는 해당 블록 내에서만 유효합니다. 현대 프로그래밍 언어의 일반적인 방식입니다.

 

중복 선언과 재할당

- var: 똑같은 이름의 변수를 또 선언해도 에러가 나지 않습니다. 코드가 길어지면 실수로 기존 변수를 덮어쓸 위험이 큽니다.

- let: 중복 선언 시 에러가 발생하여 실수를 방지합니다. 값은 언제든 바꿀 수(재할당) 있습니다.

- const: 한 번 값을 넣으면 바꿀 수 없습니다. 선언과 동시에 초기화가 반드시 필요합니다.

 

 

---

🤔 💡실무에서는?

• 기본적으로 const를 사용 -> 값이 변하지 않는 것이 보장되면 코드를 읽기 쉽고 안전해집니다.
• 재할당이 필요한 경우에만 let을 사용 (예: 반복문의 카운터, 토글 상태값 등)
• var는 절대로 사용하지 말 것. -> 예측 불가능한 결과를 초래할 수 있습니다.

 

---

변수 네이밍 컨벤션

• Camel Case : getNumber
• Snake Case : get_number
• Pascal Case : GetNumber
• Constant Case : GET_NUMBER (상수에서만 사용)