When talking about arrays, you say that they contain elements. When talking about objects, you say that they contain properties. There isn't any significant difference in JavaScript; it is just the terminology that people are used to, probably from other programming languages.

A property of an object can contain a function, because functions are just data. In this case, you say that this property is a method.

var dog = {
  name: 'Benji', 
  talk: function(){
    alert('Woof, woof!'),
  }
};

It's also possible to store functions as array elements and invoke them, but you will not see much code like this in practice:

>>> var a = [];
>>> a[0] = function(what){alert(what);};
>>> a[0]('Boo!'),

In some programming languages, there is distinction between:

JavaScript uses arrays to represent indexed arrays and objects to represent associative arrays. If you want a hash in JavaScript, you use an object.

There are two ways to access a property of an object:

The dot notation is easier to read and write but it cannot always be used. The same rules apply as for quoting property names: if the name of the property is not a valid variable name, you cannot use the dot notation.

Let's take this object:

var hero = {
  breed: 'Turtle',
  occupation: 'Ninja'
};

Accessing a property with the dot notation:

>>> hero.breed;

"Turtle"

Accessing a property with the bracket notation:

>>> hero['occupation'];

"Ninja"

Accessing a non-existing property returns undefined:

>>> 'Hair color is ' + hero.hair_color;

"Hair color is undefined"

Objects can contain any data, including other objects.

var book = {
  name: 'Catch-22',
  published: 1961,
  author: {
    firstname: 'Joseph',
    lastname: 'Heller'
  }
};

To get to the firstname property of the object contained in the author property of the book object, you use:

>>> book.author.firstname

"Joseph"

Or using the square braces notation:

>>> book['author']['lastname']

"Heller"

It works even if you mix both:

>>> book.author['lastname']

"Heller"

>>> book['author'].lastname

"Heller"

One other case where you need square brackets is if the name of the property you need to access is not known beforehand. During runtime, it is dynamically stored in a variable:

>>> var key = 'firstname';
>>> book.author[key];

"Joseph"

Because a method is just a property that happens to be a function, you can access methods in the same way as you would access properties: using the dot notation or using square brackets. Calling (invoking) a method is the same as calling any other function: just add parentheses after the method name, which effectively say "Execute!".

var hero = {
  breed: 'Turtle',
  occupation: 'Ninja',
  say: function() {
    return 'I am ' + hero.occupation;
  }
}
>>> hero.say();

"I am Ninja"

If there are any parameters that you want to pass to a method, you proceed as with normal functions:

>>> hero.say('a', 'b', 'c'),

Because you can use the array-like square brackets to access a property, this means you can also use brackets to access and invoke methods, although this is not at a common practice:

>>> hero['say']();

JavaScript is a dynamic language; it allows you to alter properties and methods of existing objects at any time. This includes adding new properties or deleting them. You can start with a blank object and add properties later. Let's see how you can go about doing this.

An empty object:

>>> var hero = {};

Accessing a non-existing property:

>>> typeof hero.breed

"undefined"

Adding some properties and a method:

>>> hero.breed = 'turtle';
>>> hero.name = 'Leonardo';
>>> hero.sayName = function() {return hero.name;};

Calling the method:

>>> hero.sayName();

"Leonardo"

Deleting a property:

>>> delete hero.name;

true

Calling the method again will no longer work:

>>> hero.sayName();

reference to undefined property hero.name

In the previous example, the method sayName() used hero.name to access the name property of the hero object. When you're inside a method though, there is another way to access the object this method belongs to: by using the special value this.

var hero = {
  name: 'Rafaelo',
  sayName: function() {
    return this.name;
  }
}
>>> hero.sayName();

"Rafaelo"

So when you say this, you are actually saying "this object" or "the current object".

There is another way to create objects: by using constructor functions. Let's see an example:

function Hero() {
  this.occupation = 'Ninja';
}

In order to create an object using this function, you use the new operator, like this:

>>> var hero = new Hero();
>>> hero.occupation;

"Ninja"

The benefit of using constructor functions is that they accept parameters, which can be used when creating new objects. Let's modify the constructor to accept one parameter and assign it to the name property.

function Hero(name) {
  this.name = name;
  this.occupation = 'Ninja';
  this.whoAreYou = function() {
    return "I'm " + this.name + " and I'm a " + this.occupation;
  }
}

