Web Programming JavaScript Learning JavaScript Basics - Arrays

Learning JavaScript Basics - Arrays JavaScript Sep 26, 2005

Learning JavaScript Basics - Arrays Arrays

If you are unfamiliar to what an array is, an array is just a collection of data that is refered to by a common name. Arrays in JavaScript start with element "0." Arrays can offer you a convient way to group related variables. Also, in JavaScript, data items in arrays can be of different data types. This is unlike most programming languages. Furthermore, JavaScript array elements are not required to be of the same data type. This means, you could have one element as an integer, the next boolean, another as float and so on. However, if you plan on doing calcuations with array elements, the elements must be of the same data type.

Here are some useful advantages of using arrays:

  • Less amount of coding for the programmer.
  • Program will take up less memory, thus executes faster.
  • Makes it easier to process related groups of data.

Declare Your Array

In JavaScript, it is required to declare any array before it can be used. You can accomplish this by assigning the array a name, ='s sign and the keyword NEW, Then Array (capital A) and the # of elements in parenthesis you plan to use.


<arrayname> = new Array(<# of elements>);
myArray = new Array(50);

*Just make sure that you capitalize the "A" in array on the right hand side of the equals sign. If not, you will get an error.

Now just to sort of discuss why arrays are important and useful. What if you needed to get the average of say, 50 numbers? Without an array, you would write 50+ lines of code. On the other hand, with an array you can accomplish this by 7 or 8 lines of code. And that would be the same if you needed to find the average of 100000 numbers. Instead of writing 100000 lines of code, 7 or 8 will do the trick.

Example of using an array to average numbers:

a = new Array(50);
var x, sum;
sum = 0;
for (x=0; x <= 49; x++)
a[x] = x;
sum = sum + a[x];
avg = sum / 50;
document.write("The average is "+avg+"<br>");

*In the code sample we used a for loop. We will discuss these a bit later.

Array Length's

JavaScript allows you to find the number of elements in your array with the LENGTH property. This will show you the number of elements in the array. The LENGTH property is a statement just like a variable. Here is how you would use it on an array named, "theArray."


Joining Array Elements

Ok, what if you had an array and you wanted to combine each element to form a single sentence? Well, with the join(); function, it is quite simple! The join function will convert your array elements to a string. And a comma (,) is inserted between each element as it is converted. However, you can specify a different seperator.


array1 = new Array(5);
array1[0] = "how";
array1[1] = "are";
array1[2] = "you";
array1[3] = "this";
array1[4] = "morning?";
x = array1.join(' ');

this would output: How are you this morning?

Notice my join function. it has ' ' included. This makes it output a space between each element. also doing just, .join(" "); would work. But if nothing was inside the ( and ), it would output: How,are,you,this,morning? It defaults with the comma. If you want anything different, you must specify it. Just make sure you sorround it with ' and ' becuase just .join( ) would make an error.

Sorting Array Elements

You have the ability with JavaScript to sort your array elements, and this is accomplished with the SORT property. It will sort them in ascending alphabetical order. They are arranged according to their ASCII character set. ASCII maps out each character with a combination of eight 0's and 1's. Each letter and number has an ASCII value associated with it.

If sort(); is used on numbers, the numbers are sorted alphabetically instead of numerically. So say an array with: 1,2,3,4,11,22 would sort as: 1, 11, 2, 22, 3, 4. So basically sort(); has to be used with strings.

Heres an example of an array and the sort(); property:

array1 = new Array(5);
array1[0] = "apples";
array1[1] = "banannas";
array1[2] = "oranges";
array1[3] = "pears";
array1[4] = "mangos";
sort = array1.sort();

This would output: apples,banannas,mangos,oranges,pears

Just as the .join(); function, you can enter html between the ( and ). So, if you put, .sort('<br>'); this would output each item on a line by itself. And using .sort(" "); would put a space between each item instead of a comma.

Example Program 3

subscribe to newsletter