When a number starts with a 0, it's considered an octal number. For example, the octal 0377 is the decimal 255.

>>> var n3 = 0377;
>>> typeof n3;

"number"

>>> n3;

255

The last line in the example above prints the decimal representation of the octal value. While you may not be very familiar with octal numbers, you've probably used hexadecimal values to define, for example, colors in CSS stylesheets.

In CSS, you have several options to define a color, two of them being:

In JavaScript, you put 0x before a hexadecimal value (also called hex for short).

>>> var n4 = 0x00;
>>> typeof n4;

"number"

>>> n4;

0

>>> var n5 = 0xff;
>>> typeof n5;

"number"

>>> n5;

255

1e1 (can also be written as 1e+1 or 1E1 or 1E+1) represents the number one with one zero after it, or in other words 10. Similarly, 2e+3 means the number 2 with 3 zeros after it, or 2000.

>>> 1e1

10

>>> 1e+1

10

>>> 2e+3

2000

>>> typeof 2e+3;

"number"

2e+3 means moving the decimal point 3 digits to the right of the number 2. There's also 2e-3 meaning you move the decimal point 3 digits to the left of the number 2.

>>> 2e-3 

0.002

>>> 123.456E-3 

0.123456

>>> typeof 2e-3

"number"

There is a special value in JavaScript called Infinity. It represents a number too big for JavaScript to handle. Infinity is indeed a number, as typing typeof Infinity in the console will confirm. You can also quickly check that a number with 308 zeros is ok, but 309 zeros is too much. To be precise, the biggest number JavaScript can handle is 1.7976931348623157e+308 while the smallest is 5e-324.

>>> Infinity

Infinity

>>> typeof Infinity

"number"

>>> 1e309

Infinity

>>> 1e308

1e+308

Dividing by 0 will give you infinity.

>>> var a = 6 / 0;
>>> a

Infinity

Infinity is the biggest number (or rather a little bigger than the biggest), but how about the smallest? It's infinity with a minus sign in front of it, minus infinity.

>>> var i = -Infinity;
>>> i

-Infinity

>>> typeof i

"number"

Does this mean you can have something that's exactly twice as big as Infinity—from 0 up to infinity and then from 0 down to minus infinity? Well, this is purely for amusement and there's no practical value to it. When you sum infinity and minus infinity, you don't get 0, but something that is called NaN (Not A Number).

>>> Infinity - Infinity

NaN

>>> -Infinity + Infinity

NaN

Any other arithmetic operation with Infinity as one of the operands will give you Infinity:

>>> Infinity - 20

Infinity

>>> -Infinity * 3

-Infinity

>>> Infinity / 2

Infinity

>>> Infinity - 99999999999999999

Infinity

What was this NaN you saw in the example above? It turns out that despite its name, "Not A Number", NaN is a special value that is also a number.

>>> typeof NaN

"number"

>>> var a = NaN;
>>> a

NaN

You get NaN when you try to perform an operation that assumes numbers but the operation fails. For example, if you try to multiply 10 by the character "f", the result is NaN, because "f" is obviously not a valid operand for a multiplication.

>>> var a = 10 * "f";
>>> a

NaN

NaN is contagious, so if you have even only one NaN in your arithmetic operation, the whole result goes down the drain.

>>> 1 + 2 + NaN 

NaN

