The error SyntaxError: Unexpected token occurs when JavaScript encounters code that doesn't follow the language syntax rules. This is a parse-time error, meaning the code won't even run.
// ⌠Problem - Missing closing brace
function greet() {
console.log('Hello');
// SyntaxError: Unexpected end of input
// ✅ Solution - Add closing brace
function greet() {
console.log('Hello');
}
// ⌠Problem - Missing comma
const user = {
name: 'John'
age: 30 // Missing comma
};
// ✅ Solution - Add comma
const user = {
name: 'John',
age: 30
};Forgetting to close brackets, braces, or parentheses.
Forgetting commas between object properties or array elements.
Using JavaScript reserved keywords as variable names or in wrong context.
Incorrect arrow function syntax.
Incorrect template literal syntax.
// Missing closing brace
function calculate(a, b) {
return a + b;
// SyntaxError: Unexpected end of input
// Missing closing bracket
const numbers = [1, 2, 3, 4;
// SyntaxError: Unexpected token ';'
// Missing closing parenthesis
if (x > 10 {
console.log('Greater');
}
// SyntaxError: Unexpected token '{'// Add closing brace
function calculate(a, b) {
return a + b;
} // ✅
// Add closing bracket
const numbers = [1, 2, 3, 4]; // ✅
// Add closing parenthesis
if (x > 10) { // ✅
console.log('Greater');
}
// Use IDE with bracket matching
// Most editors highlight matching brackets// Missing comma in object
const user = {
name: 'John'
age: 30 // SyntaxError: Unexpected identifier
};
// Missing comma in array
const colors = [
'red'
'blue' // SyntaxError: Unexpected string
'green'
];// Add commas in object
const user = {
name: 'John', // ✅
age: 30
};
// Add commas in array
const colors = [
'red', // ✅
'blue', // ✅
'green'
];// Using reserved keyword as variable
const class = 'Math'; // SyntaxError: Unexpected token 'class'
const function = 'test'; // SyntaxError: Unexpected token 'function'
// Using await outside async function
function getData() {
const data = await fetch('/api'); // SyntaxError in non-async function
}// Use different variable names
const className = 'Math'; // ✅
const functionName = 'test'; // ✅
// Use async function for await
async function getData() {
const data = await fetch('/api'); // ✅
return data;
}// Missing arrow
const add = (a, b) { return a + b; }; // SyntaxError
// Wrong arrow syntax
const multiply = (a, b) > a * b; // SyntaxError
// Missing parentheses for multiple parameters
const divide = a, b => a / b; // SyntaxError// Add arrow =>
const add = (a, b) => { return a + b; }; // ✅
// Or implicit return
const add = (a, b) => a + b; // ✅
// Correct arrow syntax
const multiply = (a, b) => a * b; // ✅
// Add parentheses for multiple parameters
const divide = (a, b) => a / b; // ✅
// Single parameter doesn't need parentheses
const square = x => x * x; // ✅// Using regular quotes instead of backticks
const name = 'John';
const message = 'Hello ${name}'; // Doesn't interpolate
console.log(message); // "Hello ${name}"
// Missing closing backtick
const text = `Hello
World; // SyntaxError: Unexpected token
// Wrong interpolation syntax
const greeting = `Hello $name`; // Doesn't interpolate// Use backticks for template literals
const name = 'John';
const message = `Hello ${name}`; // ✅
console.log(message); // "Hello John"
// Close backtick properly
const text = `Hello
World`; // ✅
// Use ${} for interpolation
const greeting = `Hello ${name}`; // ✅This error occurs when JavaScript encounters code that doesn't follow syntax rules. Common causes include missing brackets/braces, missing commas, using reserved keywords incorrectly, or invalid arrow function syntax.
Read the error message to find the exact location, check for missing brackets or commas, ensure proper syntax for arrow functions and template literals, and use an IDE with syntax highlighting.
This usually means there's a missing closing parenthesis before the brace, or incorrect syntax in the previous line. Check if statements, function calls, and arrow functions for proper syntax.
Use a modern IDE with syntax highlighting, enable ESLint for real-time error detection, use Prettier for auto-formatting, and learn JavaScript syntax fundamentals.
Reserved keywords include: class, function, const, let, var, if, else, for, while, return, await, async, etc. These cannot be used as variable names.
Explore 500+ free tutorials across 20+ languages and frameworks.