Unexpected end of input 오류 쉽게 해결하는 방법
자바스크립트 코드를 실행했는데 갑자기 SyntaxError: Unexpected end of input이라는 메시지가 나타나면 무엇을 잘못했는지 찾기 어려울 수 있습니다.
코딩을 처음 배우는 단계라면 오류가 표시된 마지막 줄만 계속 수정하다가 시간을 보내기도 하는데요.
사실 Unexpected end of input 오류는 의미를 알면 확인해야 할 곳이 비교적 명확합니다.
대부분 괄호나 따옴표처럼 반드시 닫아야 하는 문법 요소를 끝까지 닫지 않았을 때 발생하기 때문입니다. 어떤 뜻인지부터 자주 발생하는 원인과 해결 순서까지 쉽게 알아보겠습니다.
Unexpected end of input 뜻은?
Unexpected end of input을 쉽게 풀어보면 “아직 코드가 더 나와야 하는데 갑자기 입력이 끝났다”는 뜻입니다. 자바스크립트 엔진이 코드를 끝까지 읽었는데 문법적으로 아직 기다리고 있는 내용이 남아 있는 상황이라고 생각하면 됩니다.
대표적인 예가 닫는 중괄호 }를 빼먹는 경우입니다.
function sayHello() {
console.log("안녕하세요");
// }가 빠져 있음
자바스크립트 입장에서는 {가 등장했으니 언젠가는 }가 나올 것으로 예상합니다. 하지만 파일이 끝날 때까지 나오지 않았기 때문에 “코드가 벌써 끝나면 안 되는데?”라는 의미로 Unexpected end of input 오류를 표시할 수 있습니다.
Unexpected end of input 원인 8가지
1. 닫는 중괄호 }를 빠뜨린 경우
가장 먼저 확인할 부분입니다. 함수, if문, for문, 객체 등을 작성하면서 여는 {는 넣었지만 닫는 }를 빠뜨리면 코드가 끝나도 블록이 완료되지 않습니다.
2. 닫는 소괄호 )가 없는 경우
함수 호출이나 조건문에서 (를 열어놓고 닫지 않은 경우입니다. 함수가 여러 단계로 중첩되어 있다면 괄호 짝을 하나씩 확인해 보세요.
console.log("Hello";
// 올바른 코드
console.log("Hello");
3. 대괄호 ]를 닫지 않은 경우
배열을 만들 때도 같은 문제가 발생할 수 있습니다. 배열 데이터가 길어 여러 줄에 걸쳐 작성되어 있다면 마지막 ]가 있는지 확인하는 것이 좋습니다.
4. 문자열 따옴표를 닫지 않은 경우" 또는 '로 문자열을 시작했다면 같은 종류의 따옴표로 끝내야 합니다. 따옴표가 빠지면 이후 코드까지 예상과 다르게 해석되면서 SyntaxError가 발생할 수 있습니다.
const name = "민수";
// 잘못된 예
const name = "민수;
5. 템플릿 리터럴의 백틱을 빠뜨린 경우
템플릿 리터럴은 백틱 `으로 시작하고 끝납니다. 여러 줄의 문자열이나 ${value} 표현식을 작성하다가 마지막 백틱을 놓치기 쉽습니다.
const name = "민수";
const message = `안녕하세요 ${name}`;
6. 객체나 배열 작성이 끝나지 않은 경우
객체 안에 배열, 배열 안에 객체처럼 데이터가 중첩되면 괄호 구조가 복잡해집니다. 이때 가장 안쪽부터 }와 ]가 제대로 닫혔는지 살펴보세요.
7. 주석이 제대로 끝나지 않은 경우
여러 줄 주석은 /*로 시작했다면 */로 끝내야 합니다. 닫는 부분을 빠뜨리면 뒤쪽 코드가 모두 주석처럼 처리되어 예상하지 못한 문제가 생길 수 있습니다.
8. 복사·붙여넣기 과정에서 코드가 잘린 경우
인터넷의 예제 코드를 복사하거나 여러 파일 사이에서 코드를 옮기면서 마지막 괄호나 일부 코드가 누락되는 경우도 있습니다. 직접 작성한 부분에 문제가 없다면 붙여넣은 코드가 완전한지 확인해 보세요.
코딩 초보도 쉽게 해결하는 6단계
첫 번째로 에러 메시지에 표시된 파일과 줄 번호를 확인하세요. 다만 Unexpected end of input은 파일 마지막 부분에 오류가 표시되더라도 실제 실수는 그보다 훨씬 위쪽에 있을 수 있습니다.
두 번째는 에러 위치에서 위쪽으로 올라가면서 { }, ( ), [ ]의 짝을 확인하는 것입니다. 초보자라면 복잡하게 원인을 추측하기보다 괄호부터 점검하는 편이 빠릅니다.
| 순서 | 확인 내용 |
| 1단계 | 오류가 발생한 파일과 줄 번호 확인 |
| 2단계 | { }, ( ), [ ] 괄호의 짝 확인 |
| 3단계 | 작은따옴표와 큰따옴표 확인 |
| 4단계 | 템플릿 리터럴의 백틱 확인 |
| 5단계 | 코드를 자동 정렬해 블록 구조 확인 |
| 6단계 | 수정 후 저장하고 다시 실행 |
그래도 찾기 어렵다면 문제가 의심되는 코드를 조금씩 주석 처리하거나 작은 단위로 나눠 실행해 보세요. 어느 부분을 제외했을 때 오류가 사라지는지 확인하면 문제 범위를 빠르게 좁힐 수 있습니다.
에러가 마지막 줄에 표시되는 이유는?
이 오류에서 초보자가 가장 헷갈리는 부분입니다. 예를 들어 50번째 줄에 오류가 표시됐다고 해서 반드시 50번째 줄을 잘못 작성한 것은 아닙니다.
자바스크립트 엔진은 앞에서 열린 괄호 등이 뒤에서 닫히기를 기다리면서 계속 코드를 읽을 수 있습니다. 그러다 파일 끝에 도착했는데도 필요한 문법 요소를 만나지 못하면 그제야 입력이 예상보다 일찍 끝났다고 판단합니다.
따라서 마지막 줄만 계속 수정하지 말고 오류 위치보다 앞쪽을 확인해야 합니다. 최근 수정한 함수나 조건문, 객체부터 거꾸로 살펴보면 원인을 발견하기 쉽습니다.
괄호 오류를 빠르게 찾는 방법
VS Code와 같은 코드 편집기를 사용한다면 여는 괄호에 커서를 올려보세요. 짝이 되는 닫는 괄호가 강조되기 때문에 직접 하나씩 세는 것보다 편리합니다.
또한 Prettier 같은 코드 포맷터를 사용하면 들여쓰기가 정리되어 함수나 조건문의 구조를 파악하기 쉬워집니다. ESLint 등의 도구를 함께 활용하는 것도 문법 문제를 빠르게 발견하는 데 도움이 됩니다.
if (isLogin) {
if (isAdmin) {
console.log("관리자입니다.");
}
}
위처럼 들여쓰기를 일정하게 유지하면 어느 중괄호가 어떤 코드 블록을 닫는지 한눈에 확인할 수 있습니다. 코딩을 처음 배울수록 자동 정렬과 들여쓰기 습관을 들여두는 것이 좋습니다.
Unexpected end of input 예방하는 습관
한꺼번에 긴 코드를 작성한 뒤 실행하기보다 함수나 기능을 작은 단위로 작성하고 자주 실행해 보세요. 오류가 발생해도 마지막으로 추가한 코드만 확인하면 되기 때문에 디버깅 범위가 크게 줄어듭니다.
괄호나 따옴표를 열었을 때 바로 닫는 습관도 유용합니다. 코드 편집기의 자동 괄호 완성 기능을 켜두고 Prettier, ESLint 등의 도구를 함께 사용하면 단순한 문법 실수를 상당 부분 예방할 수 있습니다.
Unexpected end of input은 쉽게 말해 “코드는 끝났는데 아직 닫아야 할 것이 남아 있다”는 신호입니다. 오류가 나타났다면 먼저 중괄호, 소괄호, 대괄호, 따옴표와 백틱을 차례대로 확인해 보세요.
오류가 표시된 마지막 줄에만 원인이 있다고 생각하지 않는 것이 중요합니다. 에러 위치에서 위쪽으로 천천히 올라가며 짝이 맞지 않는 문법을 찾으면 코딩 초보자도 충분히 해결할 수 있습니다.
오늘 정리한 순서대로 하나씩 점검해 보세요.