Now you can create different objects using the same constructor:

>>> var h1 = new Hero('Michelangelo'),
>>> var h2 = new Hero('Donatello'),
>>> h1.whoAreYou();

"I'm Michelangelo and I'm a Ninja"

>>> h2.whoAreYou();

"I'm Donatello and I'm a Ninja"

By convention, you should capitalize the first letter of your constructor functions so that you have a visual clue that this is not a normal function. If you call a function that is designed to be a constructor, but you omit the new operator, this is not an error, but it may not behave as you could expect.

>>> var h = Hero('Leonardo'),
>>> typeof h

"undefined"

What happened here? As there was no new operator, we didn't create a new object. The function was called like any other function, so h contains the value that the function returns. The function does not return anything (there's no return), so it actually returns undefined, which gets assigned to h.

In this case, what does this refer to? It refers to the global object.

Previously we discussed global variables (and how you should avoid them) and also the fact that JavaScript programs run inside a host environment (the browser for example). Now that you know about objects, it is time for the whole truth: the host environment provides a global object and all global variables are actually properties of the global object.

If your host environment is the web browser, the global object is called window.

As an illustration, you can try declaring a global variable, outside of any function, such as:

>>> var a = 1;

Then you can access this global variable in various ways:

Let's go back to the case where you define a constructor function and call it without the new operator. In such cases this refers to the global object and all properties set with this become properties of window.

Declaring a constructor function and calling it without new, returns "undefined":

>>> function Hero(name) {this.name = name;}
>>> var h = Hero('Leonardo'),
>>> typeof h

"undefined"

>>> typeof h.name

h has no properties

Because you had this inside Hero, a global variable (a property of the global object) called name was created.

>>> name

"Leonardo"

>>> window.name

"Leonardo"

If you call the same constructor function but this time using new, then a new object is returned and this refers to it.

>>> var h2 = new Hero('Michelangelo'),
>>> typeof h2

"object"

>>> h2.name

"Michelangelo"

The global functions you saw in Chapter 3 can also be invoked as methods of the window object. So the following two codes are equivalent:

>>> parseInt('101 dalmatians')

101

>>> window.parseInt('101 dalmatians')

101

When an object is created, a special property is assigned to it behind the scenes—the constructor property. It contains a reference to the constructor function used to create this object.

Continuing from the previous example:

>>> h2.constructor

Hero(name)

Because the constructor property contains a reference to a function, you might as well call this function to produce a new object. The following code is like saying, "I don't care how object h2 was created, but I want another one just like it".

>>> var h3 = new h2.constructor('Rafaello'),
>>> h3.name;

"Rafaello"

If an object was created using the object literal notation, its constructor is the built-in Object() constructor function (more about this later in this chapter).

>>> var o = {};
>>> o.constructor;

Object()

>>> typeof o.constructor;

"function"

Using the instanceof operator, you can test if an object was created with a specific constructor function:

>>> function Hero(){}
>>> var h = new Hero();
>>> var o = {};
>>> h instanceof Hero;

true

>>> h instanceof Object;

false

>>> o instanceof Object;

true

Note that you don't put parentheses after the function name (don't use h instanceof Hero()). This is because you're not invoking this function, but just referring to it by name, as for any other variable.

In addition to using constructor functions and the new operator to create objects, you can also use a normal function and create objects without new. You can have a function that does some preparatory work and has an object as a return value.

For example, here's a simple factory() function that produces objects:

function factory(name) {
  return {
    name: name
  };
}

Using the factory():

>>> var o = factory('one'),
>>> o.name

"one"

>>> o.constructor

Object()

In fact, you can also use constructor functions and return objects, different from this. This means you can modify the default behavior of the constructor function. Let's see how.

Here's the normal constructor scenario:

>>> function C() {this.a = 1;}
>>> var c = new C();
>>> c.a

1

But now look at this scenario:

>>> function C2() {this.a = 1; return {b: 2};}
>>> var c2 = new C2();
>>> typeof c2.a

"undefined"

>>> c2.b

2

What happened here? Instead of returning the object this, which contains the property a, the constructor returned another object that contains the property b. This is possible only if the return value is an object. Otherwise, if you try to return anything that is not an object, the constructor will proceed with its usual behavior and return this.

When you copy an object or pass it to a function, you only pass a reference to that object. Consequently, if you make a change to the reference, you are actually modifying the original object.

