Missing initializer in const declaration 에러 해결 방법

자바스크립트에서 const로 변수를 만들다가 SyntaxError: Missing initializer in const declaration이라는 오류를 만나는 경우가 있습니다. 영어 메시지만 보면 복잡해 보이지만 원인은 의외로 간단한데요.

대부분 const 변수를 선언하면서 초기값을 넣지 않았기 때문입니다.

이번 글에서는 Missing initializer in const declaration의 뜻부터 왜 const에서 이런 오류가 발생하는지, 실제 코드에서 확인해야 할 부분과 해결 방법까지 쉽게 알아보겠습니다.

Missing initializer in const declaration 뜻은?

에러 메시지를 그대로 풀어보면 “const 선언에 초기화 값(initializer)이 없다”는 뜻입니다. 자바스크립트에서 const를 사용해 변수를 선언할 때는 선언과 동시에 값을 할당해야 합니다.

// 잘못된 예
const count;
// SyntaxError:
// Missing initializer in const declaration

위 코드에는 count라는 변수만 있고 처음 사용할 값이 없습니다. 따라서 아래처럼 선언하는 순간 값을 함께 지정해야 합니다.

// 올바른 예
const count = 0;

쉽게 기억하면 const는 “이름만 먼저 만들어 둘게”가 안 된다고 생각하면 됩니다. const 변수명 = 초기값;을 한 세트로 기억해 두세요.

const 초기값이 꼭 필요한 이유는?

const로 선언한 변수는 선언 이후 다른 값을 다시 대입할 수 없습니다. 그렇기 때문에 변수가 생성되는 시점에 어떤 값을 가리킬 것인지 함께 정해줘야 합니다.

예를 들어 다음과 같이 나중에 값을 넣으려는 코드는 사용할 수 없습니다.

// 잘못된 예
const userName;
userName = "민수";

나중에 값을 결정해야 하는 상황이라면 const가 아니라 let이 더 적절할 수 있습니다.

let userName;
userName = "민수";
console.log(userName);

처음 선언할 때 값을 정할 수 있다면 const, 나중에 값을 넣거나 재할당해야 한다면 let이라는 기준으로 이해하면 초보자도 구분하기 쉽습니다.

Missing initializer 오류가 발생하는 원인 6가지

1. const만 선언하고 값을 넣지 않은 경우
가장 흔한 원인입니다. const name;처럼 변수 이름만 선언하면 초기화 값이 없기 때문에 SyntaxError가 발생합니다.

2. 여러 const 변수를 한 번에 선언하다 일부 값을 빠뜨린 경우
쉼표를 사용해 여러 변수를 선언했다면 각각의 const 바인딩에 초기값이 필요합니다.

// 잘못된 예
const a = 1, b;
// 올바른 예
const a = 1, b = 2;

3. 리팩터링하면서 초기화 코드를 삭제한 경우
기존 코드를 수정하면서 = 값 부분만 실수로 삭제하는 경우도 있습니다. 특히 변수명이 많다면 에러 메시지에 표시된 줄에서 const 선언 전체를 확인해 보세요.

4. let을 const로 변경하면서 초기값을 넣지 않은 경우
기존에 let value;처럼 사용하던 변수를 const로 바꾸면 문제가 생길 수 있습니다. 단순히 키워드만 교체하지 말고 값이 언제 할당되는지도 함께 확인해야 합니다.

5. 조건에 따라 나중에 값을 넣으려고 한 경우
어떤 조건의 결과에 따라 값을 결정해야 해서 먼저 const 변수만 만들어두려는 경우가 있습니다. 하지만 const는 이런 방식으로 사용할 수 없습니다.

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

값을 나중에 재할당해야 한다면 let을 사용할 수 있습니다.

let message;
if (isLogin) {
  message = "로그인 완료";
}

6. 코드 자동완성이나 복사 과정에서 = 값이 빠진 경우
코드를 이동하거나 복사·붙여넣기하면서 변수명만 남는 경우도 있습니다. 오류 줄에서 const 변수명 = 값; 형태가 완성되어 있는지 먼저 확인하세요.

Missing initializer 해결 순서, 이것부터 확인!

해결 방법은 어렵지 않습니다. 가장 먼저 브라우저 콘솔이나 터미널에서 오류가 발생한 파일 이름과 줄 번호를 확인한 뒤 해당 위치의 const 선언을 찾아보세요.

그다음 등호 =와 초기값이 있는지 확인합니다. 여러 변수를 한 줄에서 선언했다면 각각 값이 들어 있는지도 살펴봐야 합니다.

순서	확인할 내용
1단계	에러가 발생한 파일과 줄 번호 확인
2단계	해당 줄의 const 선언 확인
3단계	= 뒤에 초기값이 있는지 확인
4단계	여러 변수를 선언했다면 각각 초기값 확인
5단계	나중에 값을 넣어야 한다면 let 사용 검토
6단계	수정 후 저장하고 다시 실행

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

초보자라면 const와 let의 차이 때문에 이번 오류를 만나는 경우가 많습니다. 가장 중요한 차이는 const는 선언할 때 초기값이 필요하고 이후 해당 변수에 재할당할 수 없다는 것입니다.

// const
const age = 20;
// age = 21; // 재할당 불가
// let
let score;
score = 90;
score = 100;

다만 const로 객체나 배열을 선언했다고 해서 내부 내용까지 모두 변경할 수 없는 것은 아닙니다. const가 막는 것은 변수 자체에 새로운 값을 다시 할당하는 것입니다.

const user = {
  name: "민수"
};
user.name = "지민"; // 가능
// user = {}; 
// 새로운 객체를 재할당하는 것은 불가

이 차이를 알아두면 “const인데 객체 값은 왜 바뀌지?”라는 혼란도 함께 해결할 수 있습니다.

조건에 따라 값을 정해야 한다면?

무조건 let으로 바꿔야 하는 것은 아닙니다. 조건에 따라 하나의 값을 결정하는 상황이라면 조건 연산자 등을 이용해 const를 선언하면서 바로 초기화할 수도 있습니다.

const message = isLogin
  ? "로그인 완료"
  : "로그인이 필요합니다";

이렇게 작성하면 선언과 동시에 값이 결정되므로 const를 그대로 사용할 수 있습니다. 반대로 여러 단계에서 계속 값이 변경되어야 한다면 let을 선택하는 것이 자연스럽습니다.

Missing initializer 오류 예방 방법

const를 입력했다면 자연스럽게 const 변수명 = 값;까지 작성하는 습관을 들여보세요. VS Code 같은 코드 편집기와 ESLint를 활용하면 잘못된 선언을 개발 단계에서 발견하는 데도 도움이 됩니다.

또한 기존 코드를 리팩터링하면서 let을 const로 변경할 때는 재할당 여부와 초기화 시점을 함께 확인해야 합니다. 단순히 const를 많이 사용하는 것이 중요한 것이 아니라 변수의 용도에 맞게 선택하는 것이 중요합니다.

Missing initializer in const declaration은 쉽게 말해 “const 변수를 만들었는데 처음 사용할 값이 없다”는 의미입니다. 오류가 발생했다면 해당 줄의 const 선언부터 찾아 = 초기값이 빠졌는지 확인하세요.

값을 선언과 동시에 정할 수 있다면 초기값을 추가하고, 나중에 값을 할당하거나 여러 번 변경해야 한다면 let 사용을 검토하면 됩니다.

영어로 된 에러 메시지가 길어 보여도 const + 초기값이라는 핵심만 기억하면 쉽게 해결할 수 있습니다!

도전 바이브코딩

Missing initializer in const declaration 에러 해결 방법