🔣 SyntaxError: Unexpected token

Reading the Error Message

// SyntaxError: Unexpected token '}'
// SyntaxError: Unexpected token '<'  (often means you loaded HTML as JS)
// SyntaxError: Unexpected end of input  (missing closing bracket)
// SyntaxError: Unexpected identifier   (missing comma or operator)

// The line number in the error is WHERE the parser gave up,
// NOT necessarily where the mistake is. The real mistake is usually earlier.

Common Causes

// ❌ Missing comma in object
const user = {
  name: 'Alice'
  age: 30  // ← missing comma after 'Alice'
};

// ❌ Trailing comma in function call (older browsers)
doSomething(arg1, arg2,);  // fine in modern JS, error in IE

// ❌ Using reserved word as variable name
const class = 'MyClass';  // ❌ 'class' is reserved
const className = 'MyClass';  // ✅

// ❌ Arrow function missing return curly when needed
const fn = (x) => { x * 2 };       // ❌ missing return
const fn = (x) => x * 2;           // ✅ implicit return
const fn = (x) => { return x * 2; } // ✅ explicit return

// ❌ Template literal not closed
const msg = `Hello ${name;  // ❌ missing } and closing backtick

JSON SyntaxErrors

// JSON is stricter than JavaScript object literals
JSON.parse('{ name: "Alice" }');        // ❌ keys must be quoted
JSON.parse('{ "name": "Alice", }');     // ❌ no trailing commas
JSON.parse("{ 'name': 'Alice' }");      // ❌ must use double quotes
JSON.parse('{ "name": "Alice" }');      // ✅

// Safe JSON parse
try {
  const data = JSON.parse(rawString);
} catch (e) {
  console.error('Invalid JSON:', e.message);
  // e.message tells you the exact position of the error
}

Finding Syntax Errors

• Use our JS Formatter — it highlights syntax errors as you type
• Use our JSON Formatter for JSON parsing errors
• ESLint in your editor catches syntax errors before you even run the code
• The browser console shows the exact file and line number — click it to jump to the code in DevTools