자바스크립트에는 변수를 선언하는 방법이 세 가지 있어요: const, let, var. 각 방법이 선언된 위치나 스코프, 값의 변경 가능성 등에 따라 다른 특성을 지니기 때문에, 상황에 맞게 적절히 사용하는 게 중요합니다.
const: 변하지 않는 상수 선언
const는 값을 고정해 놓을 때 사용하는 선언이에요. 한 번 선언한 뒤에는 값을 바꿀 수 없기 때문에, 상수처럼 쓸 수 있는 값에 적합합니다.
const name = "John";
name = "Doe"; // ❌ Error! 재할당 불가
const의 주요 특징
• 재할당 불가: 선언된 값을 다시 바꿀 수 없습니다. 고정된 값으로 사용해야 해요.
• 블록 스코프: const로 선언된 변수는 선언된 블록 {} 내에서만 유효해요. 함수, 조건문, 반복문 등에서 사용할 때 코드 블록 안에서만 접근할 수 있어요.
• 참조형 데이터 재할당 주의: 배열이나 객체를 const로 선언할 경우, 내부 요소는 변경할 수 있지만 변수 자체를 다시 할당할 수는 없어요.
const arr = [1, 2, 3];
arr.push(4); // ✅ 가능. 배열 요소는 변경 가능
arr = [5, 6, 7]; // ❌ Error! 전체 재할당 불가
let: 블록 스코프를 가진 변수 선언
let은 변경 가능한 값을 선언할 때 사용해요. 선언한 후 언제든지 값을 바꿀 수 있어서 동적으로 변하는 값을 담기 좋습니다.
let count = 1;
count = 2; // ✅ 재할당 가능
let의 주요 특징
• 재할당 가능: 선언 이후에 값을 변경할 수 있어, 값이 변할 수 있는 변수를 선언할 때 유용합니다.
• 블록 스코프: let은 const와 마찬가지로 블록 스코프를 따릅니다. 선언된 블록 {} 내에서만 유효하죠.
if (true) {
let message = "Hello!";
console.log(message); // ✅ "Hello!"
}
console.log(message); // ❌ Error! 블록 밖에서 접근 불가
var: 함수 스코프와 호이스팅을 가진 구식 선언
var는 자바스크립트에서 가장 오래된 변수 선언 방식으로, ES6가 등장하기 전까지 주로 사용됐어요. 하지만 호이스팅과 함수 스코프라는 특성 때문에 오류를 일으킬 수 있어, 지금은 let이나 const가 더 선호됩니다.
var color = "red";
color = "blue"; // ✅ 재할당 가능
var의 주요 특징
• 함수 스코프: var로 선언된 변수는 함수 내에서만 유효합니다. 블록 {} 내부에서 선언해도, 함수 바깥에서 접근 가능할 수 있어요.
• 호이스팅: var는 선언이 끌어올려지기 때문에, 선언하기 전에도 사용이 가능해요. 다만, 초기화는 나중에 이뤄지므로 undefined로 평가될 수 있어요.
console.log(value); // ✅ undefined
var value = 5;
• 재선언 가능: var는 같은 이름의 변수를 재선언할 수 있어요. 이를 통해 의도치 않은 변수 덮어쓰기가 발생할 수 있습니다.
const, let, var 차이 정리
특성 | const | let | var |
재할당 가능 여부 | ❌ 재할당 불가 | ✅ 재할당 가능 | ✅ 재할당 가능 |
스코프 | 블록 스코프 | 블록 스코프 | 함수 스코프 |
호이스팅 | ❌ 호이스팅 X | ❌ 호이스팅 X | ✅ 선언은 호이스팅 O |
재선언 가능 여부 | ❌ 재선언 불가 | ❌ 재선언 불가 | ✅ 재선언 가능 |
언제 어떤 선언을 써야 할까?

• 값이 절대 변하지 않는다면 const를 사용해요. 예를 들어 상수처럼 쓰이는 값들.
• 값이 변할 가능성이 있다면 let을 사용해요. 반복문이나 동적으로 변하는 값을 다룰 때 유용하죠.
• var는 가급적 사용하지 않는 것이 좋습니다. 스코프 문제와 호이스팅 때문에 예기치 않은 오류가 발생할 수 있어요.
이렇게 const, let, var의 특성을 잘 이해해 두면 자바스크립트 코드를 더 안전하게 작성할 수 있어요!
'Front-end > Javascript' 카테고리의 다른 글
콜백 함수: 자바스크립트의 비밀 병기 🕵️♀️✨ (1) | 2024.11.30 |
---|---|
자바스크립트의 비구조화 할당: 데이터를 다루는 예술 🌟 (3) | 2024.11.20 |
[자바스크립트] 화살표 함수, 뭐가 그렇게 특별할까? 🎯 (3) | 2024.11.18 |
Javascript에서 undefined와 맞짱뜨는 법 (0) | 2024.09.23 |
자바스크립트: 클라이언트부터 서버까지 다 해먹을 수 있는 이유🍀 (0) | 2024.06.17 |