var, let, const 변수 선언 방식

 

🟨 var (전통적인 변수 선언 방식)

ES6(2015) 이전부터 사용되던 변수 선언 방식이다.

유연하지만 여러 가지 문제점 때문에 현재 자바스크립트에서는 사용을 권장하지 않는다.

var name = "철수";
var name = "영희"; // 재선언 가능 (위험)

 

1️⃣ 함수 레벨 스코프

함수 내부에서 선언된 변수만 지역 변수로 취급된다.

if (true) {
    var age = 20;
}

console.log(age); // 20

• if, for 등의 블록 내부에서 선언해도 외부에서 접근 가능하다.

 

2️⃣ 재선언 가능

같은 스코프에서 동일한 이름의 변수를 다시 선언할 수 있다.

var score = 100;
var score = 90; // 가능

• 의도하지 않은 값 변경 위험이 있다.

 

3️⃣ 호이스팅 발생

변수 선언 부분만 스코프 최상단으로 끌어올려진 것처럼 동작하며, 값의 할당은 원래 위치에서 실행된다.

console.log(value); // undefined

var value = 10;

• 선언 전 접근 시 undefined가 반환된다.

 

4️⃣ 전역 객체(window) 오염

브라우저 환경에서 전역 변수로 선언하면 window 객체의 속성이 되어, 의도치 않게 브라우저 기본 내장 기능을 덮어쓸 위험이 있다.

var 변수 = "안녕";
console.log(window.변수); // "안녕"

 

🟨 let (재할당이 가능한 현대적 변수)

ES6에서 추가된 변수 선언 방식이다. 값을 변경해야 하는 변수에 사용한다.

let score = 100;
score = 90; // 재할당 가능

 

1️⃣ 블록 레벨 스코프

{ } 블록 내부에서만 접근 가능하다.

if (true) {
    let age = 20;
}

// console.log(age); // 에러

 

2️⃣ 재할당 가능

선언 후 값을 변경할 수 있다.

let count = 1;

count = 2; // 가능

 

3️⃣ 재선언 불가능

같은 스코프에서 동일한 이름으로 다시 선언할 수 없어 안전하다.

let name = "철수";

// let name = "영희"; // 에러

 

4️⃣ 호이스팅 발생 (TDZ)

호이스팅은 발생하지만 선언과 초기화 사이의 TDZ 때문에 선언 이전 접근이 불가능하다.

console.log(score); // ReferenceError

let score = 100;

• 선언과 초기화 사이의 영역을 TDZ(Temporal Dead Zone)라고 한다.

 

🟨 const (값이 변하지 않는 상수)

ES6에서 추가된 상수 선언 방식이다. 값이 변경되지 않는 변수에 사용한다.

const PI = 3.14;

 

1️⃣ 블록 레벨 스코프

let과 동일하게 { } 내부에서만 접근 가능하다.

 

2️⃣ 재할당 불가능

선언 후 새로운 값을 할당할 수 없다.

const age = 20;

// age = 30; // 에러

 

3️⃣ 선언과 동시에 초기화 필요

// const name; // 에러

const name = "철수"; // 가능

 

4️⃣ 객체와 배열 내부 변경 가능

const는 변수 자체가 다른 값을 참조하도록 변경하는 것을 막는다.

const user = { name: "철수" };
user.name = "영희"; // 가능 (내부 속성 변경)

// user = { name: "민수" }; // 불가능 (참조값 자체 변경)

• 객체 내부 속성이나 배열 요소 변경은 가능하다.

 

5️⃣ 호이스팅 발생 (TDZ)

let과 마찬가지로 호이스팅은 발생하지만, TDZ의 영향을 받아 선언 전에 접근하면 에러가 발생한다.

console.log(MAX_NUM); // ReferenceError
const MAX_NUM = 100;

 

 

📍 POINT 📍

✔️ 프로그램의 안전성을 위해 기본적으로 const를 사용한다. ✔️

✔️ 값 변경이 필요한 경우에만 let을 사용한다. ✔️

✔️ var는 현대 자바스크립트 프로그래밍에서는 더 이상 권장되지 않는다. ✔️

 

 

📋 var, let, const 비교표 📋

특징	var	let	const
스코프	함수 레벨	블록 레벨	블록 레벨
재할당	가능	가능	불가능
재선언	가능	불가능	불가능
호이스팅	발생 (undefined)	발생 (TDZ)	발생 (TDZ)
초기값 필요	아니오	아니오	예
사용 권장도	사용 지양	값 변경 시 사용	기본 사용