자바스크립트 ES6(ECMAScript 2015) 이전에는 변수를 선언할 때 var만 사용했지만, ES6부터는 const와 let이 도입되면서 변수 선언 방식이 완전히 바뀌었습니다.
아직도 var를 쓰고 계신가요? 혹은 const와 let을 언제 써야 할지 헷갈리시나요?
이번 글에서는 세 가지 키워드의 차이점과 올바른 사용법을 정리해 보겠습니다. 💡
1. const (상수)
const는 Constant(상수)의 약자로, 말 그대로 ‘변하지 않는 값’을 선언할 때 사용합니다.
- 재할당(Reassignment): 불가능 ❌
- 재선언(Redeclaration): 불가능 ❌
- 특징: 선언과 동시에 반드시 초기값을 할당해야 합니다.
1
2
3
4
5
6
7
8
9
10
// 1. 선언과 동시에 할당 필수
const age; // SyntaxError: Missing initializer in const declaration (X)
const age = 21; // (O)
// 2. 재할당 불가능
const name = "독고진";
name = "구애정";
// 실행 결과
// TypeError: Assignment to constant variable.
Tip: 값이 바뀌지 않을 것이 확실하다면, 기본적으로 const를 사용하는 것이 안전합니다.
2. let (변수)
let은 값이 바뀔 수 있는 일반적인 변수를 선언할 때 사용합니다.
- 재할당: 가능 ⭕
- 재선언: 불가능 ❌
1
2
3
4
5
6
7
8
9
let name = "독고진";
console.log(name); // 독고진
// 값 변경(재할당) 가능
name = "구애정";
console.log(name); // 구애정
// 단, 이미 선언된 변수명을 다시 선언(재선언)하면 에러 발생
// let name = "필라인"; // SyntaxError
3. var (구형 변수 - 사용 지양)
const와 let이 나오기 이전에 사용되던 키워드입니다. 현재는 사용을 지양(Avoid)하는 추세입니다. 그 이유는 너무 유연해서 버그를 유발하기 쉽기 때문입니다.
- 재할당: 가능 ⭕
- 재선언: 가능 ⭕ (가장 큰 문제점)
1
2
3
4
5
6
7
8
9
10
var age = 28;
console.log(age); // 28
// 값 변경 가능
age = 18;
console.log(age); // 18
// 같은 이름으로 또 선언 가능 (재선언)
var age = "old";
console.log(age); // 'old' -> 에러 없이 덮어씌워짐!
위처럼 var는 같은 이름의 변수를 실수로 다시 선언해도 에러를 뱉지 않고 덮어씌워 버리기 때문에, 코드가 길어지면 심각한 오류를 초래할 수 있습니다.
요약 및 비교
한눈에 보기 쉽게 표로 정리해 드립니다.
| 키워드 | 재할당 | 재선언 | 스코프(Scope) | 권장 용도 |
|---|---|---|---|---|
| const | ❌ | ❌ | 블록 스코프 {} | 변하지 않는 값 (기본으로 사용) |
| let | ⭕ | ❌ | 블록 스코프 {} | 값이 변해야 하는 변수 |
| var | ⭕ | ⭕ | 함수 스코프 function | 사용하지 않음 |
마치며
모던 자바스크립트에서는 다음과 같은 규칙으로 코드를 작성하는 것이 좋습니다.
- 기본적으로
const를 사용한다. - 값이 변경될 여지가 있는 변수만
let으로 바꾼다. var는 절대 사용하지 않는다.
혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다! 👋