Variables and Assignments

The basic building block in JavaScript is the variable. You declare variables using the var keyword, like this:

var foo;

JavaScript variables are type agnostic—they can hold data of any type, like a number or an object. Once you declare a variable, you assign it a value like this:

foo = 5;

The assignment operator, =, gives the variable to its left the value of the expression to its right. As shown, a variable can be given a literal value like a number. It can also be given the value of another variable, like this:

var foo, bar;

foo = 5;

bar = foo;

Notice that foo and bar are declared in the same statement. This is a convenience used to declare many variables at once. Also note that each statement ends with a semicolon; JavaScript doesn’t require this behavior but it’s a helpful convention that prevents ambiguity since it clearly marks the end of a statement. As statements get more complex, leaving out a semicolon may cause unintended consequences, so it’s best to include one at the end of each statement.

Data Types

There are five primitive types in JavaScript, as shown in Table 1.

JavaScript freely converts between data types as needed. Consider this statement:

var x = 1 + "2";

JavaScript first promotes the number 1 to the string "1" and then assigns the newly concatenated string "12" to x.

If you want to do a numeric addition, you must use the parseInt function. For example:

var x = 1 + parseInt("2", 10);

The second parameter is a radix value, and is guessed based on the number if omitted following the same rules as a number in C. (Numbers starting with 0x are hex, other numbers starting with 0 are octal, and all other numbers are base 10.)

Anything that is not a primitive type is an object. Primitive types are promoted to objects as needed, like this:

var message = "Hello World";

var firstCharacter = message.charAt(0);

JavaScript promotes the string "Hello World" to an object in order to call the charAt member function.

Conditional Statements

JavaScript includes conditional statements where enclosed code runs only if its preceding statement evaluates to a Boolean true value. A typical conditional statement starts with the if keyword and is followed by a statement to test, like this:

if ( variable == true)

{

   // code to execute when this statement is true

}

As in most C-like languages, true is equivalent to the number one (1) and false is equivalent to the number zero (0).

Within the brackets { ... }, you place the code to execute if the preceding statement is true. The statement itself needs to evaluate to a Boolean value, either true or false. Various operators are used to assemble conditional statements, as shown in Table 2.

Each if statement can also have a corresponding else statement, where the enclosed code is executed when the if statement evaluates to false, like this:

if ( variable == true)

{

    // code to execute when this statement is true

}

else {

    // code to execute when this statement is false

}

When you want to check a value versus a number of values, a switch statement is useful. In a switch statement, you provide a conditional statement or variable and cases to match the statement’s outcome or variable’s value, like this:

switch ( variable ){

    case 1: // code to execute when variable equals 1

            break;

    case 2: // code to execute when variable equals 2

            break;

    default: // code to execute when variable equals something other than the cases

             break;

}

Note that each case ends with a break statement and that the default case, if provided, is called if none of the cases are matched.

Iteration Using Loops

JavaScript provides structures for looping code while a condition is true. The most basic looping structure is the while loop, which executes code while a conditional statement equals true:

while ( variable == true )

{

     // code to execute while variable is true

}

A variation on the while loop is the do-while loop, which executes its code at least once before checking its conditional statement, like this:

do

{

    // code to execute while variable is true

}

while ( variable == true );

The final loop type is the for loop. It uses three statements: an initialization statement, a conditional statement, and a iterative statement, called every time the loop completes. The most common pattern of use calls for the first statement to initialize a counter variable, the second to check the counter’s values, and the third to increment it, like this:

for ( var i = 0; i < variable; ++i )

{

    // code to execute within this loop

}

Functions

JavaScript allows you to wrap code into a function that you can reuse anywhere. To create a function, use the function keyword, provide a name, and include a list of any variables you want to pass in:

function myFunction ( variableOne, variableTwo )

{

    // code to execute within this function

}

Functions can be declared and used anywhere within a block of JavaScript code. Variables that contain primitive values are passed into a function by value, whereas objects are passed in by reference. Functions can optionally return a value using the return keyword:

function myFunction ( variableOne )

{

    // code to execute within this function

    return variableOne;

}

Functions implicitly return undefined if you don’t supply a return value.

Functions can also be assigned to a variable, like this:

var myFunctionVariable = function ( variable )

{

    // code to execute within this function

}

Once a function is defined within a variable, it can be passed as an argument into any other function. Within the receiving function, you can call that function by placing parentheses after the variable’s name and optionally including arguments, like this:

function myFunction ( myFunctionVariable )

{

    myFunctionVariable( "aString" );

}

Other Special Characters

As in most C-like languages, JavaScript has various characters that allow you to connect multiple statements in useful ways. This section describes a few of them.

if (increment) { Q++; } else { Q--; }

// or

Q=increment ? Q+1 : Q-1;

alert('Increment: '+(increment ? "yes" : "no"));

for ( var i = 0; i < variable; ++i )

{

    // code to execute within this loop

}

var string = "The quick brown fox jumped over the lazy dog.";

var stringb = "This is a test.  This is only a test.";

for (var i=0, j=4; i<5; i++, j++) {

        alert('string['+i+'] = '+string[i]);

        alert('stringb['+j+'] = '+stringb[j]);

}