Returning an Array
In Example 16-3, the function returned only one parameter, but what if you need to
return multiple parameters? This can be done by returning an array, as in Example 16-4.
Example 16-4. Returning an array of values
<script>
words = fixNames("the", "DALLAS", "CowBoys")
for (j = 0 ; j < words.length ; ++j)
document.write(words[j] + "<br />")
function fixNames()
{
var s = new Array()
for (j = 0 ; j < fixNames.arguments.length ; ++j)
s[j] = fixNames.arguments[j].charAt(0).toUpperCase() +
fixNames.arguments[j].substr(1).toLowerCase()
return s
}
</script>
Here the variable words is automatically defined as an array and populated with the
returned result of a call to the function fixNames. Then a for loop iterates through the
array and displays each member.
As for the fixNames function, it’s almost identical to Example 16-3, except that the
variable s is now an array, and after each word has been processed it is stored as an
element of this array, which is returned by the return statement.
This function enables the extraction of individual parameters from its returned values,
like the following (the output from which is simply “The Cowboys”):
words = fixNames("the", "DALLAS", "CowBoys")
document.write(words[0] + " " + words[2])
JavaScript Objects
A JavaScript object is a step up from a variable, which can contain only one value at a
time, in that objects can contain multiple values and even functions. An object groups
data together with the functions needed to manipulate it.
Declaring a Class
When creating a script to use objects, you need to design a composite of data and code
called a class. Each new object based on this class is called an instance (or occurrence)
JavaScript Objects | 341
of that class. As you’ve already seen, the data associated with an object are called its
properties, while the functions it uses are called methods.
Let’s look at how to declare the class for an object called User that will contain details
about the current user. To create the class, just write a function named after the class.
This function can accept arguments (I’ll show later how it’s invoked) and can create
properties and methods for the objects in that class. The function is called a constructor.
Example 16-5 shows a constructor for the class User with three properties: forename,
username, and password. The class also defines the method showUser.
Example 16-5. Declaring the User class and its method
<script>
function User(forename, username, password)
{
this.forename = forename
this.username = username
this.password = password
this.showUser = function()
{
document.write("Forename: " + this.forename + "<br />")
document.write("Username: " + this.username + "<br />")
document.write("Password: " + this.password + "<br />")
}
}
</script>
The function is different from other functions we’ve seen so far in two ways:
• It refers to an object named this. When the program creates an instance of User
by running this function, this refers to the instance being created. The same func-
tion can be called over and over with different arguments, and will create a new
User each time with different values for the properties forename, and so on.
• A new function named showUser is created within the function. The syntax shown
here is new and rather complicated, but its purpose is to tie showUser to the User
class. Thus, showUser comes into being as a method of the User class.
The naming convention I have used is to keep all properties in lowercase and to use at
least one uppercase character in method names, following the bumpyCaps convention
mentioned earlier in the chapter.
Example 16-5 follows the recommended way to write a class constructor, which is to
include methods in the constructor function. However, you can also refer to functions
defined outside the constructor, as in Example 16-6.
Example 16-6. Separately defining a class and method
<script>
function User(forename, username, password)
{
342 | Chapter 16: JavaScript Functions, Objects, and Arrays
this.forename = forename
this.username = username
this.password = password
this.showUser = showUser
}
function showUser()
{
document.write("Forename: " + this.forename + "<br />")
document.write("Username: " + this.username + "<br />")
document.write("Password: " + this.password + "<br />")
}
</script>
I show you this form because you are certain to encounter it when perusing other
programmers’ code.
Creating an Object
To create an instance of the class User, you can use a statement such as the following:
details = new User("Wolfgang", "w.a.mozart", "composer")
Or you can create an empty object, like this:
details = new User()
and then populate it later, like this:
details.forename = "Wolfgang"
details.username = "w.a.mozart"
details.password = "composer"
You can also add new properties to an object, like this:
details.greeting = "Hello"
You can verify that adding such new properties works with the following statement:
document.write(details.greeting)
Accessing Objects
To access an object, you can refer to its properties, as in the following two unrelated
example statements:
name = details.forename
if (details.username == "Admin") loginAsAdmin()
So to access the showUser method of an object of class User, you would use the following
syntax, in which the object details has already been created and populated with data:
details.showUser()
JavaScript Objects | 343
Assuming the data supplied earlier, this code would display:
Forename: Wolfgang
Username: w.a.mozart
Password: composer
The prototype Keyword
The prototype keyword can save you a lot of memory. In the User class, every instance
will contain the three properties and the method. Therefore, if you have 1,000 of these
objects in memory, the method showUser will also be replicated 1,000 times. However,
because the method is identical in every case, you can specify that new objects should
refer to a single instance of the method instead of creating a copy of it. So, instead of
using the following in a class constructor:
this.showUser = function()
you could replace it with this:
User.prototype.showUser = function()
Example 16-7 shows what the new constructor would look like.
Example 16-7. Declaring a class using the prototype keyword for a method
<script>
function User(forename, username, password)
{
this.forename = forename
this.username = username
this.password = password
User.prototype.showUser = function()
{
document.write("Forename: " + this.forename + "<br />")
document.write("Username: " + this.username + "<br />")
document.write("Password: " + this.password + "<br />")
}
}
</script>
This works because all functions have a prototype property, designed to hold properties
and methods that are not replicated in any objects created from a class. Instead, they
are passed to its objects by reference.
This means that you can add a prototype property or method at any time and all objects
(even those already created) will inherit it, as the following statements illustrate:
User.prototype.greeting = "Hello"
document.write(details.greeting)
The first statement adds the prototype property of greeting with a value of “Hello” to
the class User. In the second line, the object details, which has already been created,
correctly displays this new property.
344 | Chapter 16: JavaScript Functions, Objects, and Arrays
You can also add to or modify methods in a class, as the following statements illustrate:
User.prototype.showUser = function() { document.write("Name " +
this.forename + " User " + this.username + " Pass " + this.password) }
details.showUser()
You might add these lines to your script in a conditional statement (such as if), so they
run if user activities cause you to decide you need a different showUser method. After
these lines run, even if the object details has been created already, further calls to
details.showUser will run the new function. The old definition of showUser has been
erased.
Static methods and properties
When reading about PHP objects, you learned that classes can have static properties
and methods as well as properties and methods associated with a particular instance
of a class. JavaScript also supports static properties and methods, which you can con-
veniently store and retrieve from the class’s prototype. Thus, the following statements
set and read a static string from User:
User.prototype.greeting = "Hello"
document.write(User.prototype.greeting)
Extending JavaScript objects
The prototype keyword even lets you add functionality to a built-in object. For example,
suppose that you would like to add the ability to replace all spaces in a string with
nonbreaking spaces in order to prevent it from wrapping around. This can be done by
adding a prototype method to JavaScript’s default String object definition, like this:
String.prototype.nbsp =
function() { return this.replace(/ /g, ' ') }
Here the replace method is used with a regular expression (see Chapter 17) to find and
replace all single spaces with the string “ ”. If you then enter the following
command:
document.write("The quick brown fox".nbsp())
It will output the string “The quick brown fox”. Or here’s a
method you can add that will trim leading and trailing spaces from a string (once again
using a regular expression):
String.prototype.trim =
function() { return this.replace(/^\s+|\s+$/g, '') }
If you issue the following statement the output will be the string “Please trim me” (with
the leading and trailing spaces removed).
document.write(" Please trim me ".trim())
JavaScript Objects | 345
