Assignment to constant variable 오류 해결법, const를 사용할 때 자주하는 실수

자바스크립트에서 const로 변수를 선언한 뒤 코드를 실행했는데 TypeError: Assignment to constant variable.이라는 오류가 나타날 때가 있습니다. const는 자주 사용하는 기본 문법이지만 정확히 무엇을 변경할 수 없는지 헷갈리면 같은 오류를 반복해서 만나기 쉬운데요.

Assignment to constant variable 오류는 대부분 const로 선언한 변수에 새로운 값을 다시 할당했을 때 발생합니다. const의 정확한 의미부터 재할당과 객체 내부 값 변경의 차이, let을 사용해야 하는 경우와 해결 순서까지 쉽게 알아보겠습니다.

Assignment to constant variable 뜻은?

에러 메시지를 쉽게 풀면 “상수로 선언한 변수에 다시 값을 할당하려고 했다”는 뜻입니다. 자바스크립트에서 const로 선언한 변수는 선언할 때 값을 지정해야 하며, 이후 같은 변수에 새로운 값을 다시 대입할 수 없습니다.

const score = 80;
score = 100;
// TypeError: Assignment to constant variable.

처음에는 score에 80을 할당했지만 다음 줄에서 100을 다시 대입하고 있습니다. 이처럼 const 변수 자체를 새로운 값으로 교체하려고 하면 오류가 발생합니다.

const와 let 차이, 이것만 기억하세요

const와 let의 가장 중요한 차이 중 하나는 재할당 가능 여부입니다. 한 번 정한 값을 다른 값으로 바꿀 필요가 없다면 const를 사용할 수 있고, 실행 중 값이 계속 변경되어야 한다면 let이 적합합니다.

// 재할당하지 않는 값
const userName = "민수";
// 값이 변경되는 변수
let score = 80;
score = 100;

쉽게 기억하면 const = 다시 대입하지 않을 변수, let = 나중에 다시 대입할 수 있는 변수입니다. 무조건 const나 let 중 하나가 더 좋은 것이 아니라 해당 변수가 어떻게 사용되는지에 따라 선택해야 합니다.

Assignment to constant variable 원인 6가지

1. const 변수에 새로운 값을 넣은 경우
가장 기본적인 원인입니다. 코드 위쪽에서 const로 선언했다는 사실을 잊고 아래에서 값을 변경하면서 발생합니다.

const count = 1;
count = count + 1;

count가 계속 증가해야 하는 변수라면 처음부터 let으로 선언하는 것이 자연스럽습니다.

2. 반복문에서 const 값을 직접 증가시킨 경우
반복 횟수를 관리하는 변수는 값이 계속 변경됩니다. const로 선언한 값을 ++ 또는 --로 수정하려 하면 문제가 발생할 수 있습니다.

// 잘못된 예
const count = 0;
count++;
// 변경이 필요하다면
let count = 0;
count++;

3. 조건문에서 값을 다시 넣은 경우
처음에는 기본값을 const로 만들었지만 조건에 따라 다른 값을 할당하려는 코드에서도 흔히 발생합니다.

// 잘못된 예
const message = "로그인 필요";
if (isLogin) {
  message = "로그인 완료";
}

값을 여러 단계에서 변경해야 한다면 let을 사용할 수 있습니다. 반대로 조건에 따라 처음부터 하나의 값만 결정하면 된다면 조건 연산자를 활용해 const로 작성할 수도 있습니다.

const message = isLogin
  ? "로그인 완료"
  : "로그인 필요";

const 객체는 왜 수정할 수 있을까?

여기서 가장 많이 헷갈리는 부분이 있습니다. const로 객체를 만들었는데 객체 안의 속성은 변경할 수 있기 때문입니다.

const user = {
  name: "민수",
  age: 20
};
user.age = 21; // 가능

const가 막는 것은 변수에 새로운 값을 재할당하는 것입니다. 객체 내부의 속성을 수정하는 것까지 자동으로 금지하는 것은 아닙니다

const user = {
  name: "민수"
};
user.name = "지민"; // 가능
user = {
  name: "철수"
}; // 오류

첫 번째 코드는 기존 객체의 속성을 변경하지만, 두 번째 코드는 user라는 변수에 완전히 새로운 객체를 다시 할당합니다. 따라서 두 번째 경우에 Assignment to constant variable 오류가 발생합니다.

