JavaScript - 변수 선언의 진화: var, let, const

hogu__giriboy·2026년 3월 16일

백엔드 코드잇스프린트 풀스택 풀스택개발자 풀스택개발자취업 풀스택부트캠프 프론트엔드

위클리

목록 보기

8/11

1. JavaScript의 변수 선언 방식

JavaScript에서 값을 저장하려면 변수에 값을 할당(assignment)해야 하며,
이를 위해 먼저 변수를 선언(declaration)한다.
그리고 JavaScript에는 변수를 선언하는 세 가지 방법이 있다.

var
let
const

지금은 대부분 let과 const를 사용하지만
JavaScript가 처음 등장했을 때는 var 하나만 존재했다.

즉 초기 JavaScript에서는 모든 변수를 이렇게 선언했다.

var name = "Alice";
var age = 20;

당시에는 문제가 없어 보였지만
프로그램 규모가 커지면서 var가 여러 문제를 만들기 시작했다.

JavaScript 초창기: `var`

JavaScript는 원래 웹페이지에 동적인 동작을 추가하는 것이었다.
웹페이지에 간단한 동작을 추가하는 것이 목적이었기 때문에
변수 선언 방식도 단순하게 설계되었다.

그래서 변수 선언은 사실상 var 하나로 통일되어 있었다.

var count = 1;
var message = "hello";

하지만 시간이 지나면서 JavaScript는
단순한 스크립트 언어를 넘어 대규모 애플리케이션을 만드는 언어로 발전했다.

이 과정에서 var의 설계가 여러 문제를 만들기 시작했다.

ES6에서 등장한 `let`과 `const`

이 문제를 해결하기 위해
ES6(ECMAScript 2015)에서 새로운 변수 선언 방식이 추가된다.

let
const

이 두 가지는 단순한 문법 추가가 아니라
스코프와 변수 재선언 문제를 개선하기 위해 도입된 새로운 변수 선언 방식이다.

정리하면 현재 JavaScript에는 다음 세 가지 선언 방식이 존재한다.

var → 과거 방식
let → 재할당 가능한 변수
const → 재할당 불가능한 변수

그리고 현대 JavaScript에서는 대부분 다음과 같은 방식으로 사용된다.

const name = "Alice";
let count = 0;

즉 기본은 const,
값이 바뀌어야 할 때만 let을 사용한다.

var는 과거 코드에서만 볼 수 있는 경우가 많고
새로운 코드에서는 거의 사용하지 않는다.

변수 선언 방식의 변화 이유

핵심 이유는 하나다.

var가 예측하기 어려운 동작을 만들었기 때문이다.

특히 다음과 같은 문제들이 있었다.

함수 스코프
중복 선언 가능
호이스팅

이 문제들이 실제 개발에서 버그의 원인이 되는 경우가 많았고
이를 해결하기 위해 let과 const가 등장하게 된다.

2. `var`가 만들었던 문제들

초창기 JavaScript에서 var는 유일한 변수 선언 방식이었지만
프로그램 규모가 커지면서 여러 예측하기 어려운 동작을 만들기 시작했다.

대표적으로 다음과 같은 특징들이 이해를 어렵게 만들 수 있다.

함수 스코프
중복 선언 가능
호이스팅

이 세 가지 때문에 코드의 동작을 직관적으로 이해하기 어려워졌다.

블록이 아닌 함수 기준으로 동작하는 스코프

많은 현대 프로그래밍 언어에서는 {} 블록 단위로 스코프가 결정되는
블록 스코프(block scope)를 사용한다.

하지만 var는 그렇지 않다.

var는 블록이 아니라 함수 기준으로 스코프가 결정된다.

if (true) {
  var message = "hello";
}

console.log(message); // hello

if 블록 안에서 선언했는데도
블록 밖에서 변수에 접근할 수 있다.

왜냐하면 var는 블록 스코프가 아니라 함수 스코프이기 때문이다.

그래서 코드가 길어질수록
변수가 어디서 생성된 것인지 파악하기 어려워지는 문제가 생긴다.

같은 변수를 여러 번 선언할 수 있다.

또 하나의 문제는 중복 선언이 가능하다는 것이다.

var name = "Alice";
var name = "Bob";