When you use a number-like string as an operand in an arithmetic operation, the string is converted to a number behind the scenes. (This works for all operations except addition, because of addition's ambiguity)

>>> var s = '1'; s = 3 * s; typeof s;

"number"

>>> s

3

>>> var s = '1'; s++; typeof s;

"number"

>>> s

2

A lazy way to convert any number-like string to a number is to multiply it by 1 (a better way is to use a function called parseInt(), as you'll see in the next chapter):

>>> var s = "100"; typeof s; 

"string"

>>> s = s * 1; 

100

>>> typeof s; 

"number"

If the conversion fails, you'll get NaN:

>>> var d = '101 dalmatians';
>>> d * 1

NaN

A lazy way to convert anything to a string is to concatenate it with an empty string.

>>> var n = 1;
>>> typeof n;

"number"

>>> n = "" + n;

"1"

>>> typeof n;

"string"

Some strings that have a special meaning, as listed in the following table:

>>> var s = 'I don't know';

>>> var s = 'I don't know';
>>> var s = "I don't know";
>>> var s = "I don't know";
>>> var s = '"Hello", he said.';
>>> var s = ""Hello", he said.";

>>> var s = "1\2"; s;

>>> var s = '
1
2
3
';
>>> s

>>> var s = '1
2';
>>> var s = '1

2';
>>> var s = '1
2';

>>> s

>>> var s = "1	2"
>>> s

>>> "u0421u0442u043Eu044Fu043D"

There are some additional characters which are rarely used:  (backspace), v (vertical tab), and f (form feed).

There are three operators, called logical operators, that work with boolean values. These are:

In everyday meaning, if something is not true, it is false. Here's the same statement expressed using JavaScript and the logical ! operator.

>>> var b = !true;
>>> b;

false

If you use the logical NOT twice, you get the original value:

>>> var b = !!true;
>>> b;

true

If you use a logical operator on a non-boolean value, the value is converted to boolean behind the scenes.

>>> var b = "one";
>>> !b;

false

In the case above, the string value "one" was converted to a boolean true and then negated. The result of negating true is false. In the next example, we negate twice so the result is true.

>>> var b = "one";
>>> !!b;

true

Using double negation is an easy way to convert any value to its boolean equivalent. This is rarely useful, but on the other hand understanding how any value converts to a boolean is important. Most values convert to true with the exception of the following (which convert to false):

These six values are sometimes referred to as being falsy, while all others are truthy (including, for example, the strings "0", " ", and "false").

Let's see some examples of the other two operators—the logical AND and the logical OR. When you use AND, the result is true only if all of the operands are true. When using OR, the result is true if at least one of the operands is true.

>>> var b1 = true; var b2 = false; 
>>> b1 || b2 

true

>>> b1 && b2 

false

Here's a table that lists the possible operations and their results:

You can use several logical operations one after the other:

>>> true && true && false && true 

false

>>> false || true || false 

true

You can also mix && and || in the same expression. In this case, you should use parentheses to clarify how you intend the operation to work. Consider these:

>>> false && false || true && true 

true

>>> false && (false || true) && true 

false

You might wonder why the expression above (false && false || true && true) returned true. The answer lies in operator precedence. As you know from mathematics:

>>> 1 + 2 * 3 

7

This is because multiplication has precedence over addition, so 2 * 3 is evaluated first, as if you've typed:

>>> 1 + (2 * 3) 

7

Similarly for logical operations, ! has the highest precedence and is executed first, assuming there are no parentheses that demand otherwise. Then, in the order of precedence, comes && and finally ||. In other words:

>>> false && false || true && true 

true

is the same as:

>>> (false && false) || (true && true) 

true

If you have several logical operations one after the other, but the result becomes clear at some point before the end, the final operations will not be performed, because they can't affect the end result. Consider this:

>>> true || false || true || false || true 

true

Since these are all OR operations and have the same precedence, the result will be true if at least one of the operands is true. After the first operand is evaluated, it becomes clear that the result will be true, no matter what values follow. So the JavaScript engine decides to be lazy (ok, efficient) and not do unnecessary work by evaluating code that doesn't affect the end result. You can verify this behavior by experimenting in the console:

>>> var b = 5; 
>>> true || (b = 6) 

true

>>> b 

5

>>> true && (b = 6) 

6

>>> b 

6

This example also shows another interesting behavior—if JavaScript encounters a non-boolean expression as an operand in a logical operation, the non-boolean is returned as a result.

>>> true || "something" 

true

>>> true && "something" 

"something"

This behavior is something to watch out for and avoid, because it makes the code harder to understand. Sometimes you might see this behavior being used to define variables when you're not sure whether they were previously defined. In the next example, if the variable v is defined, its value is kept; otherwise, it's initialized with the value 10.

var mynumber = mynumber || 10;

This is simple and looks elegant, but be aware that it is not completely bulletproof. If mynumber is defined and initialized to 0 (or to any of the six falsy values), this code might not behave in exactly the way it was designed to work.

There's another set of operators that all return a boolean value as a result of the operation. These are the comparison operators. The following table lists them, together with some examples.

>>> 1 == 1

>>> 1 == 2

>>> 1 == '1'

>>> 1 === '1'

>>> 1 === 1

>>> 1 != 1

>>> 1 != '1'

>>> 1 != '2'

>>> 1 !== 1

>>> 1 !== '1'

>>> 1 > 1

>>> 33 > 22

>>> 1 >= 1

>>> 1 < 1

>>> 1 < 2

>>> 1 <= 1

>>> 1 <= 2

An interesting thing to note is that NaN is not equal to anything, not even itself.

>>> NaN == NaN

false

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 = '
'; 
for(var i = 0; i < 10; i++) {
  for(var j = 0; j < 10; j++) {
    res += '* ';
  }
  res+= '
';
}

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 = '
', i, j;
for(i = 1; i <= 7; i++) {
  for(j = 1; j <= 15; j++) {
    res += (i * j) % 8 ? ' ' : '*';
  }
  res+= '
';
}

"

                  *      

       *          *          *  

                  *      

 *    *    *    *    *    *    *

                  *      

        *         *          *  

                  *

"

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 = '
';
for (var i in a) {
  result += 'index: ' + i + ', value: ' + a[i] + '
';
}

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

"