Here's an example of how you can assign an object to another variable and then make a change to the copy. As a result, the original object is also changed:

>>> var original = {howmany: 1};
>>> var copy = original;
>>> copy.howmany

1

>>> copy.howmany = 100;

100

>>> original.howmany

100

The same thing applies when passing objects to functions:

>>> var original = {howmany: 100};
>>> var nullify = function(o) {o.howmany = 0;}
>>> nullify(original);
>>> original.howmany

0

When you compare objects, you'll get true only if you compare two references to the same object. Comparing two distinct objects that happen to have the exact same methods and properties will return false.

Let's create two objects that look the same:

>>> var fido  = {breed: 'dog'};
>>> var benji = {breed: 'dog'};

Comparing them will return false:

>>> benji === fido

false

>>> benji == fido

false

You can create a new variable mydog and assign one of the objects to it, this way mydog actually points to the same object.

>>> var mydog = benji;

In this case benji is mydog because they are the same object (changing mydog's properties will change benji's). The comparison returns true.

>>> mydog === benji

true

And because fido is a different object, it does not compare to mydog:

>>> mydog === fido

false

Before diving into the built-in objects in JavaScript, let's quickly say a few words about working with objects in the Firebug console.

After playing around with the examples in this chapter, you might have already noticed how objects are displayed in the console. If you create an object and type its name, you'll get a string representation of the object including the properties (but only the first few properties if there are too many of them).

The object is clickable and takes you to the DOM tab in Firebug, which lists all of the properties of the object. If a property is also an object, there is a plus ( + ) sign to expand it. This is handy as it gives you an insight into exactly what this object contains.

The console also offers you an object called console and some methods, such as console.log(), console.error(), and console.info() which you can use to display any value you want in the console.

console.log() is convenient when you want to quickly test something, as well as in your real scripts when you want to dump some intermediate debuging information. Here's how you can experiment with loops, for example:

>>> for(var i = 0; i < 5; i++) { console.log(i); }

0

1

2

3

4

Obj ect is the parent of all JavaScript objects, which means that every object you create inherits from it. To create a new empty object you can use the literal notation or the Object() constructor function. The following two lines are equivalent:

>>> var o = {};
>>> var o = new Object();

An empty object is not completely useless because it already contains some methods and properties. Let's see a few:

Let's see these methods in action. First, create an object:

>>> var o = new Object();

Calling toString() returns a string representation of the object.

>>> o.toString()

"[object Object]"

toString() will be called internally by JavaScript, when an object is used in a string context. For example alert() works only with strings, so if you call the alert() function passing an object, the method toString() will be called behind the scenes. These two lines will produce the same result:

>>> alert(o)
>>> alert(o.toString())

Ano ther type of string context is the string concatenation. If you try to concatenate an object with a string, the object's toString() will be called first:

>>> "An object: " + o

"An object: [object Object]"

valueOf() is another method that all objects provide. For the simple objects (whose constructor is Object()) the valueOf() method will return the object itself.

>>> o.valueOf() === o

true

To summarize:

Array() is a built-in function that you can use as a constructor to create arrays:

>>
> var a = new Array();

This is equivalent to the array literal notation:

>>> var a = [];

No matter how the array is created, you can add elements to it as usual:

>>> a[0] = 1; a[1] = 2; a;

[1, 2]

When using the Array() constructor, you can also pass values which will be assigned to the new array's elements.

>>> var a = new Array(1,2,3,'four'),
>>> a;

[1, 2, 3, "four"]

An exception to this is when you pass a single number to the constructor. In this case, the number passed will be considered to be the length of the array.

>>> var a2 = new Array(5);
>>> a2;

[undefined, undefined, undefined, undefined, undefined]

Because arrays are created with a constructor, does this mean that arrays are in fact objects? Yes, and you can verify this by using the typeof operator:

>>> typeof a;

"object"

Because arrays are objects, this means that they inherit the properties and methods of the parent Object.

>>> a.toString();

"1,2,3,four"

>>> a.valueOf()

[1, 2, 3, "four"]

>>> a.constructor

Array()

Arrays are objects, but of a special type because:

Let's examine the differences between an array and an object, starting by creating the empty object o and the empty array a:

>>> var a = [], o = {};

Array objects have a length property automatically defined for them, while normal objects do not:

