How to fix - syntax error unexpected identifier

Facebook Tweet LinkedIn

The “SyntaxError: Unexpected identifier” is a JavaScript error that will appear when there is an unexpected encounter with a token, most often an identifier, in the JavaScript engine. Usually, this type of mistake is an indicator that there is a wrong or missing keyword or other syntax mistake in the code.

It is important to understand that this error has two parts. The first, SyntaxError, is a JavaScript reference to a structural problem in the code caused by the syntax. The second part, Unexpected identifier, is an indication that the JavaScript engine had found an identifier, this could include a function name, variable name, or other name defined by the user, in a location that it was not expecting to locate.

Example:

console.log('Lets replicate the ERROR')

var 1number = 100; // Error: unexpected identifier

Output:

index.js:3
var 1number = 5; // Error: unexpected identifier
    ^^

SyntaxError: Invalid or unexpected token
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

Due to the nature of this problem, and the information given by the error, there are several steps that you will need to take to be able to deal with this issue. These are not necessarily ordered steps but rather different aspects of your code that you need to check to solve the issue.

Check for Typographical Errors

Perhaps one of the most common reasons for this error is a small typographical error at some part of your code. These typos could in essence result in your engine trying to read something that is not there, causing it to have an error.

// Incorrect variable name

let varibaleName = "Hello";

Wrong characters

Similarly, apart from checking for any possible typos in the way you have written out your code, you should also take the type check all of your syntax elements, including parentheses, braces, quotes, and brackets, as missing elements or pairs of elements could lead to your engine being unable to properly go through your code.

Example: If you miss a semi-colon for each line of code. Here variable declaration didn’t have a colon will cause a syntax error

let x = 5
console.log(x);

Code Editors

If you have gone through your code but have not been able to find any syntax issues on your own, then it is always a good idea to use a syntax error as it will help highlight every syntax element pair to you. This could draw your eyes to any highlighted errors that you might have previously missed.

List of code editors that are commonly used in Javascript

Visual Studio Code (VS Code)

Sublime Text:
Atom:
WebStorm:

Brackets:
Emacs:
Vim:

Check all Code close to the Error Line

This particular error will usually show you which code line the error appeared in, however, that does not mean you should exclusively be looking for a syntax error in that line. It is often the case that the error might have occurred in one of the lines preceding the error line. Therefore, after checking the error line for types and wrong characters, complete the same process for the lines of code preceding it until you can locate the error.

Check Variable, Function, and Object Literal Declarations.

When dealing with identifiers you will need to make sure that all the variable names, function names, and object literals are properly declared without any missing braces. It is also a good practice to not use numeric characters as identifiers as these can be easier to make a mistake with.

We can have a line of code to debug, If the Variable, Function, and Object Literal are declared without any issues using “typeof“

Example: To check Function and can be used for variable, object literals

function myFunction() {
  return "Hello";
}

if (typeof myFunction === 'function') {
  console.log("myFunction is declared.");
} else {
  console.log("myFunction is not declared.");
}

Output:

myFunction is declared

if you have any typo or issue in the function, you will get an output as “myFunction is not declared.”

Double-check compatibility

Compatibility of the ECMAScript version you are using, if you are using one, could also lead to an error with the identifiers, therefore double-check that your environment supports all of the features that you have been using.

Appropriate Naming Conventions

Finally, when writing and checking your function and variable naming conventions you will want to make sure that you are following the appropriate naming conventions and are not using any numbers at the start of your names. Special characters should also be avoided.

// Variable name starting with a number

let 1stNumber = 5;

Conclusion

With the seven tips mentioned above you should be able to better understand and find where the syntax errors in your identifiers are. While this process could take some time, if you follow each step, you will be able to go through your code faster and locate the problems you need to fix.

Happy Learning !!

Author
Recent Posts

Follow me

Jerry Richard

Cloud Premier Engineer at Cloudera

Jerry grew up in a small town where he enjoyed playing video games. Once out of the nest, he pursued a Bachelor's degree in Computer Engineering. After college, he ultimately landed in the IT industry. Currently, he has over 10 years of experience. In his spare time, Jerry enjoys spending time with his family.

He is creator of this website - unexpectedendoffile.com, A website dedicated to share the mistake and experience learned.