<!-- JavaScript

Arrays: Part 1 - Getting Started

This document covers the topic of Arrays in JavaScript. It requires that you've already familiarized yourself with the String Class, which has been covered in a two-part article (Part 1: String Object, Part 2: String Class Methods). This is due both to similarities in the two classes, and the dependance of many of the Arrays Methods of String Objects.

A JavaScript Array is an ordered collection of elements. Each element is positioned at a specific index within the array, which is an integer that always starts at zero (0). This is quite similar to the String Class. What's also similar, is that indexes are incremented by 1 as elements are added, and they're normally added sequentially. Unlike Strings, in which each at each index there will be one character, in Arrays, at each index there can be any one element of any data type. It can be a primitive, an Object, or even another Array. One Array can contain different data types within it, as at each index there will be an individual element with an individual data type.

A Bit of Technical Information

The following paragraph may be somewhat technical if you're relatively new to programming, so you should know that it's mainly here for those who've programmed in other languages in the past. You don't have to understand it fully to keep going; in fact you'll be fine by moving on to Declading Arrays. But give it a shot, you might understand more than you think.
Arrays in JavaScript are actually Objects. They're Objects in the sense that a String is an Object, and a Date is an Object. What that means is, there isn't an "inherent" Array primitive type in JavaScript, nor is it a built-in base element of the language. It is defined in the language specification, however, and so it, along with all of its properties and methods, will always be there. It is important to understand this because it's easier to understand why Arrays behave the way they do. In many other languages (from which JavaScript was originally derived, such as Java, C, C++), built-in Arrays do not have properties, and are either contained within Objects that 'give' them methods and track their size/length, or are given as arguments to functions (you can do both of these things in JavaScript, mind you, this is on-top of the built-in properties and methods that the Array Class already provides you with). In JavaScript, however, Arrays come 'pre-packaged' with many features of their own which you can use out-of-the-box, enabling you to write a useful script using several lines, without requiring any external 'library' or 'include' in doing so. This is, of course, in the nature of most scripting languages, but in JavaScript, it was specifically decided that the Array entity itself will by written using elements of the language itself. Why would that be done? Because as you'll see later on, some external elements can then appear to be pseudo-arrays. The DOM Node list, for example, is not an Array, but it will seem like one when you use it. This will become very useful if you decide to use the powerful DOM Manipulation techniques which virtually all modern browsers afford you. When you deal with external elements like that, which seem Array-like, or pseudo-Arrays, you'll understand why it's important to be able to create an array-like 'class' within JavaScript.

Declaring Arrays

As mentioned, Arrays are actually Objects in JavaScript, and so we use the new operator to create them:


The above declaration created an empty array, which means an array that contains no elements. This is perfectly valid, just like a String with zero characters is perfectly valid.

If order to see how many elements there are in the array, you'd use something that, again, will be very simimlar to using Strings -- the length method:


It was intentionally designed so that Arrays and Strings will have simimlar (or the same) method names when their function is essentially the same. This way, you don't have to wonder which one is used in which class. Clearly, you're not calling the same exact method: myString.length and myArray.length are, internally, completely different, but you just want to write functional, easy-to-read, and easy-to-maintain scripts, so since they could give them the same name for your convenience, they did.

If you know how many elements your Array will contain when you're declaring it, you can give that as an argument at declaration time:


This will give you an Array with 10 elements, all declared, but uninitialized, just like normal var declarations. They are simply undefined.

An aside: To assign values to an array, you don't have to worry about the array's length. It will resize dynamically to accomodate your data. That is, if you don't know how many elements you're going to be adding into the array, you can always declare an empty one, and add elements are you go along. The reason for the ability for declaring Arrays with a predefined amount of elements is, mosty, that if you want to limit the amount of elements that the array will hold, you can do so, using the length mehtod, and simple conditioning. Also, in very intensive scripts, declaring the amount of elements you're going to need within an array ahead of time, if you know this amount, will translate into faster execution time, since the interpreter only has to set aside the memory for the array once, instead of needing to gradually append elements and grow the array along the way.