>>> a.length

0

>>> typeof o.length

"undefined"

It's OK to add both numeric and non-numeric properties to both arrays and objects:

>>> a[0] = 1; o[0] = 1;
>>> a.prop = 2; o.prop = 2;

The length property is always up-to-date with the number of numeric properties, ignoring the non-numeric ones.

>>> a.length

1

The length property can also be set by you. Setting it to a greater value than the current number of items in the array creates empty elements (with a value of undefined).

>>> a.length = 5

5

>>> a

[1, undefined, undefined, undefined, undefined]

Setting the length to a lower value removes the trailing elements:

>>> a.length = 2;

2

>>> a

[1, undefined]

>>> var a = [3, 5, 1, 7, 'test'];

>>> a.push('new')

>>> a

>>> a.pop()

>>> a

>>> var b = a.sort();
>>> b

>>> a

>>> a.join(' is not '),

>>> b = a.slice(1, 3);

>>> b = a.slice(0, 1);

>>> b = a.slice(0, 2);

>>> a

>>> b = a.splice(1, 2, 100, 101, 102);

>>> a

>>> a.splice(1, 3)

>>> a

You already know that functions are a special data type. But it turns out that there's more to it than that—functions are actually objects. There is a built-in constructor function called Function() which allows an alternative (but not recommended) way to create a function.

The following three ways of defining a function are equivalent:

>>> function sum(a, b) {return a + b;};
>>> sum(1, 2)

3

>>> var sum = function(a, b) {return a + b;};
>>> sum(1, 2)

3

>>> var sum = new Function('a', 'b', 'return a + b;'),
>>> sum(1, 2)

3

When using the Function() constructor, you pass the parameter names first (as strings) and then the source code for the body of the function (again as a string). The JavaScript engine then needs to evaluate the source code you pass and create the new function for you. This source code evaluation suffers from the same drawbacks as the eval() function, so defining functions using the Function() constructor should be avoided when possible.

If you use the Function constructor to create functions that have lots of parameters, bear in mind that the parameters can be passed as a single comma-delimited list, so, for example, these are the same:

>>> var first = new Function('a, b, c, d', 'return arguments;'),
>>> first(1,2,3,4);

[1, 2, 3, 4]

>>> var second = new Function('a, b, c', 'd', 'return arguments;'),
>>> second(1,2,3,4);

[1, 2, 3, 4]

>>> var third = new Function('a', 'b', 'c', 'd', 
                             'return arguments;'),
>>> third(1,2,3,4);

[1, 2, 3, 4]

>>> function myfunc(a){return a;}
>>> myfunc.constructor

>>> function myfunc(a, b, c){return true;}
>>> myfunc.length

>>> function A(){return A.caller;}
>>> function B(){return A();}
>>> B()

>>> A()

var some_obj = {
  name: 'Ninja',
  say: function(){
    return 'I am a ' + this.name;
  }
}

>>> function F(){} 
>>> typeof F.prototype 

>>> F.prototype = some_obj;

>>> var obj = new F();
>>> obj.name 

>>> obj.say()

>>> function myfunc(a, b, c) {return a + b + c;}
>>> myfunc.toString()

}"

>>> eval.toString()

}"

var some_obj = {
  name: 'Ninja', 
  say: function(who){
    return 'Haya ' + who + ', I am a ' + this.name; 
  }
}

>>> some_obj.say('Dude'),

>>> my_obj = {name: 'Scripting guru'};

>>> some_obj.say.call(my_obj, 'Dude'),

some_obj.someMethod.call(my_obj, 'a', 'b', 'c'),

some_obj.someMethod.apply(my_obj, ['a', 'b', 'c']);
some_obj.someMethod.call(my_obj, 'a', 'b', 'c'),

>>> some_obj.say.apply(my_obj, ['Dude']);

>>> function f() {return arguments;}
>>> f(1,2,3)

>>> function f(){return arguments.callee;}
>>> f()

(
  function(count){
    if (count < 5) {
      alert(count); 
      arguments.callee(++count);
    }
  }
)(1)

Our journey through the built-in objects in JavaScript continues, and the next ones are fairly easy; they merely wrap the primitive data types boolean, number, and string.

You already know a lot about booleans from Chapter 2. Now, let's meet the Boolean() constructor:

>>> var b = new Boolean();

