SyntaxError is raised by nearly all programming languages. The main cause is the issue with standard language construct. In this article we will discuss about the Unexpected token error of syntax in JavaScript.
Reasons of error
Unexpected token means that there is something in the code which should not be there. For example, you have terminated a statement with semicolon before it’s completion. Or, you have added an extra comma.
Different kinds of Unexpected Token errors
There are multiple kinds of errors in this category. Some of them are –
- SyntaxError: expected expression, got “xyz”
- SyntaxError: expected property name, got “xyz”
- SyntaxError: expected target, got “xyz”
- SyntaxError: expected rest argument name, got “xyz”
- SyntaxError: expected closing parenthesis, got “xyz”
- SyntaxError: expected ‘=>’ after argument list, got “xyz”
Let’s check out each of them separately as to when they are thrown by JavaScript.
SyntaxError: expected expression, got “xyz”
This is a kind of Unexpected token error which appears in Firefox browser. Chrome still display unexpected token error only.
This error says that JavaScript interpreter is expecting an expression but got something else. Here is the code example –
for (let i = 0; i < 5,; ++i) {
console.log(i);
}
This code will throw the error because we have invalid syntax here – i < 5,;. We by mistake added a comma before semicolon. So, output will be –
Uncaught SyntaxError: expected expression, got ';'
Check this image –
The correct code is –
for (let i = 0; i < 5; ++i) {
console.log(i);
}
Another example for the same error is missing parenthesis. Check this code –
a = 5
b = 6
if (a < 10) && (a < b) {
console.log("a < 10 && a < b");
}
In this code we are comparing two statements using && in a if condition. But the problem is that we didn’t enclose them in parenthesis. Such expressions work in Python but not in JavaScript. So if (a < 10) && (a < b) broke just after (a < 10). This will raise expected expression error. So output will be –
Uncaught SyntaxError: expected expression, got '&&'
as shown in the below image –
The correct code will be –
a = 5
b = 6
if ( (a < 10) && (a < b) ) {
console.log("a < 10 && a < b");
}
SyntaxError: expected property name, got “xyz”
This error generally occurs when there is issue with associative array in JS, which are also known as objects. There could be multiple conditions and one of them is missing key in the object. Check out this code –
obj = {
abc: "xyz",
: 456
}
The output will be –
Uncaught SyntaxError: expected property name, got ':'
We got the error in this code because we mentioned no key for the value 256 in obj object. Check out this image –
The correct code will be –
obj = {
abc: "xyz",
def: 456
}
SyntaxError: expected closing parenthesis, got “x”
As the error states, if you forgot to add closing parenthesis in the expressions then you may encounter this syntax error. Check out this code –
a = 5
if(a == 5 {
console.log("value of a is 5");
}
The output will be –
SyntaxError: expected closing parenthesis, got "{"
The issue is that we didn’t close the parenthesis in if condition.
SyntaxError: expected ‘=>’ after argument list, got “xyz”
Arrow operator (=>) is an ES6 syntax used to define a function. The basic syntax is –
const function_name = (argument1, argument2) => {
// function body
}
SyntaxError: expected ‘=>’ after argument list is raised when you forget to use =>. Here is an example –
const addition = (a, b) {
return a + b
}
The output will be –
SyntaxError: expected '=>' after argument list, got "{"
To resolve this error we need to write the syntax correctly. So, the correct code will be –
const addition = (a, b) => {
return a + b
}
Conclusion
In this article we saw different conditions when we can get unexpected token syntax error. Depending on the browsers and their versions you can either get a simple unexpected token error or one of the more specific errors that are listed in this post.
