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 (;).
<\/p>\n\n\n\n
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.
<\/p>\n\n\n\n
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.
<\/p>\n\n\n\n
function errors(a){\n \n if(a > 5){\n return true\n } else {\n return false\n \/\/ missing closing curly bracket\n \n }\n \n console.log(errors(5))\n\/\/ Uncaught SyntaxError: Unexpected end of input<\/pre><\/div>\n\n\n\nfunction errors(a){\n \n if(a > 5){\n return true\n } else {\n return false\n }\n \n }\n\/\/ one bracket too many below\n} \n \n console.log(errors(5))\n\/\/ Uncaught SyntaxError: Unexpected token '}'<\/pre><\/div>\n\n\n\nThere 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.
<\/p>\n\n\n\n
Parentheses<\/h3>\n\n\n\n
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.
<\/p>\n\n\n\n
const errors = a, b => {\n if(a + b == 5){\n return "equals"\n } else if (a + b > 5 ) {\n return "greater"\n } else {\n return "less"\n }\n }\n \n console.log(errors(1, 2))\n\/\/ Uncaught SyntaxError: Missing initializer in const declaration<\/pre><\/div>\n\n\n\nYou need to enclose the parameters \u201ca\u201d and \u201cb\u201d inside a parentheses to write the syntax of the above function correctly.<\/p>\n\n\n\n
Commas<\/h3>\n\n\n\n
Forgetting commas in objects is another common syntax error trigger.
<\/p>\n\n\n\n
let student = {\n name: "John",\n age: 23\n location: "Remote"\n }\n \n console.log(student.name)\n\/\/ Uncaught SyntaxError: Unexpected identifier<\/pre><\/div>\n\n\n\nWe need a comma after every key value pair. The fix for the above would be putting a comma after 23.<\/p>\n\n\n\n
Semicolons<\/h3>\n\n\n\n
Forgetting semicolons where they are expected, like in for loops, are another common syntax error trigger.
<\/p>\n\n\n\n
let arr = [1, 2, 3, 4]\nfor(let i =0; i < arr.length i++){\n console.log(arr[i] * 2)\n}\n\/\/ Uncaught SyntaxError: Unexpected identifier<\/pre><\/div>\n\n\n\nMulti-lingual Syntax Confusion<\/h3>\n\n\n\n
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\u2019s own set of rules and be mindful of them when coding.
<\/p>\n\n\n\n
What\u2019s below would be a common syntax error thrown if Python were the developer\u2019s primary programming language.
<\/p>\n\n\n\n
let arr = [1, 2, 3, 4]\n \nfor(i in length of arr){\n console.log(arr[i] * 2)\n}\n \n\/\/ Uncaught SyntaxError: Unexpected identifier<\/pre><\/div>\n\n\n\nAs JavaScript developers, we code for loops in a different way.
<\/p>\n\n\n\n
let arr = [1, 2, 3, 4]\n \nfor(let i in arr){\n console.log(arr[i] * 2)\n}<\/pre><\/div>\n\n\n\n<\/h2>\n\n\n\n