It is important to note that this creates a new object b, and not a primitive boolean value. To get the primitive value, you can call the valueOf() method (inherited from Object).

>>> var b = new Boolean();
>>> typeof b

"object"

>>> typeof b.valueOf()

"boolean"

>>> b.valueOf()

false

Overall, objects created with the Boolean() constructor are not too useful, as they don't provide any methods or properties, other than the inherited ones.

The Boolean() function is useful when called as a normal function, without new. This converts non-booleans to booleans (which is the same as using a double negation !!value).

>>> Boolean("test")

true

>>> Boolean("")

false

>>> Boolean({})

true

Apart from the six falsy values, everything else is truthy in JavaScript, including the empty objects. This also means that all boolean objects created with new Boolean() evaluate to true, as they are objects.

Let's create two boolean objects, one truthy and one falsy:

>>> var b1 = new Boolean(true)
>>> b1.valueOf()

true

>>> var b2 = new Boolean(false)
>>> b2.valueOf()

false

Now let's convert them to primitive boolean values. They both convert to true because all objects are truthy.

>>> Boolean(b1)

true

>>> Boolean(b2)

true

Similarly to Boolean(), the Number() function can be used:

>>> var n = Number('12.12'),
>>> n

12.12

>>> typeof n

"number"

>>> var n = new Number('12.12'),
>>> typeof n

"object"

Because functions are objects, they can have properties. The Number() function contains some interesting built-in properties (which you cannot modify):

>>> Number.MAX_VALUE

1.7976931348623157e+308

>>> Number.MIN_VALUE

5e-324

>>> Number.POSITIVE_INFINITY

Infinity

>>> Number.NEGATIVE_INFINITY

-Infinity

>>> Number.NaN

NaN

The number objects provide three methods—toFixed(), toPrecision() and toExponential() (see Appendix C for details).

>>> var n = new Number(123.456)
>>> n.toFixed(1)

"123.5"

Note that you can use these methods without explicitly creating a number object. In such cases, the number object will be created (and destroyed) for you behind the scenes:

>>> (12345).toExponential()

"1.2345e+4"

As with all objects, number objects also provide the toString() method. It is interesting to note that this method accept an optional radix parameter (10 is the default).

>>> var n = new Number(255);
>>> n.toString();

"255"

>>> n.toString(10);

"255"

>>> n.toString(16);

"ff"

>>> (3).toString(2);

"11"

>>> (3).toString(10);

"3"

Using the String() constructor function you can create string objects. Objects produced this way provide some useful methods when it comes to text manipulation, but if you don't plan on using these methods, you're probably better off just using primitive strings.

Here's an example that shows the difference between a string object and a primitive string data type.

>>> var primitive = 'Hello';
>>> typeof primitive;

"string"

>>> var obj = new String('world'),
>>> typeof obj;

"object"

A string object is very similar to an array of characters. The string objects have an indexed property for each character and they also have a length property.

>>> obj[0]

"w"

>>> obj[4]

"d"

>>> obj.length

5

To extract the primitive value from the string object, you can use the valueOf() or toString() methods inherited from Object. You'll probably never need to do this, as toString() is called behind the scenes if you use an object in a string context.

>>> obj.valueOf()

"world"

>>> obj.toString()

"world"

>>> obj + ""

"world"

Primitive strings are not objects, so they don't have any methods or properties. But JavaScript still offers you the syntax to treat primitive strings as objects.

In the following example, string objects are being created (and then destroyed) behind the scenes every time you access a primitive string as if it was an object:

>>> "potato".length

6

>>> "tomato"[0]

"t"

>>> "potato"["potato".length - 1]

"o"

One final example to illustrate the difference between a string primitive and a string object: let's convert them to boolean. The empty string is a falsy value, but any string object is truthy.

>>> Boolean("")

false

>>> Boolean(new String(""))

true

Similarly to Number() and Boolean(), if you use the String() function without new, it converts the parameter to a primitive string. This means calling toString() method, if the input is an object.

>>> String(1)

"1"

>>> String({p: 1})

"[object Object]"

>>> String([1,2,3])

"1,2,3"

>>> var s = new String("Couch potato");

>>> s.toUpperCase()

>>> s.toLowerCase()

>>> s.charAt(0);

>>> s[0]

>>> s.charAt(101)

