JavaScript SyntaxError

Syntax are rules that dictate how programming languages should be written. Each language has its own set of syntax rules different from others. We can think of them like grammar or punctuation in spoken languages. The question mark in English (?) differs from the question mark in Greek (;).

You can deduce that when you get a syntax error, you are writing the programming language incorrectly. You may either be omitting something accidentally or accidentally using syntax from a different language, which is something that often occurs as developers grow their tech stack.

Common Syntax Errors and How to Fix Them

Brackets

Missing or having an overflow of brackets are a cause for common syntax errors. One short bracket can result in a syntax error of an unexpected end of input, one too many can result in an unexpected token.

function errors(a){
 
    if(a > 5){
      return true
    } else {
      return false
    // missing closing curly bracket
  
  }
  
  console.log(errors(5))
// Uncaught SyntaxError: Unexpected end of input

function errors(a){
 
    if(a > 5){
      return true
    } else {
      return false
    }
  
  }
//   one bracket too many below
} 
  
  console.log(errors(5))
// Uncaught SyntaxError: Unexpected token '}'

There are several extensions available in VS Code and other text editors that can help you keep track of matched and mismatched brackets to prevent these errors from being thrown. The error in the console will also state what line in the code the error occurs.

Parentheses

Like brackets, sometimes it can be hard to follow a match to a closing parentheses, or where a parentheses may be needed, like in the parameters of arrow functions.

const errors = a, b => {
    if(a + b == 5){
      return "equals"
    } else if (a + b > 5 ) {
      return "greater"
    } else {
      return "less"
    }
  }
  
  console.log(errors(1, 2))
//   Uncaught SyntaxError: Missing initializer in const declaration

You need to enclose the parameters “a” and “b” inside a parentheses to write the syntax of the above function correctly.

Commas

Forgetting commas in objects is another common syntax error trigger.

let student = {
    name: "John",
    age: 23
    location: "Remote"
  }
  
  console.log(student.name)
//   Uncaught SyntaxError: Unexpected identifier

We need a comma after every key value pair. The fix for the above would be putting a comma after 23.

Semicolons

Forgetting semicolons where they are expected, like in for loops, are another common syntax error trigger.

let arr = [1, 2, 3, 4]
for(let i =0; i < arr.length i++){
  console.log(arr[i] * 2)
}
// Uncaught SyntaxError: Unexpected identifier

Multi-lingual Syntax Confusion

It is very common for developers to use syntax from a different language in JavaScript, either intentionally or by mistake. It is important to become familiar with JavaScript’s own set of rules and be mindful of them when coding.

What’s below would be a common syntax error thrown if Python were the developer’s primary programming language.

let arr = [1, 2, 3, 4]
 
for(i in length of arr){
  console.log(arr[i] * 2)
}
 
// Uncaught SyntaxError: Unexpected identifier

As JavaScript developers, we code for loops in a different way.

let arr = [1, 2, 3, 4]
 
for(let i in arr){
  console.log(arr[i] * 2)
}

Conclusion

It is important to understand the different types of errors thrown when we make them. Syntax errors are errors identifying a grammar or punctuation issue in the programming language. Oftentimes the errors will let us know what line to check in order to correct the mistake.