[JavaScript] 자바스크립트에서 변수 선언의 발전: var, let, 그리고 const

과거에는 자바스크립트에서 변수를 선언할 때 var만 사용할 수 있었다. 그런데 ES6(2015)부터 let이랑 const가 등장했다. 이 두 가지 덕분에 요즘은 더 안전하고 예측 가능한 코드를 작성할 수 있다. 그럼 var, let, const가 어떻게 다르고, 왜 let이랑 const를 쓰는 게 좋은지 살펴보자. 

 

var의 특징과 문제점

---

var는 옛날부터 쓰이던 변수 선언 방법이다. 근데 몇 가지 문제점이 있다.

• 함수 스코프(Function Scope):
  var로 선언한 변수는 함수 안에서만 유효하다. 블록 {} 안에서 선언해도, 그 블록을 벗어나 접근할 수 있다. 보이지 않아야 할 값이 보이는 상황도 생긴다.

if (true) {
    var x = 10;
}
console.log(x); // 10

• 재선언 가능:
  똑같은 이름으로 변수를 다시 선언할 수 있다. 이러면 코드의 가독성이 떨어진다. 

var name = "Alice"; var name = "Bob"; // 에러 없음 console.log(name); // "Bob"

• 호이스팅(Hoisting):
  var로 선언한 변수는 선언 위치와 상관없이 코드 맨 위로 끌어올려진다. 값 없이 undefined로 초기화된다.

console.log(age); // undefined var age = 25;

 

 

let과 const의 등장

---

ES6부터 나온 let과 const는 위에 있는 문제를 해결해준다.

let: 변할 수 있는 값을 선언할 때

let은 재할당 가능한 변수를 선언할 때 사용한다. 대신 var랑 다르게 블록 스코프(Block Scope)를 따른다.

let age = 25; age = 30; // OK console.log(age); // 30

const: 변하지 않는 값을 선언할 때

const는 딱 한 번만 값을 할당할 수 있는 상수를 선언한다. 값이 바뀌면 안 되는 데이터는 무조건 const로 선언하는 게 좋다.

const taxRate = 0.1; taxRate = 0.2; // 에러 발생

 

 

var와 let, const 비교

---

 

아래 두 코드를 보자.

예제 1

var taxRate = 0.1; 
var total = 100 + (100 * taxRate); 
console.log(`구매 금액은 ${total}입니다.`);

 

예제 2

const taxRate = 0.1; // 재할당 불가
const shipping = 5.00; // 변하지 않는 값
let total = 100 + (100 * taxRate) + shipping; // 재할당 가능

console.log(`구매 금액은 ${total}입니다.`);

 

첫 번째 코드는 var로 선언했기 때문에 어떤 값이 들어가게 될지 예측하기 어렵다. 반면, 두 번째 코드에서 const를 사용하면 taxRate랑 shipping이 변하지 않는다는 사실을 확실히 알 수 있다.

또한 let을 사용한 total 변수는 재할당이 가능해서 유연하게 사용할 수 있다. 필요한 곳에서만 값이 바뀌게 설계된 코드라 더 안전하고 명확하다.

---

결론: 왜 let과 const를 써야 할까?

• 코드 가독성 향상: 값이 변할지, 안 변할지 바로 알 수 있다.
• 스코프 관리 용이: 블록 스코프를 따라 예측 가능한 코드 작성이 가능하다.
• 재선언 방지: 똑같은 변수 이름으로 선언해서 생기는 오류를 막아준다.

결론은 간단하다. 변하지 않는 값에는 const, 변할 수 있는 값에는 let을 쓰면 된다.
var는 이제 쓸 이유가 거의 없다. let과 const로 깔끔한 코드를 작성하자.