How to Fix JavaScript SyntaxError: Unexpected end of input

The Problem

The SyntaxError: Unexpected end of input is a syntax error that occurs when the JavaScript engine is parsing your code and reaches the end of the file or input unexpectedly. This usually happens when a code block or statement is not properly closed.

The most common cause for this error is a mismatch of parentheses (), curly braces {}, or square brackets []. For instance, you might have an opening curly brace { for a function or an if statement but forget the closing one }.

Examples of Error-Prone Code

1. Missing Braces in Functions or Control Statements

This happens if you forget the closing curly brace } for a function, if statement, or for loop.

function calculate(a, b) {
  const result = a + b;
  return result;
// The closing brace '}' is missing.
// SyntaxError: Unexpected end of input

2. Missing Braces in Object Literals

The same error occurs if you don’t close an object definition correctly.

const person = {
  name: 'Alice',
  age: 30
// The closing brace '}' is missing.
// SyntaxError: Unexpected end of input

3. Parsing Incomplete JSON Data

When using JSON.parse(), this error can occur if the string being parsed is not a complete JSON object. This might happen if data from a network request is truncated.

// An incomplete JSON string with a missing closing brace
const jsonString = '{"name": "Bob", "city": "New York"'; 

try {
  const data = JSON.parse(jsonString);
} catch (e) {
  console.error(e); // SyntaxError: Unexpected end of JSON input
}

Note that for JSON.parse, the error message is often more specific: Unexpected end of JSON input.

How to Fix It

This error is usually caused by a simple mistake, so the fix is straightforward.

1. Match Your Brackets, Braces, and Parentheses

Carefully examine the code around where the error is reported. Ensure that every opening symbol ((, {, [) has a corresponding closing symbol.

// Corrected code
function calculate(a, b) {
  const result = a + b;
  return result;
} // Added the closing brace

const person = {
  name: 'Alice',
  age: 30
}; // Added the closing brace

2. Use Your Code Editor’s Features

Modern code editors (like VS Code, WebStorm, etc.) provide features that help prevent these mistakes:

• Bracket Pair Highlighting: When you place your cursor on a bracket, its matching pair is highlighted, making it easy to spot missing ones.
• Code Formatting: Using a code formatter like Prettier will automatically indent and structure your code on save, which often makes a missing bracket obvious.
• Linting: A linter like ESLint analyzes your code and can flag syntax errors in real-time as you type.

Conclusion

The SyntaxError: Unexpected end of input is almost always the result of not closing a code block properly. When you encounter it, don’t panic. Instead, check the following:

• Review your functions, control statements, and object literals to ensure all opening and closing symbols have a matching pair.
• Leverage your code editor’s bracket matching and linting features to prevent these errors proactively.

A calm review of your code will usually reveal a single missing brace or parenthesis.