If a JavaScript program is syntactically incorrect, the interpreter will show a relevant message and a message showing the file and line where the error might have occurred. Syntax errors occur when the code has grammatical mistakes. Grammar is essential to human language, but a text with grammar mistakes can still be read and understood. However, when it comes to programming, things are much more strict. Even a tiny mistake can mean your program won't run. Maybe you've mixed up your brackets, or there's a ; that you forgot to add — these are just some examples of such mistakes.
Here is an example of some code with a syntax error:
console.log('Hodor'
If we run this code we will see the following message: SyntaxError: missing ) after the argument list. In JavaScript, these errors are labelled as "SyntaxError".
On the one hand, syntax errors are the most obvious because they deal with code grammar rules and have nothing to do with its logic. You can easily fix it once you find it.
On the other hand, an interpreter will not always tell you the correct position of an error. Sometimes you need to add a forgotten bracket to different place than what the error message says.
Linting errors
Since we've learned to write simple programs, let's talk about the very process of writing.
The program code should be organized in a certain way so that it is sufficiently clear and easy to maintain. Special sets of rules - standards - describe different aspects of code writing. The most common standard in JavaScript is AirBnb.
In any programming language, there are utilities known as linters. They ensure the code meets the standards. For example, ESLint analyzes JavaScript code.
Take a look at the example from the previous lesson:
console.log(8/2+5 - -3 / 2); // => 10.5
Linter won't be happy about it, because several rules have been violated:
- space-infix-ops – No space between operator and operands
- no-mixed-operators – You can't write code that contains multiple operations in a single expression with no explicit parentheses separation
In the last lesson we recognized that such an abundance of numbers and symbols may be confusing and we decided to add parentheses purely for the sake of readability:
console.log(((8 / 2) + 5) - (-3 / 2)); // => 10.5
This code does not violate the rules, and the linter will "say nothing" as it were.
In previous exercise you probably did this:
console.log(70 * (3 + 4) / (8 + 2));
Is there any violation of the standard here?
Unfortunately, yes. This time, the * and / are in the same expression and there are no parentheses. You can solve this problem by adding additional parentheses. But at some point, too many parentheses can make the code incomprehensible again. At this point, you can divide the expression into separate parts. We will learn how to do this in the following lessons.
no-mixed-operators is just one of many rules. Other ones describe indentations, entity names, parentheses, mathematical operations, line length, and many other aspects. Each rule may seem small and insignificant, but together they form the basis of good code.
On Hexlet, the linter checks your code and reports violations after you purchase subscription.
