While there are many possible errors made in JavaScript, these are the most common mistakes made in day-to-day use:
Writing embedded or inline JavaScript, rather than linked
We link JavaScript files for much the same reasons we write the majority of our CSS in an external style sheet: doing so separates behaviour from presentation, makes the code earlier to maintain, and allows the same script to be used on multiple pages without replication or redundancy. There are reasons for embedding your JavaScript code directly on a page, but doing so should be considered soberly.
Not delaying the execution of scripts
If you place JavaScript in the <head> section of your HTML document, the script will potentially start before any <body> content appears. This problem is frequently encountered by neophyte developers, who write JavaScript code before DOM content, creating conditions in which the script has nothing to work on, which leads to errors.
There are several possible ways to solve this problem. The first solution is the simplest: placing all your scripts at the very end of the document, just before the closing </body> tag. This guarantees that the script will execute after the body content has loaded… but you should read the last point in this list for an important exception.
Changing case in JavaScript
JavaScript is case sensitive. This is not only true of JavaScript code, but also of any variables or constants you create within it. tokenOne is a different variable from TokenOne. Scripts often break because you are trying to test or set the value of a variable that does not exist.
Confusing Concatenation & Addition
Concatenation is the joining of two or more strings. Addition is what you learned in school. In JavaScript both operators use the same + symbol to achieve their ends. It’s important to remember what you are joining together, how and why, and anticipate the result, in order to avoid errors:
In the console:
console.log(10 + 12);
> 22
console.log(10+"2");
> “102”
// note that this is a string, not a numeral
token = 2;
console.log(10 + token)
> 12
token = "Two";
console.log(10 + token);
> “10Two”Confusing single and double quotes
Single or double quotes can be used interchangeably in most JavaScript operations. This works out well until you get them confused: using one to start a string and the other quote form to end it, for example.
console.log('Two');
> Two
console.log("Two's");
> Two's
console.log('Two's');
// result is an errorConfusing the DOM with data
Placing your scripts at the end of the page gives you access to the entire DOM of the page: the page structure, elements and the text within them. But this doesn’t necessarily mean that you have all the data: for example, JavaScript will know that you have an image on the page, but will not have the actual pixel data of the image, or details like it’s width and height, as the image is still loading in the microseconds after the JavaScript has executed. Getting around that problem involves actually checking that the images have loaded completely in JavaScript.
Photograph by Vincent Moschetti, used under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic license
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
