2023 JavaScript Arrays So what is an Array anyways Well an array is simply a set of numbered elements | Assignment Collections

JavaScript Arrays

So what is an Array anyways? Well, an array is simply a set of numbered elements, where each element contains some data. An easy way to think of an array is to think of it as a list of indexed, or numbered, elements. An array has a name, which is used to refer to that list of elements. Each element in that list has a number (also referred to as an index), which identifies the position of that item within the array.

This is referred to as a one-dimensional array. In a one-dimensional array, each element can contain a single piece of information. Arrays are useful for storing information of the same type in various elements. For example, you could store the names of each person in our class in an array, so each element in our array would hold the name of a different student. Our array would be a collection of student names.

As I mentioned earlier, the position of an element in an array is referred to as its index. An array has a lower bound and an upper bound. The lower bound is simply the index of the first element in the array. The upper bound is the index of the last element in the array. By default, the lower bound of an array is 0. Therefore, in the visual example of an array above, “Element 1” would have an index of 0, “Element 2” would have and index of 1, and so on up to “Element 10” which would have an index of 9. In this example, the lower bound of this array is 0, and the upper bound of this array is 9, and there are 10 elements in the array. In JavaScript, the number of elements in an array is referred to as its length.

To create an array in JavaScript, you need to use the new operator, and then assign the result to a variable, as follows:

    var arrStudents = new Array();

Note: Remember that JavaScript is Case-Sensitive!

The above statement will create an array with no elements (has a length of 0). This is useful if you do not know ahead of time how many items will be stored in that array. For example, if you have a page where you are allowing the user to enter the names of students, and each time they do, you add that student’s name to the array. You do not know ahead of time whether the user will enter 0, 5, or 30+ student names, so you would just create an array with no elements, and you can add the elements as needed.

Now, if you know ahead of time exactly how many elements you will have in your array, then you can dimension an array to have exactly that many items. For example, if you knew ahead of time that the user was going to enter 10 students, and you wanted to create an array to hold the names of all the students in the class, then you would do the following:

    var arrStudents = new Array(10);

The above statement would create an array that has 10 elements, where each element would contain some data. Now, if you wanted to put the names of the students into the respective elements of the array, then for the first student, you would need to reference the first element in the array and put the student’s name in that element. You would do the same for all the other students and their corresponding elements. It is very important that you remember that since arrays are 0-based (meaning that the first element has an index of 0), you need to reference the first item in the array by using an index of 0. Here is how you would fill that 10 element array with student names:

    arrStudents[0] = ‘Student A’;

    arrStudents[1] = ‘Student B’;

    arrStudents[2] = ‘Student C’;

    arrStudents[3] = ‘Student D’;

    arrStudents[4] = ‘Student E’;

    arrStudents[5] = ‘Student F’;

    arrStudents[6] = ‘Student G’;

    arrStudents[7] = ‘Student H’;

    arrStudents[8] = ‘Student I’;

    arrStudents[9] = ‘Student J’;

Notice how the tenth student has an index of 9, since the array begins at 0. A common mistake that people make in looking at an array like this is to say that it contains 9 elements, however, it really contains 10.

Also take notice at how we are referencing each individual element of the array. After the array name we enclose the element index in brackets, like this:

    arrStudents[0] = ‘Student A’;

That statement just stored the string Student A in the first element of the arrStudents array.

If you know ahead of time, the values that you want to store in each element, JavaScript has a cool feature, which will allow you to pass, as parameters, the data to store in each element, and then it will automatically create and populate the array for you. Here is an example of that:

    var arrStudents = new Array(‘Student A’, ‘Student B’, ‘Student C’, ‘Student D’, ‘Student E’, ‘Student F’, ‘Student G’, ‘Student H’, ‘Student I’,

‘Student J’)

This just created an array of strings containing 10 elements, where each element contains the student’s name. Let’s say that you wanted to display in a message box, the third student in the array, how would you do that? You would just need to reference the third element in the array, as follows:

    alert(arrStudents[2]);

Note again that the statement above is using 2 to reference the third student, because the array is 0-based, so the first student is at index 0, the second student is at index 1, and the third student is at index 2.

The examples above created arrays of strings. However, we could just as easily create an array of integers by doing the following:

    var arrAges = new Array(29, 33, 40, 25, 38, 52, 44, 37, 31, 24);

You can find out the number of items in the array by looking at the array’s length property.

    alert(‘There are ‘ + arrStudents.length + ‘ elements in the array’);

That statement would display a message box, that displays the following message:

    There are 10 elements in the array

Now, you’re probably wondering what happens if you do not specify the size(length) of the array when you declare it, OR even if you do, what happens if you end up needing more elements. For example, maybe you have a textbox on your page (inside of a <form></form> of course), and an <Add Student to Array> button. This means that the user could add as many students to the array as they want to.

So how would you dimension this array if you don’t know how many elements you will need? Sure, you could dimension the array to be very large arrStudents[1000], but that would be a big waste, especially if you ended up only needing 5 elements, so that is not a good solution. The right approach would be to use something that is referred to as Dynamic Arrays. As you know, the word “Dynamic” means “changing”.

Therefore, what is meant by the name “Dynamic Array” is that the size of the array will change, or grow, as needed in your program. For example, if we had 5 students in an array, and then the user clicked the <Add Student to Array> button, then we would re-dimension the array to add one more element to the array, and then store the name of the student in that new element

    arrStudents[arrStudents.length] = ‘John Doe’;

Notice how instead of displaying an actual number inside of the brackets, I used arrStudents.length. Since arrStudents.length returns a number, I can use that in place of a number. The length of an array will always be equal to one more than the last element index (because remember, arrays are 0-based). So using the arrStudents.length in this case works out perfect because the next new element’s index would be the same number as the array’s current length.

Another thing that is useful to know when working with arrays, is how to loop through an array and display the data that is stored in each element. One way to loop through an array is by using a For/Next loop as follows:

    for(x=0; x<arrStudents.length; x++)

    {

        // Display the name of the currently indexed student

        alert(arrStudents[x]);

    }

The above statement is just using a simply For loop that loops through all of the elements in the array, one at a time. Each time through the loop, the counter (x) is incremented by 1. Looking at the alert() function, you can see that it is displaying the array element that is located in spot x.

Hopefully, this has given you a good overview of what an Array is, what it can be used for, and how to use it. Arrays are very simple to create and use, and they come in very handy when you start incorporating greater functionality into your pages. I have created an example that demonstrates the use of arrays. It is basically the scenario that I was using as an example in this lecture, where the user can enter a student’s name, and then add it to the array. They can enter as many names as they want to, and then they can see a list of all the student names that they have entered. Please take a look at the source code, and see if you can follow along as to what the JavaScript is doing: