info@themewerk.com

Javascript syntax errors: semicolons, quotation marks, camel case

Javascript is case sensitive and immediately ticks at wrong capitalization, but forgives small typos that would lead to compile errors in other programming languages: e.g. the missing semicolon at the end of statements.

The search for errors always costs more time than the programming.

The fact that Javascript forgives many small errors is not helpful. It is better to be strict about Javascript from the start.

If a script does not work as it was intended, the first look is the console of the browser.

The console shows syntax errors with the line number.

A console with access to the DOM is provided by every browser today. It is called up differently in each browser and the error messages can be different in the various browsers. Syntax errors can be found quickly in the Console, but the Console is also the most helpful tool for analyzing logic errors.

Upper and lower case

Javascript forgives many errors and is not particularly strict, but when it comes to case, Javascript has no mercy.

Javascript is a case-sensitive language – i.e. upper and lower case make a difference. let val; is a different variable than let Val;.

Such errors are easily overlooked: IF in upper case is not recognized by the Javascript interpreter:

IF (x == y) {
   ...

leads to an error in the program – it should read

if (x == y) {
   ...
}

Parentheses and quotation marks

Javascript does not forgive the absence of an opening or closing parenthesis, not even the absence of an opening or closing apostrophe.

Against this source of error a program editor with syntax highlighting helps, which recognizes the key words of the programming language and highlights them.

Opinions are divided on the curly braces for statement blocks: Opening brace on the right or on the left?

block             
{                     
   …                   
}

Used in many programming languages flawlessly, will work

 block {                        
   …    
}

Works properly in javascript

Opening curly braces always on the left works fine in many programming languages and is also often recommended as the default notation.

In Javascript, a curly bracket on the left can lead to silent errors.

Javascript sets semicolons automatically – and from time to time in the wrong place.

Camel Case: Hyphens are minus signs

The names of Javascript variables must not contain a hyphen, otherwise there is a syntax error, because the hyphen is interpreted in Javascript as a minus. The programming conventions for Javascript therefore state: Compound variable names are written as camel case.

With the camel case the hyphen is omitted and the word after the hyphen starts with a capital letter: camelCase instead of camel-case, mainTitle instead of main-title.

Blank characters and line breaks

Javascript is quite insensitive to empty characters and line breaks. So the code may be nicely arranged to make it easy to read.

But the line break within the string creates a syntax error.

As a rule, a Javascript statement should be on one line, but a line break makes long statements more readable.

Always remember that Javascript puts the semicolon at the end of a line itself.

The Semicolon

Javascript statements are terminated with a semicolon. If there is a line break at the end of a statement, Javascript tries to insert the semicolon itself if the programmer did not set one.

At the end of a curly bracket Javascript does not need a semicolon.

A semicolon at the end of a curly bracket creates an additional empty statement. This itself is not a bad thing and does not result in an error message, but uses a full cycle to do nothing.

Even if the semicolon at the end of regular statement may be omitted in Javascript: It is better to always put a semicolon.

Javascript comments

Comments in Javascript look like comments in Java or PHP.

A single-line comment is indicated by a double slash // at the beginning of the line.

A comment over several lines starts with /* and ends with */.

Literals

A literal is a data value that is literally written in the program, e.g. the string “Hello world” or the number 42. String literals must be enclosed in quotation marks and the same type of quotation mark must be placed at the beginning of the string as at the end of the string. Quotation marks at the bottom and top (smart quotes) are not allowed.

Keyword literals such as null or true are not placed in quotation marks.

“use strict”;

The strict mode for Javascript came with ECMAScript 5. With “use strict”; (in double quotation marks!) at the beginning of a script or in a function Javascript becomes stricter and throws more exceptions. For example Javascript requires the agreement of variables with var, let or const.

If you check your scripts with JSLint, you have to prepend “use strict”; always. And the regular syntax check with JSLint is worthwhile. It leads bit by bit to automatically better Javascript. JSLint already complains if the usual indentation in functions is omitted or if functions are called before they are defined: There is nothing like nicer code. Of course you don’t have to follow JSLint to the last detail!

Top