To assign values to an array, you'd most commonly use the index bracket notation:


In the above script, a new Array is declared, and then three values are added by directly assigning them to indexes on the Array (in this case, indexes 0, 1, and 2). I've assigned strings to all of the elements here, but you can assign different data types to elements within the same Array. I then handed the first element of the Array (myArr[0]) to the alert function, and as you can see, it's used just like any other variable -- assigning a value to an element, and reading a value from an element, it just like the two respective actions done with a usual variable. This example also reveales more information about how the Array elements are regarded. By handing the first element of the array to typeof, we learn that JavaScript regards that element as a String, just like it would regard any ordinary variable that you've assigned a String to. In fact, you can use bracket notation access (myArray[index]) almost anywhere you're able to use a variable. The last function called in the script above is the length function, which informs us that there are, indeed, three elements in the array.

You may also declare and assign values to an array in the same statement:


This time, the Array was passed three Strings as arguments. By doing so, the Array that was created was populated by three String values. This allows you to create Arrays in a single step, significantly reducing the amount of code necessary to "set up an Array". Being dynamic, you can keep adding elements to an Array created in the manner the way you normally would:


Initially, the Array was created and assigned three values. Then, another value was assigned, using bracket notation, to its 3rd index, making the Array four-elements-long.

When assigning new values using bracket notations, you may assign values to any index of an Array, and, if that index is higher than the length of the Array, JavaScript will automatically resize the Array to accomodate the index you've assigned that value to (Actually, saying that "you may assign values to any index of an Array" is not true. In JavaScript you may only assign 4,294,967,295 elements to any single Array. It's a limitation we all have to deal with). That means that you may leave 'gaps' in assignments, if you wish:


In the above example, an Array was assigned three Strings, which made it three elements long. Then, a String was assigned to index 9, making it 10 elements long. So what about the elements in index 3 through 8? They're just like the elements in any uninitialized Array, or, in fact, in any uninitialized variable in JavaScript: they're undefined.

More on Assignments

As was mentioned earlier, Arrays are Objects. Hence, you still begin an Array assignment with var myArrayName = . There is another way to assign an Array to a variable if you want to assign literals:


This is a literal representation of an Array. It's also sometimes referred to as a "Raw List", but this is because of cross-discussion about JavaScript and other languages, there are no actual "Raw Lists" in JavaScript, this is a declaration, and an assignment at the same time, just like new Array(...) (in fact, the two are exactly the same, as far as the JavaScript interpreter is concerned).

If you wish, you can always assign an entirely new Array to a variable, entirely erasing the Array that occupied that variable previously:


You can actually both read and write to the Array.length property. Writing to the length will resize the Array in the simplest way possible: If the new size is larger than the current size of the Array, then new, undefined elements will be added. If the new size of the Array is smaller than the current size, then all elements that no longer 'fit' will be discarded; that is to say, elements from the end of the Array that are located at indexes that the Array no longer accommodates, will be removed.


This example shows us several things. First, the Array is initialized and assigned four String values (using literal bracket notation, which we know to be exactly like using the new operator to declare a new Array Object). Then, the Array is resized to 8 elements, by assigning the literal '8' Number Primitive (not String) to its length property, which gives it four new unititialized elements at indexes 4 through 7. We then check what's at index 3, the fourth element, to see that "Delta" is still there where we left it. At this point we resize the Array again, this time to 3. This means that index 3 will no longer fit the Array, which we see right after that, when we alert index 4, and get 'undefined'.

Now look at the last line in that script. Why would I re-check the length of the Array again here? To demonstrate something important: Checking an Array index will not resize the Array. You have to actually assign something to an index in order to resize the Array -- just giving it as an argument, in this example, to the alert function, will not effect its size. Nor will trying to read its contents in any other way make the Array resize. This is a very good thing, since imagine what would happen if just 'touching' an Array index would resize it. JavaScript gives you just the right amount of flexibility here: It's very easy to resize an Array, but you have to 'want' to do so.

In Part 2 of JavaScript Arrays, we'll get into the first part of Array Methods.