It’s a vague, unhelpful message that feels more like a riddle than an error. You know something doesn’t belong, but you're left guessing what that "token" is and why it's unexpected. Let's demystify what’s really going on behind the scenes and get your code running smoothly again.
The "SyntaxError: Unexpected token" in JavaScript occurs when the code contains a character or symbol that the JavaScript engine does not expect, often due to a typo or syntax mistake.
Luckily, if you read the full error log there are usually some helpful details about where the error occurred, including the line number and sometimes even the specific character position. For example:
Uncaught SyntaxError: Unexpected token ',' at script.js:12:15
The part Unexpected token ',' tells you which token was unexpected—in this case, a comma. The part script.js:12:15 points you to the exact location of the error — line 12, character 15 in the file named script.js.
To fix it, you’ll need to carefully review the line and nearby lines where the error is reported, checking for missing characters or incorrect syntax.
For example, say you tried to define a function that takes two numbers and returns their multiplication:
const multiply = x, y => x * y;
You would get SyntaxError: Unexpected token ',' with that because multiple parameters in an arrow function should be enclosed in parentheses.
The fix would be to edit the code to this:
const multiply = (x, y) => x * y;
As you can see, this error is a poetic reminder that your intended brilliance is always one misplaced character away from disaster.
How to Find What Causes SyntaxError: Unexpected Token
Since this error occurs when the parser encounters a character or symbol that doesn't make sense in the context of the code, you’ll need to carefully review your code looking for:
Missing or Extra Characters
Ensure all opening brackets, braces, and parentheses have corresponding closing counterparts.
Example
function greet(name) {
console.log("Hello, " + name;
}
SyntaxError: Unexpected token ';'Fix
function greet(name) {
console.log("Hello, " + name);
}
Avoid Using Reserved Keywords
Do not use JavaScript reserved words (like for, while, class) as variable or function names.
Example
var for = 5;SyntaxError: Unexpected token 'for'
Fix
var count = 5;
Use Proper String Delimiters
Be consistent with single ' and double " quotes, and escape them when necessary.
Example
let message = "She said, "Hello!"";SyntaxError: Unexpected token 'Hello'
Fix
let message = 'She said, "Hello!"';
// or
let message = "She said, \"Hello!\"";
Validate JSON Data
When working with JSON, remember that property names and string values must use double quotes.
Example
let data = JSON.parse("{'name': 'Alice'}");SyntaxError: Unexpected token ' in JSON at position 1
Fix
let data = JSON.parse('{"name": "Alice"}');
Don’t Forget to Adopt Good Coding Practices
Besides checking the above things when you encounter a SyntaxError, it’s also important to be proactive by adopting good coding practices to minimize the chances of it happening in the first place.
Tools like ESLint can help detect syntax errors before runtime, providing immediate feedback and preventing simple mistakes from causing runtime issues. Additionally, writing clean, well-indented code makes it easier to spot potential problems and keep your codebase more readable.
Even experienced developers encounter unexpected tokens, but by staying organized and using the right tools, you can effectively troubleshoot and fix them.
Track, Analyze and Manage Errors With Rollbar
Managing errors and exceptions in your code is challenging. It can make deploying production code an unnerving experience. Being able to track, analyze, and manage errors in real-time can help you to proceed with more confidence. Rollbar automates error monitoring and triaging, making fixing JavaScript errors easier than ever. Try it today!