>>> s.indexOf('o')

>>> s.indexOf('o', 2)

>>> s.lastIndexOf('o')

>>> s.indexOf('Couch')

>>> s.indexOf('couch')

>>> s.toLowerCase().indexOf('couch')

if (s.indexOf('Couch')) {...}

if (s.indexOf('Couch') !== -1) {...}

>>> s.slice(1, 5)

>>> s.substring(1, 5)

>>> s.slice(1, -1)

>>> s.substring(1, -1)

>>> s.split(" ")

>>> s.split(' ').join(' '),

>>> s.concat("es")

>>> s.valueOf()

Math is a little different from the other built-in global objects you saw above. It's not a normal function and therefore cannot be used with new to create objects. Math is a built-in global object, which provides a number of methods and properties that are useful for mathematical operations.

Math's properties are constants so you can't change their values. Their names are all in upper case to emphasize the difference between them and a normal variable property. Let's see some of these constant properties:

The number π:

>>> Math.PI

3.141592653589793

Square root of 2:

>>> Math.SQRT2

1.4142135623730951

Euler's constant e:

>>> Math.E

2.718281828459045

Natural logarithm of 2:

>>> Math.LN2

0.6931471805599453

Natural logarithm of 10:

>>> Math.LN10

2.302585092994046

Now you know how to impress your friends the next time they (for whatever awkward reason) start wondering, "What was the value of e? I can't remember." Just type Math.E in the console and you have the answer.

Let's take a look at some of the methods the Math object provides (the full list is in Appendix C).

Generating random numbers:

>>> Math.random() 

0.3649461670235814

random() returns a number between 0 and 1, so if you want a number between, let's say 0 and 100, you can do:

>>> 100 * Math.random()

For numbers between any two values min and max, use the formula ((max - min) * Math.random()) + min. For example, a random number between 2 and 10 would be:

>>> 8 * Math.random() + 2

9.175650496668485

If you only need an integer, you can use one of rounding methods—floor() to round down, ceil() to round up or round() to round to the nearest. For example to get either 0 or 1:

>>> Math.round(Math.random())

If you need the lowest or the highest among a set of numbers, you have the methods min() and max(). So if you have a form on a page that asks for a valid month, you can make sure that you always work with sane data:

>>> Math.min(Math.max(1, input), 12)

The Math object also provides you with the ability to perform mathematical operations for which you don't have a designated operator. This means that you can raise to a power using pow(), find the square root using sqrt() and perform all the trigonometric operations—sin(), cos(), atan(), and so on.

2 to the power of 8:

>>> Math.pow(2, 8)

256

Square root of 9:

>>> Math.sqrt(9)

3

Date() is a constructor function that creates date objects. You can create a new object by passing:

An object instantiated with today's date/time:

>>> new Date()

Tue Jan 08 2008 01:10:42 GMT-0800 (Pacific Standard Time)

(As with all objects, the Firefox console displays the result of the toString() method, so this long string "Tue Jan 08...." is what you get when you call toString() on a date object.)

Here are some examples of using strings to initialize a date object. It's interesting how many different formats you can use to specify the date.

>>> new Date('2009 11 12')

Thu Nov 12 2009 00:00:00 GMT-0800 (Pacific Standard Time)

>>> new Date('1 1 2012')

Sun Jan 01 2012 00:00:00 GMT-0800 (Pacific Standard Time)

>>> new Date('1 mar 2012 5:30')

Thu Mar 01 2012 05:30:00 GMT-0800 (Pacific Standard Time)

It is good that JavaScript can figure out a date from different strings, but this is not really a reliable way of defining a precise date. The better way is to pass numeric values to the Date() constructor representing:

Let's see some examples.

Passing all the parameters:

>>> new Date(2008, 0, 1, 17, 05, 03, 120)

Tue Jan 01 2008 17:05:03 GMT-0800 (Pacific Standard Time)

Passing date and hour:

>>> new Date(2008, 0, 1, 17)

Tue Jan 01 2008 17:00:00 GMT-0800 (Pacific Standard Time)

Watch out for the fact that the month starts from 0, so 1 is February:

>>> new Date(2008, 1, 28)

Thu Feb 28 2008 00:00:00 GMT-0800 (Pacific Standard Time)

If you pass a value greater than allowed, your date "overflows" forward. Because there's no February 30 in 2008, this means it has to be March 1st (remember that 2008 was a leap-year).

