Learn your way!

JavaScript Loops and Conditionals

Javascript Conditionals

What are JavaScript Conditionals

JavaScript conditionals are statements that are to alter the control flow based on a condition.  An example of a condition is a Boolean value of true or false.  This can easily be used in the traditional IF statement.

IF Statements

To test if a value is true or false in a single IF statement you can do an equality check.  To do an equality check you would normally use the double equals (e.g., ==) in a condition like this:

   if (value == true) {

    // If the value is equal to true run the statement within the braces

   }

Equality logical operator (e.g., ==) is considered a loose equality check, while a triple equals (e.g., ===) is strict.
Strict equality is strict because it checks if the operands are of the same type and if the contents match.
But the equality logical operator (e.g., ==) will convert the operands to the same type and then check if their contents match.


if (value1 == value2) {

// the equality logical operator will convert the values to the same type and check if the contents match.

}

if (value1 === value2) {

// Not only does the content have to match here, but the object type does as well.

}

If-Else Statements

When you need statements to execute not just if the conditions are met, but when they are not met as well. That’s when you would use the IF-Else control.  For example:


if (value == true) {

// This statement block will is ran if value == true

} else {

// If value equals false then this block of statements is ran.

}

This means that you can have blocks of code executing based on if a conditional is true or false.

If-Then-Else Statements

If that’s not enough you can add more if statements to the original one, which removes the limit of just to 2 outcomes.

if (value1 == true) {
   //  Run this block of code if value1 is equal to true

} else if (value2 == true) {

   // If value1 does NOT equal true but value2 is true, run this block of code.

} else {

   // Otherwise if value1 or value2 do not equal true run this block of code.

}

Switch Statements

A switch statement evaluates an expression based on a case-cause value evaluation.


switch (expression) {

case value1:

// Execute statement

break;

case value2:

// Execute statement

break;

}

The expression is compared to the case values one by one from top to bottom.  If the expression matches one of the values, it will execute the statements below it.  It will continue to execute until it reaches a break statement or the end of the switch statement.  It is common to have a break statement after each case clause to stop execution of code.

What are JavaScript Loops

Loops are a block of statements repeated until a certain condition is met.  It’s a great way to iterate over an array of objects.  There are many ways of looping in JavaScript:

For Loop

The basic for loop statement has an initialization, condition and statement.  Here’s an example of a for loop:


for (initialization; condition; statement) {

// Execute statements

}

Initialization

A for loop needs an initialization, meaning a starting point.  The starting point, for our example will be a variable named i with a value of 0.  Over the course of the loop the value of i will change based on the statement:


for ( var i = 0; condition; statement) {

  // Execute statements

}

Condition

Now let’s add a condition to the loop.  A condition is used to determine on when to stop the loop.  In our example below, the loop should keep going as long as the value of i is less than 5.  Right now, i is 0 and it’s staying zero so the loop won’t end.


for (var i = 0; i < 5; statement) {

// Execute code

}

Statement

Let’s fix that statement so it’s a little clearer.  The statement will alter the value of i so at some point during the loop the variable i (e.g., i < 5) will equal 5 or greater.


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

// Execute code

}

Now we have a complete loop that will execute the same code for 5 times.  The statement uses the increment operator on i, and it will add 1 to i every time the loop runs the code.


// These are i's values through the for loop

i = 0;

i = 1;

i = 2;

i = 3;

i = 4;

i = 5;

When i equals 5 that’s when the for loop will stop executing.  That happens when the condition (i < 5) does not equal true anymore.

While Loops

he while loop is another common loop that is used.  It’s different then the for loop because it only has a condition to test and nothing else.

while (condition) {

// execute code

}

var i = 0;

while ( i < 5) {

// Execute code

i++;

}

It still can work the same way as the for loop.  The Initializer is outside the while loop and the statement is within the block of code.

Break and Continue Statements

Breaks are a great way to stop execution of a loop even if conditions are still true.


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

 if (i == 2) { break; }

}

When i is equal the value of 2 the for loop is exited and I will never reach 3 and 4.

Another statement that is useful is the continue statement.   It will break one iteration of the loop but continue executing the next iteration.


for (var i == 0; i < 5; i++( {

if (i == 2) { continue; }
// statements

}

If there is a condition within the loop where the code/statements should not be executed then using continue will solve that problem.  What the above code will do is iterate over the loop 5 times, but when it reaches the point where I == 2 it will skip the statements that should be executed and move on to 3, 4 and 5.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
CodeWordjs Newsletter
Get up-to-date tutorials and information weekly on Javascript.
Your Information will never be shared with any third party.