The “Unexpected token” error in JavaScript occurs when the JavaScript engine encounters a character or symbol it does not expect in a given syntax context. This is a syntax error, meaning the code is not written correctly according to JavaScript’s grammar rules.
Step 1: Understanding the Error Message
The error message typically appears as:
Uncaught SyntaxError: Unexpected token <some_character>
- SyntaxError – Indicates that the code contains an invalid syntax.
- Unexpected token – The character or symbol that JavaScript does not expect at that point.
- Location – The specific file and line number where the error occurred.
Step 2: Common Causes and Fixes
1. Missing or Extra Brackets/Parentheses
Cause
If brackets {}, parentheses (), or square brackets [] are not properly closed or are misplaced, the JavaScript engine will throw an “Unexpected token” error.
Example
function greet(name {
console.log("Hello, " + name);
} // Uncaught SyntaxError: Unexpected token '{'
Fix
Ensure all brackets and parentheses are correctly closed.
function greet(name) {
console.log("Hello, " + name);
} // Works fine
2. Missing or Extra Commas
Cause
If a comma is missing or incorrectly placed in an array or object, the error occurs.
Example
let obj = {
name: "John"
age: 30
}; // Uncaught SyntaxError: Unexpected token 'age'
Fix
Ensure commas are correctly placed.
let obj = {
name: "John",
age: 30
}; // Works fine
3. Unexpected String Concatenation
Cause
If a string is not properly enclosed in quotes, it results in an error.
Example
let message = "Hello World; // Uncaught SyntaxError: Unexpected token ';'
Fix
Ensure all strings are correctly enclosed.
let message = "Hello World"; // Works fine
4. Using return in Arrow Functions Without Parentheses
Cause
If an arrow function implicitly returns an object, but the object is not wrapped in parentheses, JavaScript misinterprets the syntax.
Example
const getUser = () => { name: "John", age: 30 };
// Uncaught SyntaxError: Unexpected token ':'
Fix
Wrap the object in parentheses.
const getUser = () => ({ name: "John", age: 30 }); // Works fine
5. Using import or export in a Non-Module Script
Cause
If you try to use ES6 module syntax (import or export) in a regular script, you get this error.
Example
import myFunction from "./module.js";
// Uncaught SyntaxError: Unexpected token 'import'
Fix
Ensure the script type is module.
<script type="module" src="script.js"></script>
6. Parsing HTML as JavaScript
Cause
If you accidentally load an HTML file as JavaScript, the < symbol in HTML tags can cause an “Unexpected token” error.
Example
<html>
<head>...</head>
<body>...</body>
</html>
// Uncaught SyntaxError: Unexpected token '<'
Fix
Ensure the correct file is being loaded, and check MIME types.
7. Reserved Keywords Misuse
Cause
Certain keywords like class, let, and function cannot be used as variable names.
Example
let function = "test"; // Uncaught SyntaxError: Unexpected token 'function'
Fix
Rename the variable.
let myFunction = "test"; // Works fine
8. Template Literals Misuse
Cause
If you use template literals (backticks `) incorrectly.
Example
let message = `Hello World"; // Uncaught SyntaxError: Unexpected token '"'
Fix
Use the correct syntax.
let message = `Hello World`; // Works fine
9. Object Property Name Issues
Cause
Property names without quotes must follow JavaScript naming rules.
Example
let obj = { 123name: "John" };
// Uncaught SyntaxError: Unexpected token '123name'
Fix
Use quotes or follow naming rules.
let obj = { "123name": "John" }; // Works fine
10. Misplaced await in Non-Async Function
Cause
The await keyword can only be used inside an async function.
Example
let data = await fetch("https://api.example.com/data");
// Uncaught SyntaxError: Unexpected token 'await'
Fix
Wrap it inside an async function.
async function fetchData() {
let data = await fetch("https://api.example.com/data");
}
fetchData(); // Works fine
Step 3: Debugging Techniques
- Check the Console – Open DevTools (
F12orCtrl+Shift+Iin Chrome) and go to the Console tab to see the exact error message. - Identify the Unexpected Token – Look at the character mentioned in the error message.
- Check Line Number and File – The error message includes the file and line number where the issue is.
- Use an Online JavaScript Linter – Tools like ESLint or JSHint help detect syntax errors.
- Use
console.log()for Debugging – If the error occurs dynamically, try logging values before the error.
Conclusion
The "Unexpected token" error in JavaScript is a syntax-related issue that can be caused by missing brackets, incorrect punctuation, invalid variable names, improper use of import/export, parsing HTML as JavaScript, or reserved keyword misuse. By carefully reviewing the syntax and following best practices, you can quickly debug and fix the issue.
Would you like me to review your code for this error?