>>> new Date(2008, 1, 29)

Fri Feb 29 2008 00:00:00 GMT-0800 (Pacific Standard Time)

>>> new Date(2008, 1, 30)

Sat Mar 01 2008 00:00:00 GMT-0800 (Pacific Standard Time)

Similarly, Dec 32nd becomes Jan 01st of the next year:

>>> new Date(2008, 11, 31)

Wed Dec 31 2008 00:00:00 GMT-0800 (Pacific Standard Time)

>>> new Date(2008, 11, 32)

Thu Jan 01 2009 00:00:00 GMT-0800 (Pacific Standard Time)

Finally, a date object can be initialized with a timestamp (the number of milliseconds since the UNIX epoch, where 0 milliseconds is 1st January 1970).

>>> new Date(1199865795109)

Wed Jan 09 2008 00:03:15 GMT-0800 (Pacific Standard Time)

If you call Date() without new, you get a string representing the current date, whether or not you pass any parameters. This gives the current time (current when this example was run):

>>> Date()

"Thu Jan 17 2008 23:11:32 GMT-0800 (Pacific Standard Time)"

>>> Date(1, 2, 3, "it doesn't matter");

"Thu Jan 17 2008 23:11:35 GMT-0800 (Pacific Standard Time)"

>>> var d = new Date();
>>> d.toString();

>>> d.setMonth(2);

>>> d.toString();

>>> d.getMonth();

>>> Date.parse('Jan 1, 2008')

>>> Date.UTC(2008, 0, 1)

>>> new Date(Date.UTC(2008, 0, 1));

>>> new Date(2008, 0, 1);

>>> var d = new Date(2012, 5, 20);
>>> d.getDay();

>>> d.toDateString();

var stats = [0,0,0,0,0,0,0];

for (var i = 2012; i < 3012; i++) {
  stats[new Date(i, 5, 20).getDay()]++;
}

>>> stats;

Regular expressions provide a powerful way to search and manipulate text. If you're familiar with SQL, you can think of regular expressions as being somewhat similar to SQL: you use SQL to find and update data inside a database, and you use regular expressions to find and update data inside a piece of text.

Different languages have different implementations (think "dialects") of the regular expressions syntax. JavaScript uses the Perl 5 syntax.

Instead of saying "regular expression", people often shorten it to "regex" or "regexp".

A regular expression consists of:

The pattern can be as simple as literal text to be matched verbatim, but that is rare and in such cases you're better off using indexOf(). Most of the times, the pattern is more complex and could be difficult to understand. Mastering regular expressions patterns is a large topic, which won't be discussed in details here; instead, you'll see what JavaScript provides in terms of syntax, objects and methods in order to support the use of regular expressions. You can also refer to Appendix D as a reference when writing patterns.

JavaScript provides the RegExp() constructor which allows you to create regular expression objects.

>>> var re = new RegExp("j.*t"); 

There is also the more convenient regexp literal:

>>> var re = /j.*t/; 

In the example above, j.*t is the regular expression pattern. It means, "Match any string that starts with j, ends with t and has zero or more characters in between". The asterisk * means "zero or more of the preceding"; the dot (.) means "any character". The pattern needs to be placed in quotation marks when used in a RegExp() constructor.

>>> var re = new RegExp('j.*t', 'gmi'), 

>>> re.global;

>>> re.global = false;
>>> re.global

>>> var re = /j.*t/ig;
>>> re.global

>>> /j.*t/.test("Javascript")

>>> /j.*t/i.test("Javascript")

>>> /j.*t/i.exec("Javascript")[0]

>>> var s = new String('HelloJavaScriptWorld'),

>>> s.match(/a/);

>>> s.match(/a/g);

>>> s.match(/j.*a/i);

>>> s.search(/j.*a/i);

>>> s.replace(/[A-Z]/g, ''),

>>> s.replace(/[A-Z]/, ''),

>>> s.replace(/[A-Z]/g, "_$&");

>>> s.replace(/([A-Z])/g, "_$1");

>>> var email = "[email protected]";
>>> var username = email.replace(/(.*)@.*/, "$1");
>>> username;

>>> function replaceCallback(match){return "_" +match.toLowerCase();}
>>> s.replace(/[A-Z]/g, replaceCallback);

