Here's a simple example of an if condition:

var result = '';
if (a > 2) {
  result = 'a is greater than 2';
}

The parts of the if condition are:

The condition (the part in parentheses) always returns a boolean value and may contain:

There can also be an optional else part of the if condition. The else statement is followed by a block of code to be executed if the condition was evaluated to false.

if (a > 2) {
  result = 'a is greater than 2';
} else {
  result = 'a is NOT greater than 2';
}

In between the if and the else, there can also be an unlimited number of else if conditions. Here's an example:

if (a > 2 || a < -2) {
  result = 'a is not between -2 and 2'; 
} else if (a === 0 && b === 0) {
  result = 'both a and b are zeros'; 
} else if (a === b) {
  result = 'a and b are equal'; 
} else {
  result = 'I give up'; 
}

You can also nest conditions by putting new conditions within any of the blocks.

if (a === 1) {
  if (b === 2) {
    result = 'a is 1 and b is 2';
  } else {
    result = 'a is 1 but b is not 2';
  }
} else {
  result = 'a is not 1, no idea about b';
}

It's often useful to check whether a variable exists. The laziest way to do this is simply putting the variable in the condition part of the if, for example if (somevar) {...}, but this is not necessarily the best method. Let's take a look at an example that tests whether a variable called somevar exists, and if so, sets the result variable to yes:

>>> var result = ''; 
>>> if (somevar){result = 'yes';}

somevar is not defined

>>> result;

""

This code obviously works, because at the end result was not "yes". But firstly, the code generated a warning: somevar is not defined and as a JavaScript whiz you don't want your code to do anything like that. Secondly, just because if (somevar) returned false doesn't mean that somevar is not defined. It could be that somevar is defined and initialized but contains a falsy value, like false or 0.

A better way to check if a variable is defined is to use typeof.

>>> if (typeof somevar !== "undefined"){result = 'yes';}
>>> result;

""

typeof will always return a string and you can compare this string with "undefined". Note that the variable somevar may have been declared but not assigned a value yet and you'll still get the same result. So when testing with typeof like this, you're really testing whether the variable has any value (other than the value undefined).

>>> var somevar;
>>> if (typeof somevar !== "undefined"){result = 'yes';}
>>> result;

""

>>> somevar = undefined;
>>> if (typeof somevar !== "undefined"){result = 'yes';}
>>> result;

""

If a variable is defined and initialized with any value other than undefined, its type returned by typeof is no longer "undefined".

>>> somevar = 123;
>>> if (typeof somevar !== "undefined"){result = 'yes';}
>>> result;

"yes"

When you have a very simple condition you can consider using an alternative if syntax. Take a look at this:

var a = 1;
var result = ''; 
if (a === 1) {
  result = "a is one";
} else {
  result = "a is not one";
}

The if condition can be expressed simply as:

var result = (a === 1) ? "a is one" : "a is not one";

You should only use this syntax for very simple conditions. Be careful not to abuse it, as it can easily make your code unreadable.

The ? is called ternary operator.

If you find yourself using an if condition and having too many else if parts, you could consider changing the if to a switch.

var a = '1';
var result = '';
switch (a) {
  case 1:
    result = 'Number 1';
    break;
  case '1':
    result = 'String 1';
    break;
  default:
    result = 'I don\'t know';
    break;
}
result;

The result of executing this will be "String 1". Let's see what the parts of a switch are:

In other words, the step-by-step procedure for executing a switch statement is as follows:

while loops are the simplest type of loop. They look like this:

var i = 0;
while (i < 10) {
  i++;
}

The while statement is followed by a condition in parentheses and a code block in curly brackets. As long as the condition evaluates to true, the code block is executed over and over again.

do-while loops are a slight variation of the while loops. An example:

var i = 0;
do {
  i++;
} while (i < 10)

Here, the do statement is followed by a code block and a condition after the block. This means that the code block will always be executed, at least once, before the condition is evaluated.

If you initialize i to 11 instead of 0 in the last two examples, the code block in the first example (the while loop) will not be executed and i will still be 11 at the end, while in the second (do-while loop), the code block will be executed once and i will become 12.

f or is the most widely used type of loop and you should make sure you're comfortable with this one. It requires a just little bit more in terms of syntax.

In addition to the condition C and the code block L, you have the following:

The most widely used pattern of using a for loop is:

Here's an example:

var punishment = '';
for (var i = 0; i < 100; i++) {
  punishment += 'I will never do this again, ';
}

All three parts (initialization, condition, increment) can contain multiple expressions separated by commas. You can rewrite the example and define the variable punishment inside the initialization part of the loop.

for (var i = 0, punishment = ''; i < 100; i++) {
  punishment += 'I will never do this again, ';
}

Can you move the body of the loop inside the increment part? Yes, you can, especially as it's a one-liner. This will give you a loop that looks a little awkward, as it has no body:

for (var i = 0, punishment = ''; 
     i < 100; 
     i++, punishment += 'I will never do this again, ') 
{
  // nothing here
}

These three parts are actually all optional. Here's another way of rewriting the same example:

var i = 0, punishment = '';
for (;;) {
  punishment += 'I will never do this again, ';
  if (++i == 100) {
    break;
  }
}

Although the last rewrite works exactly the same way as the original, it is longer and harder to read. It's also possible to achieve the same result by using a while loop. But for loops make the code tighter and more robust, because the mere syntax of the for loop makes you think about the three parts (initialization, condition, increment) and thus, helps you reconfirm your logic and avoid situations such as being stuck in an infinite loop.

for loops can be nested within each other. Here's an example of a loop that is nested inside another loop and assembles a string containing 10 rows and 10 columns of asterisks. Think of i being the row and j being the column of an "image".

var res = '\n'; 
for(var i = 0; i < 10; i++) {
  for(var j = 0; j < 10; j++) {
    res += '* ';
  }
  res+= '\n';
}

The result is a string like:

"

* * * * * * * * * *

* * * * * * * * * *

* * * * * * * * * *

* * * * * * * * * *

* * * * * * * * * *

* * * * * * * * * *

* * * * * * * * * *

* * * * * * * * * *

* * * * * * * * * *

* * * * * * * * * *

"

Here's another example that uses nested loops and a modulus operation in order to draw a little snowflake-like result.

var res = '\n', i, j;
for(i = 1; i <= 7; i++) {
  for(j = 1; j <= 15; j++) {
    res += (i * j) % 8 ? ' ' : '*';
  }
  res+= '\n';
}

"

??????????????????*??????

???????*??????????*??????????*??

??????????????????*??????

?*????*????*????*????*????*????*

??????????????????*??????

????????*?????????*??????????*??

??????????????????*

"

The for-in loop is used to iterate over the elements of an array (or an object, as we'll see later). This is its only use; it cannot be used as a general-purpose repetition mechanism that replaces for or while. Let's see an example of using a for-in to loop through the elements of an array. But bear in mind that this is for informational purposes only, as for-in is mostly suitable for objects, and the regular for loop should be used for arrays.

In this example, we'll iterate over all of the elements of an array and print out the index (the key) and the value of each element:

var a = ['a', 'b', 'c', 'x', 'y', 'z'];
var result = '\n';
for (var i in a) {
  result += 'index: ' + i + ', value: ' + a[i] + '\n';
}

The result is:

"

index: 0, value: a

index: 1, value: b

index: 2, value: c

index: 3, value: x

index: 4, value: y

index: 5, value: z

"