자바스크립트 변수 완벽 가이드: let, const, var 차이점 초간단 정리!

자바스크립트 변수, let vs const vs var? 초보를 위한 3가지 핵심 차이 완벽 정리!

🌱 💪 꽉 찬 알맹이만 골라 담았습니다.

  • `var`, `let`, `const`는 변수 선언 키워드이며, 각각 스코프, 재선언, 재할당 가능 여부에서 차이가 있습니다.
  • `let`과 `const`는 블록 스코프를 가지며, `var`는 함수 스코프를 가집니다. 이 차이가 예기치 않은 오류를 발생시킬 수 있습니다.
  • `const`는 재할당이 불가능하므로, 값이 변하지 않아야 하는 상수를 선언할 때 사용하면 코드의 안정성을 높일 수 있습니다.

최근 프론트엔드 개발 공부를 시작한 김**씨(25세, 대학생)는 자바스크립트 변수 선언 때문에 며칠째 머리를 싸매고 있었습니다. `var`, `let`, `const`… 분명 강의에서는 간단하게 설명해줬던 것 같은데, 막상 코드를 짜려고 하니 어떤 것을 써야 할지 도통 감이 오지 않았습니다. ‘분명 뭔가 중요한 차이가 있을 텐데, 그냥 대충 아무거나 쓰면 안 될 것 같고…’ 이런 고민, 저도 정말 많이 했었습니다. 특히 처음 JavaScript를 배울 때, 이 세 가지 변수 선언 방식 때문에 얼마나 헷갈렸는지 모릅니다. 지금은 명확하게 구분해서 사용하지만, 처음에는 저도 무작정 검색만 했던 기억이 납니다.

문제: `var`, `let`, `const`, 뭘 써야 할까요?

처음 자바스크립트를 배울 때 가장 흔하게 겪는 어려움 중 하나는 변수 선언 방식(`var`, `let`, `const`)을 제대로 이해하지 못하고 넘어가는 것입니다. “일단 되는대로 쓰면 되겠지” 하고 넘어갔다가 나중에 예상치 못한 오류 때문에 디버깅에 시간을 쏟는 경우가 허다합니다. 저 또한 그랬습니다. 간단한 토이 프로젝트를 할 때는 `var`로 대충 선언해도 별 문제가 없었지만, 규모가 조금만 커져도 코드의 동작을 예측하기 어려워졌습니다. 특히, 비동기 처리나 클로저를 사용할 때 `var` 때문에 엉뚱한 결과가 나오는 것을 보고는 충격을 금치 못했습니다. 정확히는 2024년 여름, 개인 프로젝트를 하던 중, 변수 스코프 문제로 3시간 넘게 디버깅했던 끔찍한 경험이 있습니다. 그때 이후로 변수 선언에 대해 깊이 파고들게 되었습니다.

헛된 시도: `var`가 만능인 줄 알았지…

처음에는 `var`가 가장 ‘만만’했습니다. 예전 자바스크립트 책이나 강의에서 `var`를 주로 사용했기 때문에, 저도 별 생각 없이 `var`만 사용했던 거죠. 함수 스코프만 고려하면 된다고 단순하게 생각했습니다. 예를 들어, 다음과 같은 코드를 짰다고 가정해 봅시다.


function example() {
  for (var i = 0; i < 5; i++) {
    setTimeout(function() {
      console.log(i);
    }, 1000);
  }
}

example(); // 예상: 0, 1, 2, 3, 4

저는 당연히 0, 1, 2, 3, 4가 차례대로 출력될 거라고 생각했습니다. 하지만 결과는 5가 5번 출력되는 것이었습니다! 당황스러웠습니다. 왜냐하면 `var`는 함수 스코프이기 때문에, 반복문이 끝나도 `i` 변수가 계속 유지되기 때문입니다. `setTimeout` 함수가 실행될 때, 이미 `i`는 5가 되어 있었던 것이죠. 이 간단한 예제 하나 때문에 `var`에 대한 믿음이 완전히 무너졌습니다.

Image related to 자바스크립트 변수, let vs const vs var? 초보를 위한 3가지 핵심 차이 완벽 정리!
Photo by Unsplash (Patrick Martin)

혼란스러운 검색: 정보의 바다에서 길을 잃다

구글, 유튜브, 스택 오버플로우… 온갖 곳을 뒤져봤습니다. 하지만 정보는 너무 많았고, 오히려 더 혼란스러워졌습니다. 어떤 글에서는 `var`는 이제 쓰지 말라고 하고, 어떤 글에서는 `let`과 `const`만 쓰라고 합니다. 또 다른 글에서는 상황에 따라 적절하게 사용해야 한다고 합니다. “대체 뭘 어쩌라는 거야?!” 특히 스코프(Scope)와 호이스팅(Hoisting)이라는 개념이 등장하면서 멘탈은 완전히 붕괴되었습니다. 분명 쉬운 개념이라고 하는데, 왜 이렇게 이해가 안 되는 건지 자괴감마저 들었습니다. javascript var let const 차이 관련 정보 더보기 (구글 검색)

