JavaScript tutorial - Semicolons

Navigation

Skip navigation.

Site search

Site navigation

JavaScript tutorial

Printing

Other tutorials

Semicolons

For use of the semicolon in the 'for' loop, see the section on control structures.

If you have managed to get through this whole thing and still not worked out where to put semicolons, here's how to work out where to put them. The basic idea of semicolons is to tell the browser that you have just finished a command. You actually don't need them at all if you put each instruction on a different line (with some exceptions discussed below) but it is good practice to put them in anyway.

It is easier to remember where not to put them. Don't put them immediately after a { or } except when creating objects with the {} syntax or functions with the name = function () {} syntax. Don't put them on an otherwise blank line. Do not put two in a row. If you write a command or instruction, you should put a semicolon.

These are examples of where you should put a semicolon:

And these are examples of where you should not put a semicolon:

There are some situations where it is very important to include a semicolon before a line break, even though it may appear to be optional. These occur when the command ends with a variable or function reference, and the first character in the next command is a left parenthesis or square bracket:

var b = 7
var a = 3 + b
(otherwindow?otherwindow.document:document).write('complete')

What will happen is that the JavaScript engine will assume the parenthesis or square bracket relates to the previous command instead of being a new command, and will attempt to run the previous command as a function (or reference its properties in the case of square brackets), and will pass it the result of the expression inside the parentheses as a parameter to it. That makes it equivalent to this:

var b = 7
var a = 3 + b(otherwindow?otherwindow.document:document).write('complete')

That could also be expressed as this:

var b = 7
var foo = otherwindow?otherwindow.document:document
var bar = b(foo)
var a = 3 + bar.write('complete')

In this case, it will produce errors, but there are some cases where it can, in fact, produce a real output, that is meaningless, and the problem is very hard to track down. There are also many other less obvious situations where the same effect can occur without even appearing to be a variable reference on the preceding command (such as where the previous command was assigning an anonymous function to a variable). For this reason, it is useful to always use semicolons when they are optional, as it removes the ambiguity:

var b = 7;
var a = 3 + b;
(otherwindow?otherwindow.document:document).write('complete');

The basic way the script interpreter works is that if there is no semicolon, it will continue scanning the next line, and if it sees something at the start of it that cannot possibly be a part of the command on the previous line, then it will assume you forgot to insert a semicolon, and it will effectively put one there for you. If it can be part of the last command, it will assume it is part of the last command. Operators and property references are an obvious example of what will be allowed to continue the last command.

This can sometimes be used to your advantage, to keep things neat and readable. However, it can also trip you up if you are unprepared for it, as shown above. As an example of this being taken to the extreme, take the following code, which uses no semicolons at all, and lets the script interpreter attempt to work out where the commands start and end:

<p>I</p>
<script type="text/javascript">
var
myP
=
document
.
//comment
getElementsByTagName

/* another
comment */
(
'p'
)
[
0
]
.
innerHTML
+
' was '
alert
(
myP
+
[
'here'
,
'there'
]
[
0
]
)
</script>

Functionally, that is identical to this:

<p>I</p>
<script type="text/javascript">
var myP = document.getElementsByTagName('p')[0].innerHTML + ' was ';
alert( myP + ['here','there'][0] );
</script>

Last modified: 23 September 2009

  1. Previous
  2. Next
This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.