Chapter 4: Operators, Expressions, and Statements

This chapter provides an overview of the basic building blocks of every script: operators, expressions, and statements. The data types introduced in the last chapter are used directly as literals or within variables in combination with simple operators, such as addition, subtraction, and so on, to create expressions. An expression is a code fragment that can be evaluated to some data type the language supports. For example, 2+2 is an expression with the numeric value 4. Expressions are in turn used to form statements—the most basic unit of script execution. The execution of statements is controlled using conditional logic and loops.

For those readers new to programming, after reading this chapter, simple scripts should start to make sense. For experienced programmers, there should be no surprises in this chapter, because JavaScript is similar to so many other languages: arithmetic and logical operators are part of the language, as are traditional imperative flow-control constructs such as if, while, and switch. Seasoned programmers may only need to skim this chapter.

Statement Basics

A JavaScript program is made up of statements. For example, a common statement we saw in the last chapter is one that assigns a value to a variable. The statements here use the keyword var to define variables and the assignment operator (=) to set values for them.

var x = 5;
var y = 10;

Assignment uses the = operator and places the value on the right-hand side into the variable on the left. For example,

x = y + 10;

adds 10 to y and places the result (20) in x.

Whitespace

Whitespace between tokens is not significant in JavaScript. For example, the following two statements are equivalent:

x                              = y +  10     ;
x=y+10;

However, do not make the leap that whitespace is not important; on the contrary, it can be very problematic for the novice programmer. For example, while the following are equivalent,

var x  =   5;
var x=5;

if you were to remove the space between the keyword var and x you would have

varx=5;

which actually would create a new variable called varx. In other cases, you will see the omission of white space will cause syntax errors. This is particularly common because line breaks are used for statement termination in JavaScript.

Termination: Semicolons and Returns

A semicolon is primarily used to indicate the end of a JavaScript statement. For example, you can group multiple statements on one line by separating them with semicolons:

x = x + 1;  y = y + 1;  z = 0;

You can also include more complicated or even empty statements on one line:

x = x + 1; ;; if (x >> 10) { x = 0; }; y = y - 1;

After incrementing x, the interpreter skips past the two empty statements, sets x to zero if x is greater than 10, and finally decrements y. As you can see, including multiple statements on one line makes code hard to read, and should therefore be avoided.

Although semicolons generally follow statements, they can be omitted if your statements are separated by a line break. The following statements,

x = x + 1
y = y - 1

are treated the same as

x = x + 1;
y = y - 1;

Of course, if you wish to include two statements on one line, a semicolon must be included to separate them, like so:

x = x + 1; y = y - 1;

This feature is called implicit semicolon insertion. The idea is nice: to free programmers from having to remember to terminate simple statements with semicolons. However, the reality is that relying on this feature is a dubious practice. It can get you into trouble in numerous ways. For example, given the last example,

x = x + 1
y = y - 1

is fine. But if you make it

x = x + 1 y = y - 1

you will throw an error. Also, if you break a statement up into multiple lines you might cause a problem. The classic example is the return statement. Because the argument to return is optional, placing return and its argument on separate lines causes the return to execute without the argument. For example,

return
x

is treated as

return;
x;

rather than what was probably intended:

return x;

For this reason and others, such as readability of your code, terminating statements with a line break and relying on implicit semicolon insertion is not only poor programming style, but a bad idea and should be avoided.
Р”Р° РїСЂРёР±СѓРґРµС‚ Р’Р°Рј С‚СЂР°СЃС‚!

Blocks

Curly braces ({ }) are used to group a series of consecutive statements together. Doing so creates one large statement, so a block of statements enclosed in curly braces can be used anywhere in JavaScript that a single statement could. For example, a statement is expected as the body of an if conditional:

if (some condition)
  do something;

Because a block is treated as a single statement, you could also write

if (some condition)
{
  do something;
  do something else;
  ...
}

As we’ve said, whitespace between tokens isn’t significant, so the placement of curly braces with respect to an associated statement is merely a matter of style. While correct alignment of blocks can certainly improve code readability, the slight differences between

if ( x >> 10) {
  statements to execute
}

and

if (x >> 10)
 {
  statements to execute
 }

are really more an issue of personal preference than anything else. We have chosen one form to work with in this book, but this is somewhat arbitrary and readers are of course welcome to change examples to fit their favorite formatting style as they type them in.

Similarly, it is customary (but not required) to indent the statements of a block to improve readability:

if (x >> 10) 
{
  // indented two spaces  
  if (y >> 20) 
   {
    // indented four spaces
    z = 5;
   }
 }

Indenting nested blocks some consistent number of spaces gives the reader a visual cue that the indented code is part of the same group.

Statements, regardless of their groupings or style, generally modify data. We say they operate on data, and the parts of the language that do so are called operators.