[javascript/jQuery] var, let, const 차이와 사용법

 

자바스크립트에서 변수를 선언할 때 var, let, const를 사용할 수 있습니다. 하지만 각각의 차이를 제대로 이해하지 못하면 코드에서 예상치 못한 오류가 발생할 수 있습니다. 오늘은 이 세 가지 변수 선언 방식의 차이를 명확히 비교하고, 언제 어떤 방식을 사용해야 하는지 알려드리겠습니다.

---

var, let, const의 기본 개념

1️⃣ var

• ES6 이전부터 사용된 전통적인 변수 선언 방식입니다.
• 함수 스코프(Function Scope)를 가짐
• 변수 재선언이 가능
• 호이스팅(hoisting) 발생
• 예기치 않은 값 변경 위험이 있음

2️⃣ let

• ES6에서 도입된 변수 선언 방식
• 블록 스코프(Block Scope)를 가짐
• 변수 재선언 불가능하지만, 값 변경은 가능
• 호이스팅 발생하지만 초기화되지 않음 (Temporal Dead Zone 존재)

3️⃣ const

• 상수(Constant) 값을 선언할 때 사용
• 블록 스코프(Block Scope)를 가짐
• 변수 재선언 및 값 변경 불가능
• 객체나 배열의 속성 변경은 가능

---

var, let, const 비교 테이블

특징	var	let	const
스코프	함수 스코프	블록 스코프	블록 스코프
재선언	가능	불가능	불가능
값 변경	가능	가능	불가능 (객체/배열은 변경 가능)
호이스팅	O (초기화 undefined)	O (초기화 안됨)	O (초기화 안됨)
사용 권장	X (비추천)	O	O

---

var, let, const 예제 코드 및 실행 결과

1️⃣ var 사용 예제 (예기치 못한 동작 발생)

function exampleVar() {
    if (true) {
        var test = "Hello, var!";
    }
    console.log(test); // 정상 출력 (함수 스코프라서 접근 가능)
}
exampleVar();

결과: "Hello, var!" (블록 내부에서 선언했지만 함수 스코프를 따라 동작)

2️⃣ let 사용 예제 (올바른 블록 스코프 적용)

function exampleLet() {
    if (true) {
        let test = "Hello, let!";
    }
    console.log(test); // 오류 발생 (ReferenceError)
}
exampleLet();

결과: ReferenceError 발생 (블록 스코프 내부에서만 접근 가능)

let text = "hellow";
text = "Hi";
console.log(text); // "Hi"

결과: let로 선언한 변수의 경우 값 변경 가능

3️⃣ const 사용 예제 (값 변경 불가)

const PI = 3.14;
PI = 3.1415; // TypeError: Assignment to constant variable.

결과: TypeError 발생 (const는 값 변경 불가능)

const person = { name: "John" };
person.name = "Jane"; // 정상적으로 변경됨
console.log(person.name); // "Jane"

하지만 객체나 배열의 속성은 변경 가능합니다.

---

var, let, const 언제 사용할까?

변수를 선언할 때 가장 중요한 포인트는 해당 변수가 변경될 가능성이 있는가? 입니다.

 

1️⃣ const: 값이 변하지 않는 경우 const를 사용하세요. 실수로 값을 변경하는 오류를 방지할 수 있어 코드의 안정성이 높아집니다.

const MAX_USERS = 100; // 변하지 않는 값

2️⃣ let: 값이 변할 가능성이 있는 경우 let을 사용하세요. 예를 들어, 반복문에서 카운터를 증가시키거나, 사용자 입력값을 저장할 때 사용됩니다.

let count = 0;
count += 1; // 변경 가능

3️⃣ var: var는 함수 스코프를 가지며, 예기치 않은 값 변경이 발생할 수 있기 때문에 사용을 지양하는 것이 좋습니다. 최신 자바스크립트 코드에서는 거의 사용되지 않습니다.

var messag립트 코드에서는 거의 
var message = "World"; // 재선언 가능 (예기치 않은 동작 가능성)