>>> var glob;

>>> var re = /(.*)@(.*).(.*)/;

var callback = function(){
  glob = arguments;
  return arguments[1] + ' at ' + arguments[2] + ' dot ' + arguments[3];
}

>>> "[email protected]".replace(re, callback);

>>> glob

>>> var csv = 'one, two,three ,four';
>>> csv.split(','),

>>> csv.split(/s*,s*/)

>>> "test".replace('t', 'r')

>>> "test".replace(new RegExp('t'), 'r')

Error Objects

Errors happen, and it's good to have the mechanisms in place so that your code can realize that there has been an error condition and recover from it in a graceful manner. JavaScript provides the statements try, catch, and finally to help you deal with errors. If an error occurs, an error object is thrown. Error objects are created by using one of these built-in constructors: EvalError, RangeError, ReferenceError, SyntaxError, TypeError, and URIError. All of these constructors inherit from the Error object.

Let's just cause an error and see what happens. An example of an error will be trying to call a function that doesn't exist. Type this into the Firebug console:

>>> iDontExist();

You'll get something like this:

In the bottom right corner, instead of Firebug's usual icon, you'll see:

If you open Firefox's error console (Tools | Error console), you'll see:

The display of errors can vary greatly between browsers and other host environments. In Internet Explorer you might see something like this in the lower left corner of the window:

If you double-click the message, you can get some more information:

Depending on your browser's configuration, you might not even notice that an error occurred. However, you cannot assume that all of your users have disabled the display of errors and it is your responsibility to ensure an error-free experience for them. The error above propagated to the user because the code didn't try to trap (catch) this error, it didn't expect the error and was unprepared for handling it. Fortunately, it's really easy to trap the error. All you need is the try statement, followed by a catch.

This code will not cause any of the error displays from the screenshots above

try {
  iDontExist();
} catch (e){
  // do nothing
}

Here you have:

• The try statement, followed by a block of code

• catch statement, followed by a variable name in parentheses and another block of code

There is also an optional finally statement, not used in this example, which is executed regardless of whether there was an error or not.

In the example above, the code block that follows the catch didn't do anything, but this is the place where you put the code that will recover from the error, or at least give some feedback to the user that you application is aware that there was a special condition.

The variable e in the parentheses after the catch statement contains an error object. Like any other object, it contains some useful properties and methods. Unfortunately, different browsers implement these methods and properties differently, but there are two properties that are consistently implemented—e.name and e.message.

Let's try this code now:

try {
  iDontExist();
} catch (e){
  alert(e.name + ': ' + e.message);
} finally {
  alert('Finally!'),
}

This will present an alert() showing e.name and e.message and then another alert() saying Finally!.

In Firefox, the first alert will say ReferenceError: iDontExist is not defined. In Internet Explorer it will be TypeError: Object expected. This tells us two things:

• e.name contains the name of the constructor that was used to create the error object.

• Because the error objects are not consistent across host environments (browsers), it would be somewhat tricky to have your code act differently depending on the type of error (the value of e.name).

You can also create error objects yourself using new Error() or any of the other error constructors, and then let the JavaScript engine know that there's an erroneous condition, using the throw statement.

For example, imagine a scenario where you call maybeExists() function and after that make some calculations. You want to trap all errors in a consistent way, no matter whether the error is that maybeExists() doesn't exist or that your calculations found a problem. Consider this code:

try {
  var total = maybeExists();
  if (total === 0) {
    throw new Error('Division by zero!'),
  } else {
    alert(50 / total);
  }
} catch (e){
  alert(e.name + ': ' + e.message);
} finally {
  alert('Finally!'),
}

This code will alert() different messages, depending on whether or not maybeExists() is defined and the values it returns:

• If maybeExists() doesn't exist, you get ReferenceError: maybeExists() is not defined in Firefox and TypeError: Object expected in IE

• If maybeExists() returns 0, you'll get Error: Division by zero!

• If maybeExists() returns 2, you'll get an alert that says 25

In all cases, there will be a second alert that says Finally!

Inste ad of throwing a generic error throw new Error('Division by zero!'), you can be more specific if you choose to, for example, by throwing throw new RangeError('Division by zero!'). Alternatively, you don't need any constructor; you can simply throw a normal object:

throw {
  name: "MyError",
  message: "OMG! Something terrible has happened"
}