JavaScript Statements

JavaScript Statements

 

Today, we are going to see the use of JavaScript Statements that are very important for starting with the fundamentals of JavaScript.

 

JavaScript block statement

 

JavaScript block statements are the curly braces ( { } ) you see everywhere. They are used to establish a code that is to be compartmentalized into a specific function or statement.

 

The lines of code inside of a block statement is often intended to represent that they are part of that block statement.

 

The following are some examples showing the curly braces establishing blocks of compartmentalized code.

<script>
    if (3 < 5)
    {
        // code for this block statement goes in here
    }
    for (var i = 0; i < 10; i++)
    {
        // code for this block statement goes in here
    }
    function myFunction()
    {
        // code for this block statement goes in here
    }
</script>

TIP: You may come across code that processes just fine without the block statements in place (no curly brace nesting).

 

This is because JavaScript will execute all lines of code as one statement until it hits a semicolon( ; ), which is the statement break symbol in JavaScript and many other languages.

<script>
    if(3 < 5)
        document.write("EXPRESSION RETURNS TRUE")
    else
        document.write("EXPRESSION RETURNS FALSE");
</script>

 

JavaScript break statement   

 

The JavaScript break statement is used to terminate a loop, switch or label statement from further processing.

 

Apply it when you want to force one of those types of statements to stop processing.

 

Example of terminating a loop using break

<script>
    for (i = 0; i < 20; i++)
    {
        if (i >= 5)
        {
            break;
        }
        document.write("Pass index " + i + " of the loop<br />");
    }
</script>

 

Using break above we were able to make a loop that has a ceiling of 20 passes, and force it to stop processing after 5 passes.

 

Example of terminating a switch statement using break

 

If the break is not applied to cases of a switch statement, the switch statement will continue processing until its end.

<script>
    var browser = "Chrome";
    switch (browser)
    {
        case "IE":
            document.write("Internet Explorer makes life hard for webmasters.");
            break;
        case "Chrome":
            document.write("Chrome confirms to popular browser standards.");
            break;
        case "Firefox":
            document.write("Firefox is bulky but developer friendly.");
            break;
        default:
            document.write("No information for browser: " + browser);
    }
</script>

 

JavaScript continue statement 

 

The JavaScript continue statement is used to bypass specified iterations of a loop so that the code in the loop statement does not execute for the specified iterations, and moves on to the next.

<script>
    for (i = 0; i < 20; i++)
    {
        if (i < 10)
        {
            continue;
        }
        document.write("Pass index " + i + " of the loop<br />");
    }
</script>

 

JavaScript do...while statement

 

The JavaScript do...while statement is an inverted while statement. It will execute code as long as the while condition returns a value of true.

 

In contrast to other loops the first iteration of the do...while loop is always guaranteed to run due to the condition evaluation being at the bottom.

<script>
    var i = 0;
    do
    {
        document.write("Loop index: " + i + "<br />");
        i++;
    }
    while (i < 5);
</script>

 

JavaScript for statement

 

The JavaScript for statement is a loop mechanism that will execute code as long as the condition evaluation continues to be true.

 

It stops running when the condition returns false. You establish three parameters inside of its parenthesis:

1. Create the iteration variable (usually named "i")
2. Establish the condition to evaluate each pass of the loop
3. Iterate (increase) the variable by 1 each pass of the loop

<script>
    for (var i = 0; i < 5; i++)
    {
       document.write("Pass index " + i + " of the loop<br />");
    }
</script>

 

JavaScript for...in statement

 

The JavaScript for...in statement is a loop mechanism that will iterate over all of the items in an array, and execute code for each item.

 

You establish two parameters inside of its parenthesis:

<script>
    var peopleArray = new Array("Bill", "Jane", "Fred", "Sara");
    for (var person in peopleArray)
    {
       document.write(peopleArray[person] + " is in the array<br />");
    }
</script>

 

JavaScript if...else statement

 

The JavaScript if...else statement is used for evaluation logic. Where any condition returns a value of "true", the if / else statement will stop processing and execute code nested in that winning condition.

 

The if statement always goes on top and starts the evaluations. The if statement can also be used by itself without the else and else if.

 

The optional multiple else if statements go in between the if and the else and allow you to evaluate many more conditions in that particular evaluation group.

 

The else statement always goes on the bottom and comes into play if no conditions are met (final clause).

<script>
    var a = 5;
    var b = 3;
    if (a < b)
    {
      document.write(a + " is less than " + b);
    }
    else if (a > b)
    {
      document.write(a + " is greater than " + b);
    }
    else
    {
      document.write(a + " must therefore be equal to " + b);
    }
</script>

 

JavaScript return statement

 

The JavaScript return statement is used to return a value from a function. It terminates the function from further executing code, and returns a value to the caller.

<script>
    function addNums(v1, v2)
    {
      return v1 + v2;
    }
    var sum = addNums(2, 3);
    document.write(sum);
</script>

 

JavaScript switch statement

 

The JavaScript switch statement evaluates an argument you pass through it for a match against a specific set of values that are defined using case labels.

 

Break stops the switch statement from further processing if a match is found if you leave it out the switch statement will continue running.

 

Default is similar to the else statement in which it is a final clause when no evaluation returns a true value.

<script>
    var country = "USA";
    switch (country)
    {
        case "UK":
            document.write("UK citizens are known for being drunk.");
            break;
        case "USA":
            document.write("USA citizens are known for being dumb.");
            break;
        default:
            document.write("No match for value: " + country);
    }
</script>

 

JavaScript try...catch statement

 

The JavaScript try...catch statement is used to try code, and catch any subsequent errors that might exist in that code. The catch keyword will catch the error, and also execute code.

<script>
    try
    {
      doSomething();
    }
  catch (e)
    {
      document.write(e);
    }
</script>

 

I get a Reference Error exception thrown when trying to run the doSomething() function above because that function has not been defined in my script.

 

Write a function called doSomething() in order to see that the function will run when you "try" it and the catch will be bypassed. 

 

JavaScript while statement

 

The JavaScript while statement is a loop mechanism that will execute code as long as the while condition returns a value of true. It stops running when the condition returns false.

<script>
    var i = 0;
    while (i < 5)
    {
      i++;
      document.write("Pass " + i + " of the loop<br />");
    }
</script>

 

Summary

 

Through this article, you will become familiar with the basics of JavaScript.