console.log(name); // Bob

같은 이름의 변수를 다시 선언해도
에러가 발생하지 않는다.

결과적으로 기존 변수는 그냥 덮어쓰이게 된다.

이런 상황에서는 실수로 변수를 다시 선언해도 프로그램이 그대로 실행된다.

즉 버그가 발생해도 바로 알아차리기 어려워진다.

코드 위로 끌어올려지는 호이스팅

var의 또 다른 특징은 호이스팅(hoisting)이다.

호이스팅은 변수 선언이 실제 코드 위치와 관계없이
해당 스코프의 시작 부분에서 선언된 것처럼 동작하는 JavaScript의 동작 방식이다.

console.log(count);

var count = 10;

이 코드는 에러가 나지 않는다.

실제로 JavaScript 엔진이 내부적으로
코드를 다음처럼 처리하기 때문이다.

var count;

console.log(count);

count = 10;

그래서 결과는 undefined가 나온다.

변수가 선언되기 전에 사용했는데도
에러가 발생하지 않고 undefined가 출력된다.

이런 동작은 코드의 실행 흐름을 직관적으로 이해하기 어렵게 만든다.

점차 드물어지는 `var`

정리하면 var는 다음과 같은 문제를 가지고 있었다.

블록이 아닌 함수 기준 스코프
중복 선언 가능
호이스팅으로 인한 예측 어려움

JavaScript가 점점 대규모 애플리케이션을 만드는 언어로 발전하면서
이 문제들은 실제 개발에서 큰 혼란을 만들었다.

그래서 ES6에서는 이러한 특성으로 인한 혼란을 줄이기 위해
let과 const라는 새로운 변수 선언 방식이 도입되었다.

3. `let`: 블록 스코프의 등장

var의 특징 중 하나는
스코프가 블록이 아니라 함수 단위로 결정된다는 것이다.

이 문제를 해결하기 위해 ES6에서 등장한 것이
바로 let이다.

let의 가장 중요한 특징은 블록 스코프(block scope)다.

블록 단위로 관리되는 변수

블록 스코프란
{} 블록 안에서 선언된 변수는 그 블록 안에서만 사용할 수 있는 것을 의미한다.

if (true) {
  let message = "hello";
}

console.log(message);

이 코드는 에러가 발생한다.

ReferenceError: message is not defined

왜냐하면 message는 if 블록 안에서만 존재하는 변수이기 때문이다.

이것이 var와 가장 큰 차이다.

`var`와 `let`의 스코프 차이

두 코드를 비교해 보면 차이가 더 분명해진다.

if (true) {
  var a = 10;
}

console.log(a); // 10

var는 블록을 무시하고
함수 전체에서 접근 가능하다.

반면 let은 다음과 같다.

if (true) {
  let b = 10;
}

console.log(b); // ReferenceError

let은 블록을 벗어나면 접근할 수 없다.

즉 변수의 사용 범위를 더 안전하게 제한할 수 있다.

재할당은 가능하지만 재선언은 불가능

let은 값을 다시 할당하는 것은 가능하지만
같은 이름으로 다시 선언하는 것은 불가능하다.

let count = 1;
count = 2; // 가능

하지만 다음 코드는 에러가 발생한다.

let count = 1;
let count = 2; // SyntaxError

이 덕분에 실수로 같은 변수를 다시 선언하는 문제를
미리 막을 수 있다.

`let`이 해결한 문제

let은 var의 설계로 인해
발생할 수 있는 혼란을 줄이기 위해 도입된 변수 선언 방식이다.

블록 스코프 지원
중복 선언 방지
더 예측 가능한 코드 구조

그래서 현대 JavaScript에서는
새로운 코드에서 var 대신 let과 const를 사용하는 것이 일반적인 관례가 되었다.

하지만 여기서 한 가지 질문이 생긴다.

재할당이 가능한 변수라면
값이 바뀌지 않는 변수는 어떻게 관리해야 할까?

이 질문에 대한 답이 바로 const다.

4. `const`: 변하지 않는 변수

let이 등장하면서 var의 많은 문제가 해결되었지만
여전히 한 가지 고민이 남아 있었다.

값이 절대 바뀌지 않는 변수는 어떻게 표현할까?