const 배열에서 push는 왜 가능할까?

배열도 객체와 같은 원리로 이해할 수 있습니다. const로 선언한 배열에 push()를 이용해 요소를 추가하거나 기존 요소를 수정하는 것은 가능합니다.

const fruits = ["apple", "banana"];
fruits.push("orange"); // 가능
fruits[0] = "grape";   // 가능

하지만 변수 자체에 새로운 배열을 넣는 것은 재할당이므로 허용되지 않습니다.

const fruits = ["apple"];
fruits = ["banana", "orange"];
// Assignment to constant variable

따라서 const 객체나 배열은 절대 변하지 않는다고 기억하면 오히려 혼란스러울 수 있습니다. 정확하게는 const로 선언한 변수의 바인딩을 다시 할당할 수 없다고 이해하는 편이 좋습니다.

const 객체까지 변경하지 못하게 하려면?

객체 내부 값까지 변경되는 것을 막고 싶다면 const만으로는 충분하지 않습니다. 이런 경우 Object.freeze() 같은 기능을 검토할 수 있습니다.

const user = Object.freeze({
  name: "민수",
  age: 20
});

다만 Object.freeze()는 기본적으로 객체의 바로 아래 단계에 적용되는 얕은 동결(shallow freeze)이라는 점도 알아둘 필요가 있습니다. 중첩 객체까지 모두 변경하지 못하게 만들고 싶다면 별도의 처리가 필요합니다.

Assignment to constant variable 해결 순서

오류가 나타나면 먼저 에러 메시지의 파일과 줄 번호를 확인한 뒤 값을 다시 할당하고 있는 변수를 찾으세요. 그다음 해당 변수의 최초 선언 위치로 이동해 const인지 확인합니다.

순서	확인할 내용
1단계	에러가 발생한 파일과 줄 번호 확인
2단계	재할당하려는 변수 이름 확인
3단계	변수의 최초 선언 위치 검색
4단계	실제로 값 변경이 필요한지 판단
5단계	필요하다면 const 대신 let 사용
6단계	객체라면 재할당과 속성 변경 구분
7단계	수정 후 다시 실행해 오류 확인

Missing initializer 오류와 차이는?

앞서 살펴본 Missing initializer in const declaration과 이번 오류는 모두 const와 관련 있지만 발생 이유가 다릅니다. Missing initializer는 const를 처음 선언하면서 값을 넣지 않았을 때 발생하는 SyntaxError입니다.

// 초기값이 없어서 문제
const count;

반면 Assignment to constant variable은 정상적으로 초기화한 const 변수에 나중에 새로운 값을 다시 대입했을 때 발생하는 TypeError입니다.

// 초기 선언은 정상
const count = 1;
// 이후 재할당에서 문제
count = 2;

정리하면 처음 값을 안 넣었다면 Missing initializer, 나중에 값을 다시 넣었다면 Assignment to constant variable이라고 구분하면 쉽습니다.

const 오류를 예방하는 방법

변수를 선언하기 전에 해당 값이 실행 과정에서 바뀌어야 하는지 생각해 보세요. 재할당이 필요 없다면 const를 사용하고, 카운터처럼 값 자체가 계속 변경되는 변수라면 let을 선택하는 것이 좋습니다.

또한 Assignment to constant variable 오류가 발생했다고 무조건 const를 let으로 바꾸지는 마세요. 원래 변경되면 안 되는 값을 실수로 수정한 것일 수도 있기 때문입니다. 먼저 이 변수의 값이 정말 변경되어야 하는가?를 확인한 뒤 수정하는 것이 중요합니다.

Assignment to constant variable은 결국 const로 선언한 변수에 새로운 값을 다시 할당했을 때 발생하는 오류입니다. 재할당이 필요하다면 let을 검토하고, 객체나 배열이라면 변수 자체의 재할당과 내부 데이터 변경을 구분해서 확인하세요.

“const는 모든 것을 변경 불가능하게 만든다”고 이해하지 않는 것이 핵심입니다. const와 let의 차이, 객체·배열의 동작 방식만 정확하게 알아두면 비슷한 오류도 훨씬 빠르게 해결할 수 있습니다.

도전 바이브코딩

Assignment to constant variable 오류 해결법, const를 사용할 때 자주하는 실수