Top 10 JavaScript Errors - dummies

Part of Web Coding and Development Cheat Sheet

When you encounter a script problem, the first thing you should do is examine your code for the most common errors. To help you do that, here’s a list of the 10 most common errors made by both beginning and experienced programmers:

  • JavaScript keywords as variable names: JavaScript has many reserved words and keywords built into the language, so it’s common to accidentally use one of these words as a variable or function name. Double-check your names to make sure you’re not using any reserved words, or the names of any objects, properties, or methods.
  • Misspelled variables and other names: Check your variable and function names to make sure you spell them consistently throughout the script. Also, check the spelling of the objects, properties, and methods you use.
  • Misused uppercase and lowercase letters: JavaScript is a case-sensitive language, which means that it treats each letter differently depending on whether it’s uppercase or lowercase. For example, consider the following two statements:

var firstName = "Millicent";

var message = "Welcome " + firstname;

The first statement declares a variable named firstName, but the second statement uses firstname. This code would generate the error firstname is not defined (or something similar, depending on the browser) because JavaScript thinks that firstname is a different (and uninitialized) variable.

  • Mismatched quotation marks: In any statement where you began a string literal with a quotation mark (" or '), always check to make sure that you included the corresponding closing quotation mark at the end of the string. Also, check to see if you used one or more instances of the same quotation mark within the string. If so, edit the string to use the proper escape sequence (\" or \'), instead:

// This is illegal
var myString1 = "There are no "bad" programs.";

// This is legal

var myString2 = "There are no \"bad\" programs.";

  • Mismatched parentheses: Look for statements that contain a left parenthesis — ( — and make sure there’s a corresponding right parentheses — ). This also applies to square brackets — [ and ].

For complex expressions that include three or more sets of parentheses, a quick match-up check is to count the number of left parentheses in the expression, and then count the number of right parentheses. If these numbers don’t match, then you know you have a mismatch somewhere in the expression.

  • Missed parentheses after function names: Speaking of parentheses, if your script calls a function or method that doesn’t take any arguments, check that you included the parentheses — ( ) — after the name of the function or method:

function tryThis() {

alert("Parentheses travel in pairs!");


// This won't work

// This will


  • Improper use of braces: JavaScript uses braces to mark the start ({) and end (}) of statement blocks associated with functions, tests involving if() and switch(), and loops, including for(), while(), and do...while(). It’s very easy to miss one or both braces in a block, and it’s even easier to get the braces mixed up when nesting one test or loop inside another. Double-check your braces to make sure each block has both an opening and a closing brace.

One way to ensure that you don’t miss any braces is to position them consistently throughout your script. For example, many people prefer to use the traditional style for brace positions:

keyword {



(Here, keyword means the statement — such as function or if() — that defines the block.) If you prefer this style, use it all through your script so that you know exactly where to look for each brace.

An easy way to ensure that you never forget a closing brace is to enter it immediately after entering the opening brace. That is, you type {, press Enter twice, and then type }.

Also, use indentation consistently for the statements within the block. This makes it much easier to see the braces, particularly when you have one block nested within another.

  • Using = or == instead of ===: The identity operator (===) is one of the least intuitive JavaScript features because the assignment operator (=) feels so much more natural. The equality operator (==) can cause problems because it often converts the data types before making the comparison. Therefore, check all your comparison expressions to make sure you always use === instead of = or ==.
  • Conflicts between local and global variables: A global variable is available throughout the entire page, even within functions. So, within a function, make sure that you don’t declare and use a variable that has the same name as a global variable.
  • The use of a page element before it’s loaded: JavaScript runs through a page’s HTML one line at a time and checks the syntax of each JavaScript statement as it comes to it. If your code refers to an element (such as a form field) that JavaScript hasn’t come to yet, it generates an error. Therefore, if your code deals with an element, always place the script after the element in the HTML file.