이 문제를 해결하기 위해 ES6에서는
const라는 새로운 변수 선언 방식이 추가되었다.

`const`는 재할당이 불가능하다

const는 한 번 값을 할당하면 다시 재할당할 수 없는 변수다.

const name = "Alice";

name = "Bob"; // 에러 발생

이 코드는 다음과 같은 에러가 발생한다.

TypeError: Assignment to constant variable

즉 const는 재할당이 불가능한 변수다.

선언과 동시에 값 할당

const는 선언할 때 반드시 초기값을 함께 작성해야 한다.

const count = 10;

다음 코드는 에러가 발생한다.

const count; // SyntaxError

왜냐하면 const는 재할당이 불가능한 변수이기 때문에
선언 시점에 초기값이 반드시 필요하기 때문이다.

객체와 배열에서는 조금 다르게 동작한다

여기서 많은 사람들이 헷갈리는 부분이 하나 있다.

const로 선언한 객체나 배열의 프로퍼티나 요소는 변경할 수 있다.

const user = {
  name: "Alice",
};

user.name = "Bob"; // 가능

이 코드에는 에러가 발생하지 않는다.

이유는 const가 객체 내부 값까지 보호하는 것이 아니라
변수의 참조 자체를 변경하지 못하게 하는 것이기 때문이다.

즉 다음 코드는 에러가 발생한다.

const user = { name: "Alice" };

user = { name: "Bob" }; // 에러

객체 자체를 새로운 객체로 바꾸는 것은 불가능하다.

기본이 되어버린 `const`

현대 JavaScript에서는 변수를 선언할 때
다음과 같은 사용 패턴이 널리 사용된다.

기본은 const
값이 바뀌어야 할 때만 let
var는 거의 사용하지 않음

const name = "Alice";
let count = 0;

이 방식은 코드의 의도를 더 명확하게 만든다.

const로 선언된 변수를 보면
"이 값은 바뀌지 않는다"는 것을 바로 알 수 있기 때문이다.

5. 실제로 쓰이는 방식

지금까지 var, let, const의 특징을 살펴봤다면
다음으로 중요한 것은 실제 코드에서 어떻게 사용하는가다.

현재 JavaScript에서는 보통 다음과 같은 기준을 사용한다.

기본은 const
값이 바뀌면 let
var는 사용하지 않음

즉 변수 선언의 기본 출발점은 항상 const다.

기본은 `const`

대부분의 변수는 한 번 값이 정해지면
프로그램 실행 동안 다시 바뀌지 않는 경우가 많다.

예를 들어 이런 값들이다.

const API_URL = "https://api.example.com";
const MAX_COUNT = 10;
const userName = "Alice";

이런 값들은 프로그램 중간에 변경될 필요가 없다.

그래서 처음부터 const로 선언하는 것이 기본적인 방식이다.

값이 바뀌어야 하면 `let`

반대로 값이 바뀌는 경우에는 let을 사용한다.

예를 들어 카운트 값이나 반복문 변수 같은 경우다.

let count = 0;

count = count + 1;
count = count + 1;

또는 반복문에서도 자주 사용된다.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

이처럼 값이 변하는 변수는 let을 사용한다.

`var`는 사실상 사용하지 않는다

현대 JavaScript에서는 새로운 코드에서 var를 사용하는 경우가 거의 없다.
이유는 이미 살펴본 것처럼 var의 특성이 코드 이해를 어렵게 만들 수 있기 때문이다.

블록 스코프가 없다
중복 선언이 가능하다
호이스팅으로 예측이 어렵다

그래서 대부분의 코드 스타일 가이드에서는
var 사용을 금지하거나 권장하지 않는다.

현재 JavaScript의 변수 선언 기준

정리하면 현재 JavaScript에서 변수 선언은
다음과 같은 기준으로 사용된다.

const userName = "Alice"; // 기본
let count = 0; // 값이 바뀌는 경우

즉 개발자는 보통 이렇게 생각한다.

이 값이 바뀔까?

바뀌지 않는다 → const
바뀐다 → let

이 방식이 코드의 의도를 가장 명확하게 표현할 수 있기 때문이다.

6. 핵심 정리