핵심 분석: 스코프, 재선언, 그리고 불변성

결국, 저는 핵심을 파악하기 위해 좀 더 근본적인 질문을 던지기 시작했습니다. ‘왜 `var`는 문제가 될까?’, ‘`let`과 `const`는 왜 등장했을까?’, ‘각각의 변수 선언 방식은 어떤 상황에 적합할까?’ 이러한 질문을 통해 저는 세 가지 중요한 차이점을 발견했습니다. 바로 스코프(Scope), 재선언(Redeclaration), 그리고 불변성(Immutability)입니다.

  • 스코프(Scope): 변수가 접근 가능한 범위. `var`는 함수 스코프, `let`과 `const`는 블록 스코프를 가집니다.
  • 재선언(Redeclaration): 동일한 이름의 변수를 다시 선언하는 것. `var`는 가능하지만, `let`과 `const`는 불가능합니다.
  • 불변성(Immutability): 변수에 할당된 값을 변경할 수 있는지 여부. `const`는 재할당이 불가능합니다.

저는 이 세 가지 기준을 바탕으로 `var`, `let`, `const`를 비교 분석하기 시작했습니다. 그리고 나서야 비로소 각각의 변수 선언 방식이 왜 존재하는지, 그리고 언제 사용해야 하는지를 명확하게 이해할 수 있었습니다. 나는 변수를 선언할 때 “이 변수가 어떤 범위에서 사용될 것인가?”, “이 변수의 값이 변경될 것인가?”를 기준으로 봅니다.

항목 ❌ 나쁜 예 (Before) ✅ 좋은 예 (After)
스코프 

function example() {
  var x = 10;
  if (true) {
    var x = 20;
    console.log(x); // 20
  }
  console.log(x); // 20 (예상치 못한 변경)
}
          

function example() {
  let x = 10;
  if (true) {
    let x = 20;
    console.log(x); // 20
  }
  console.log(x); // 10 (예상대로 동작)
}
재선언 

var x = 10;
var x = 20; // 문제 없음
console.log(x); // 20
          

let x = 10;
let x = 20; // Error: Identifier 'x' has already been declared
console.log(x);

핵심 해결책: `let`과 `const`를 적극적으로 사용하세요!

이제 더 이상 변수 선언 때문에 고민하지 마세요! 다음은 제가 터득한 `var`, `let`, `const` 사용법에 대한 명확한 가이드라인입니다.

  1. 기본적으로 `const`를 사용하세요. 변수의 값이 변경되지 않아야 한다면 무조건 `const`를 사용하세요. 이렇게 하면 실수로 값을 변경하는 것을 방지하고, 코드의 안정성을 높일 수 있습니다. 예를 들어, API 키, 설정 값, 또는 UI에 표시되는 고정된 텍스트 등은 `const`로 선언하는 것이 좋습니다.
  2. 값이 변경될 수 있다면 `let`을 사용하세요. 반복문의 카운터 변수, 사용자 입력 값, 또는 API 응답 데이터 등 값이 변경될 가능성이 있는 변수는 `let`으로 선언하세요.
  3. `var`는 정말 필요한 경우가 아니면 사용하지 마세요. `var`는 함수 스코프를 가지기 때문에, 예기치 않은 부작용을 일으킬 수 있습니다. 특히 ES6 이후에는 `let`과 `const`가 `var`를 완전히 대체할 수 있습니다. 하지만 레거시 코드나 특정 라이브러리에서 `var`를 사용하는 경우에는 어쩔 수 없이 사용해야 할 수도 있습니다.

물론, 항상 예외는 있습니다. 예를 들어, 아주 오래된 브라우저를 지원해야 하는 경우에는 `let`과 `const`를 사용할 수 없을 수도 있습니다. 하지만 대부분의 경우, `let`과 `const`를 사용하는 것이 더 안전하고 효율적입니다.

Image related to 자바스크립트 변수, let vs const vs var? 초보를 위한 3가지 핵심 차이 완벽 정리!
Photo by Unsplash (Bernd 📷 Dittrich)

결론: 더 이상 고민은 No!

자바스크립트 변수 선언, 이제 더 이상 어렵게 생각하지 마세요. `const`를 기본으로 사용하고, 값이 변경될 때만 `let`을 사용하세요. `var`는 잊어버리셔도 좋습니다. 이렇게 하면 코드의 가독성을 높이고, 오류를 줄일 수 있습니다. 물론, 처음에는 어색할 수도 있습니다. 하지만 꾸준히 연습하다 보면 자연스럽게 익숙해질 것입니다. 저도 그랬으니까요. 이제 여러분도 변수 선언에 대한 고민을 훌훌 털어버리고, 즐겁게 코딩하세요!

javascript, variables
javascript, variables