Let's assign some string values to some variables.
var city0 = "Atlanta";
var city1 = "Baltimore";
var city2 = "Chicago";
var city3 = "Denver";
var city4 = "Los Angeles";
var city5 = "Seattle";
The variable names are all the same, except they end in different
numbers. I could have
named the variables buffy, the, vampireSlayer, and so on if I'd wanted
to, but I chose to
name them this way because of where this discussion is going.
Now, having made these assignments, if I code...
alert("Welcome to " + city3);
...an alert displays saying, "Welcome to Denver".
I'm going to show you another type of variable, one that will come in
handy for many
tasks that you'll learn about in later chapters. I'm talking about a
type of variable called an
array. Whereas an ordinary variable has a single value assigned to
it—for example, 9 or
"Paris"—an array is a variable that can have multiple values assigned to
it. You define an
array this way:
var cities = ["Atlanta", "Baltimore", "Chicago", "Denver", "Los
Angeles", "Seattle"];
In the example at the beginning of this chapter, I ended each variable
name with a number.
city0 was "Atlanta", city1 was "Baltimore", and so on. The array I just
defined is similar,
but in the case of an array defined the way I just defined one,
JavaScript numbers the different
values, or elements, automatically. (You can control the numbering
yourself by defining
elements individually. See below.) And you refer to each element by
writing the array name
—cities in this case—followed by a number enclosed in square brackets.
cities[0] is
"Atlanta", cities[1] is "Baltimore", and so on.
Because JavaScript automatically numbers array elements, you have no say
in the
numbering. The first element in the list always has an index of 0, the
second element an index
of 1, and so on.
This is the alert I coded above, but now specifying an array element
instead of an
ordinary variable.
alert("Welcome to " + cities[3]);
An array can be assigned any type of value that you can assign to
ordinary variables. You
can even mix the different types in the same array (not that you would
ordinarily want to).
var mixedArray = [1, "Bob", "Now is", true];
In the example above, mixedArray[0] has a numerical value of 1,
mixedArray[1] has a
string value of "Bob", and so on.
Things to keep in mind:
The first item always has an index of 0, not 1. This means that if the
last item in the list
has an index of 9, there are 10 items in the list.
The same naming rules you learned for ordinary variables apply. Only
letters, numbers, $
and _ are legal. The first character can't be a number. No spaces.
Coders often prefer to make array names plural—cities instead of city,
for example—
since an array is a list of things.
Like an ordinary variable, you declare an array only once. If you assign
new values to an
array that has already been declared, you drop the var.
As you learned in earlier chapters, you can declare an empty variable,
one that doesn't
have a value. Then you can assign it a value whenever you like. And you
can change its value
at will. You can do all these things with an array, as well.
This is how you declare an empty array.
var pets = [];
Assume that the array pets has already been declared. This is how you
assign values to
it.
1 pets[0] = "dog";
2 pets[1] = "cat";
3 pets[2] = "bird";
In the example above, I defined the first three elements of the array,
in order. But you can
legally leave gaps in an array if you choose to (not that you normally
would). For example,
suppose you start with the same empty array and code these lines.
1 pets[3] = "lizard";
2 pets[6] = "snake";
Now, if you refer to pets[3], you'll get "lizard". If you refer to
pets[6], you'll get
"snake". But if you refer to pets[0] through pets[2] or pets[4] or
pets[5], you'll get
undefined.
You can assign additional values to an array that already has values.
Assume that the first
three elements of the array pets are "dog", "cat", and "bird". Then you
write this code.
1 pets[3] = "lizard";
2 pets[4] = "fish";
3 pets[5] = "gerbil";
4 pets[6] = "snake";
Now the array has 7 elements: "dog", "cat", "bird", "lizard", "fish",
"gerbil", and "snake".
If you assign a new value to an array element that already has one, the
old value is
replaced by the new one.
Using the keyword, pop, you can remove the last element of an array.
Suppose you have an array, pets, whose elements are "dog", "cat", and
"bird". The
following code deletes the last element, "bird", leaving a two-element
array.
pets.pop();
Using the keyword, push, you can add one or more elements to the end of
an array.
Suppose you have that same array consisting of "dog", "cat", and "bird".
The following
code adds two new elements to the end of the array.
pets.push("fish", "ferret");