JavaScript에는 세 가지 변수 선언 방식이 있다: var, let, const
초기 JavaScript에서는 var만 존재했지만 여러 설계 특성으로 인해 현대 코드에서는 사용이 줄어들었다
var는 함수 스코프, 중복 선언 가능, 호이스팅 등의 특징 때문에 예측하기 어려운 코드를 만들 수 있다
ES6에서 등장한 let과 const는 이러한 특성으로 인해 발생할 수 있는 혼란을 줄이기 위해 추가되었다
let은 블록 스코프를 가지며 재할당은 가능하지만 재선언은 불가능하다
const는 재할당이 불가능하며 선언과 동시에 초기화가 필요하다
객체나 배열을 const로 선언해도 프로퍼티나 요소 수정은 가능하지만 참조 자체를 바꾸는 것은 불가능하다
현대 JavaScript에서는 기본적으로 const를 사용하고, 값이 변경될 경우에만 let을 사용한다
var는 과거 코드에서 주로 볼 수 있으며 새로운 코드에서는 거의 사용하지 않는다

hogu__giriboy

이전 포스트

JavaScript – 복사했는데 왜 같이 바뀔까?: 얕은 복사와 깊은 복사

다음 포스트

JavaScript - 변수 선언의 진화: var, let, const

위클리

1. JavaScript의 변수 선언 방식

JavaScript 초창기: `var`

ES6에서 등장한 `let`과 `const`

변수 선언 방식의 변화 이유

2. `var`가 만들었던 문제들

블록이 아닌 함수 기준으로 동작하는 스코프

같은 변수를 여러 번 선언할 수 있다.

코드 위로 끌어올려지는 호이스팅

점차 드물어지는 `var`

3. `let`: 블록 스코프의 등장

블록 단위로 관리되는 변수

`var`와 `let`의 스코프 차이

재할당은 가능하지만 재선언은 불가능

`let`이 해결한 문제

4. `const`: 변하지 않는 변수

`const`는 재할당이 불가능하다

선언과 동시에 값 할당

객체와 배열에서는 조금 다르게 동작한다

기본이 되어버린 `const`

5. 실제로 쓰이는 방식

기본은 `const`

값이 바뀌어야 하면 `let`

`var`는 사실상 사용하지 않는다

현재 JavaScript의 변수 선언 기준

6. 핵심 정리

JavaScript – 복사했는데 왜 같이 바뀔까?: 얕은 복사와 깊은 복사

렌더링 ≠ 화면 변경: 결과 계산

0개의 댓글

JavaScript - 변수 선언의 진화: var, let, const

위클리

1. JavaScript의 변수 선언 방식

JavaScript 초창기: var

ES6에서 등장한 let과 const

변수 선언 방식의 변화 이유

2. var가 만들었던 문제들

블록이 아닌 함수 기준으로 동작하는 스코프

같은 변수를 여러 번 선언할 수 있다.

코드 위로 끌어올려지는 호이스팅

점차 드물어지는 var

3. let: 블록 스코프의 등장

블록 단위로 관리되는 변수

var와 let의 스코프 차이

재할당은 가능하지만 재선언은 불가능

let이 해결한 문제

4. const: 변하지 않는 변수

const는 재할당이 불가능하다

선언과 동시에 값 할당

객체와 배열에서는 조금 다르게 동작한다

기본이 되어버린 const

5. 실제로 쓰이는 방식

기본은 const

값이 바뀌어야 하면 let

var는 사실상 사용하지 않는다

현재 JavaScript의 변수 선언 기준

6. 핵심 정리

JavaScript – 복사했는데 왜 같이 바뀔까?: 얕은 복사와 깊은 복사

렌더링 ≠ 화면 변경: 결과 계산

0개의 댓글

JavaScript 초창기: `var`

ES6에서 등장한 `let`과 `const`

2. `var`가 만들었던 문제들

점차 드물어지는 `var`

3. `let`: 블록 스코프의 등장

`var`와 `let`의 스코프 차이

`let`이 해결한 문제

4. `const`: 변하지 않는 변수

`const`는 재할당이 불가능하다

기본이 되어버린 `const`

기본은 `const`

값이 바뀌어야 하면 `let`

`var`는 사실상 사용하지 않는다