Object Oriented JavaScript Demonstrated

Sky-Tiger

String Conversions
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"

Sky-Tiger

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

String

  
Meaning

  
Example

  

\

\\

\'

\"
\ is the escape character.

When you want to have quotes inside your string, you escape them, so that JavaScript doesn't think they mean the end of the string.

If you want to have an actual backslash in the string, escape it with another backslash.
>>> var s = 'I don't know';

This is an error, because JavaScript thinks the string is "I don" and the rest is invalid code. The following are valid:

>>> 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.";

Escaping the escape:

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

"1\2"

  

\n

  
End of line  

  
>>> var s = '\n1\n2\n3\n';
>>> s

"
1
2
3
"

String

  
Meaning

  
Example

  

\r

  
Carriage return

  
All these:

>>> var s = '1\r2';
>>> var s = '1\n\r2';
>>> var s = '1\r\n2';

Result in:

>>> s

"1
2"

\t

  
Tab

  
>>> var s = "1\t2"
>>> s

"1    2"

\u

  
\u followed by a character code allows you to use Unicode

  
Here's my name in Bulgarian written with Cyrillic characters:

>>> "\u0421\u0442\u043E\u044F\u043D"
"Стoян "

  


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

Sky-Tiger

Booleans
There are only two values that belong to the boolean data type: the values true and false, used without quotes.

>>> var b = true; typeof b;
       "boolean"
>>> var b = false; typeof b;
       "boolean"

If you quote true or false, they become strings.

>>> var b = "true"; typeof b;
       "string"

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

!—logical NOT (negation)
&&—logical AND
||—logical OR
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):

The empty string ""
null
undefined
The number 0
The number NaN
The boolean 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:

Operation

  
Result

  

true && true

  
true

  

true && false

  
false

  

false && true

  
false

  

false && false

  
false

  

true || true

  
true

  

true || false

  
true

  

false || true

  
true

  

false || false

  
false

  


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

Sky-Tiger

Operator Precedence
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

  

  
   

  
Best Practice

Use parentheses instead of relying on operator precedence. This makes your code easier to read and understand.

Sky-Tiger

Lazy Evaluation
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.

Sky-Tiger

Comparison
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.

Operator symbol

  
Description

  
Example

  

==

  
Equality comparison:

Returns true when both operands are equal. The operands are converted to
the same type before being compared.

  
>>> 1 == 1

true

>>> 1 == 2

false

>>> 1 == '1'

true

  

===

  
Equality and type comparison:

Returns true if both operands are equal and of the same type. It's generally better and safer if you compare this way, because there's no behind-the-scenes type conversions.
>>> 1 === '1'

false

>>> 1 === 1

true

  

!=

  
Non-equality comparison:

Returns true if the operands are
not equal to each other (after a type conversion)

  
>>> 1 != 1

false

>>> 1 != '1'

false

>>> 1 != '2'

true

  

!==

  
Non-equality comparison without type conversion:

Returns true if the operands are not equal OR they are different types.

  
>>> 1 !== 1

false

>>> 1 !== '1'

true

  

Operator symbol

  
Description

  
Example

  

>

  
Returns true if the left operand is greater than the right one.

  
>>> 1 > 1

false

>>> 33 > 22

true

  

>=

  
Returns true if the left operand is greater than or equal to the right one.

  
>>> 1 >= 1

true

  

<

  
Returns true if the left operand is less than the right one.

  
>>> 1 < 1

false

>>> 1 < 2

true

  

<=

  
Returns true if the left operand is less than or equal to the right one.

  
>>> 1 <= 1

true

>>> 1 <= 2

true

  


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

>>> NaN == NaN
       false

Sky-Tiger

Undefined and null
You get the undefined value when you try to use a variable that doesn't exist, or one that hasn't yet been assigned a value. When you declare a variable without initializing it, JavaScript automatically initializes it to the value undefined.

If you try using a non-existing variable, you'll get an error message.

>>> foo
       foo is not defined

If you use the typeof operator on a non-existing variable, you get the string "undefined".

>>> typeof foo
       "undefined"

If you declare a variable without giving it a value, you won't get an error when you use that variable. But the typeof still returns "undefined".

>>> var somevar;
>>> somevar
>>> typeof somevar
       "undefined"

The null value, on the other hand, is not assigned by JavaScript behind the scenes; it can only be assigned by your code.

>>> var somevar = null
       null
>>> somevar
       null
>>> typeof somevar
       "object"

Although the difference between null and undefined is small, it may be important at times. For example, if you attempt an arithmetic operation, you can get different results:

>>> var i = 1 + undefined; i;
       NaN
>>> var i = 1 + null; i;
       1
This is because of the different ways null and undefined are converted to the other primitive types. Below are examples that show the possible conversions.

Conversion to a number:

>>> 1*undefined
       NaN
>>> 1*null
       0
Conversion to a boolean:

>>> !!undefined
       false
>>> !!null
       false

Conversion to a string:

>>> "" + null
       "null"
>>> "" + undefined
       "undefined"

Sky-Tiger

Primitive Data Types Recap
Let's quickly summarize what has been discussed so far:

There are five primitive data types in JavaScript:
number
string
boolean
undefined
null
Everything that is not a primitive is an object
The number data type can store positive and negative integers or floats, hexadecimal numbers, octal numbers, exponents, and the special numbers NaN, Infinity, and –Infinity
The string data type contains characters in quotes
The only values of the boolean data type are true and false
The only value of the null data type is the value null
The only value of the undefined data type is the value undefined
All values become true when converted to a boolean, with the exception of the six falsy values:
""
null
undefined
0
NaN
false

Sky-Tiger

Arrays
Now that you know the basic primitive data types in JavaScript, it's time to move to a more interesting data structure—the array.

To declare a variable that contains an empty array, you use square brackets with nothing between them:

>>> var a = [];
>>> typeof a;
       "object"

typeof returns "object", but don't worry about this for the time being, we'll get to that when we take a closer look at objects.

To define an array that has three elements, you do this:

>>> var a = [1,2,3];
When you simply type the name of the array in the Firebug console, it prints the contents of the array:

>>> a
       [1, 2, 3]

So what is an array exactly? It's simply a list of values. Instead of using one variable to store one value, you can use one array variable to store any number of values as elements of the array. Now the question is how to access each of these stored values?

The elements contained in an array are indexed with consecutive numbers starting from zero. The first element has index (or position) 0, the second has index 1 and so on. Here's the three-element array from the previous example:

Index

  
Value

  

0

  
1

  

1

  
2

  

2

  
3

  


In order to access an array element, you specify the index of that element inside square brackets. So a[0] gives you the first element of the array a, a[1] gives you the second, and so on.

>>> a[0]
       1
>>> a[1]
       2

Sky-Tiger

Adding/Updating Array Elements
Using the index, you can also update elements of the array. The next example updates the third element (index 2) and prints the contents of the new array.

>>> a[2] = 'three';
       "three"
>>> a
       [1, 2, "three"]

You can add more elements, by addressing an index that didn't exist before.

>>> var a = [1,2,3];
>>> a[6] = 'new';
       "new"
>>> a
       [1, 2, 3, undefined, undefined, undefined, "new"]

If you add a new element, but leave a gap in the array, those elements in between are all assigned the undefined value. Check out this example:

>>> var a = [1,2,3];
>>> a[6] = 'new';
       "new"
>>> a
       [1, 2, 3, undefined, undefined, undefined, "new"]