Overview

Before continuing with a shopping cart or other programs that use arrays extensively, we really need to cover some advanced methods built into JavaScript arrays. You'll remember from the last section how tricky it was to do things like remove items from the shopping cart. You must have told yourself, "There has to be an easier way." Well, there is - advanced array methods.

Just because I put these methods in an "advanced" section, don't think that they are hard to understand or use. They aren't. They're quite easy to learn and extremely useful in most array applications.

The big advantage of using these methods is that they'll add, remove, or replace items in an array and update the array numbers automatically. You don't have to worry about keeping up with array elements, their index numbers, and other problems of trying to manipulate arrays manually with clumsy scripting.

Below is a quick list and explanation of the array methods we'll be learning in the upcoming tutorials. Note that I use "array_name" where you'd put the actual name of the array involved.

array_name.push("string" or variable name) - Adds a string or variable value to the end of an array. Gives it a sequential array number and updates the array.length value, too.

array_name.pop( ) - Removes the last item of an array and updates the array.length value.

array_name.unshift("string" or variable name) - Adds a sting or other value to the beginning of an array. Also changes all of the other element numbers to keep everything organized.

array_name.shift( ) - Removes the first item of an array and updates the array's numbering and length value.

array_name.reverse( ) - Reverses the order of elements in an array.

array_name.slice(starting index number, ending index number) - Removes items from anywhere in the array.

array_name.splice(starting index number, number of items to remove, what to add #1, what to add #2, ...) - Adds, removes, or replaces items in the middle of an array. It also returns a value of any removed element values.

array_name.concat( ) - Add two arrays into one array sequentially.

array_name.join( ) - Turns an array into a single string letting you pick the character you'd like to use as a separator (delimiter, demarcation). Great for getting an array on a cookie.

array_name.sort( ) - Rearranges the order of array element values alphanumerically according to ASCII values. You can also define other custom sorting schemes.

array_name.toSource( ) - Returns the source code for an array. Used mostly for debugging.

There are a few other methods, but these are the most used ones and the ones I'll be covering. We'll begin by making this page. It uses the push(), pop(), and reverse() methods.

The sample page is made with a simple tabular layout and form elements. You should already be familiar with these. The form elements are inside a <form> I NAMEd "form1". The small input textbox is NAMEd "inputbox". The textarea used for the output display is NAMEd "outputbox". I'll describe the functions in the rest of this tutorial.

Push()

The first button adds whatever you enter into the text box to the bottom of the array, which is displayed in the textarea to the right and updated with each button click.

This is done using the the push() method. The syntax of the push() method is:

array_name.push(new_item)

The "new_item" in the parentheses can be a string value, a literal value, or a variable. In the example, it's a variable. The button has an onClick event handler that leads to a function I called "add_bottom()".

Note that I made a new blank array to hold the incoming data. This array is made outside of any functions so it can be used globally by all of the functions. Here's the code:

<script language="JavaScript">

var dynamic_array = new Array();

function add_bottom(){
var item = document.form1.inputbox.value;
dynamic_array.push(item);
document.form1.outputbox.value = dynamic_array;
}//ends add_bottom function

</script>

You can see that before the function I coded the new Array() and assigned it to the VAR "dynamic_array". The function begins by getting the inputbox value and storing it in a variable called "item". The next line is the new one. It uses the push() function to add "item's" value to the bottom of the "dynamic_array" array.

Don't forget to add the array's name and a dot before adding the push() part.

The final line has the textarea display the contents of "dynamic_array". Each time you enter something and then hit the "Add To List" button, the array grows to include the new item at the bottom of the array. The new item will then be displayed at the end of the list in the textarea.

Pop()

The pop() method removes the last item of an array. It's used in the function of the second button in our example. The syntax of pop() is simply:

array_name.pop()

Don't worry about putting anything in the parentheses. The above is all you need to remove the last item of an array. In the example, I used pop() in the "remove_bottom()" function:

<script language="JavaScript">

var dynamic_array = new Array();

function add_bottom(){
var item = document.form1.inputbox.value;
dynamic_array.push(item);
document.form1.outputbox.value = dynamic_array;
}//ends add_bottom function

function remove_bottom(){
dynamic_array.pop();
document.form1.outputbox.value = dynamic_array;
}//ends remove_bottom function

</script>

Notice that we don't need to get any data from the textbox to remove the last item. We just need to pop() it off using "dynamic_array.pop()". That's it. The second line updates the display in the textarea. You'll note in the example that the last item disappears from the list.

The best reason to use pop() is that you don't have to worry about error control when the array is empty. If you hit pop() and there's nothing in the array, nothing happens. No error and no error control needed. Give it a try in the example

Reverse()

The reverse() method does just what you'd expect. It inverts an array's elements. The syntax is simple:

array_name.reverse()

In the example, I used this for the third button's "reverse_items()" function:

<script language="JavaScript">

var dynamic_array = new Array();

function add_bottom(){
var item = document.form1.inputbox.value;
dynamic_array.push(item);
document.form1.outputbox.value = dynamic_array;
}//ends add_bottom function

function remove_bottom(){
dynamic_array.pop();
document.form1.outputbox.value = dynamic_array;
}//ends remove_bottom function

function reverse_items(){
dynamic_array.reverse();
document.form1.outputbox.value = dynamic_array;
}//ends reverse_items function

</script>

As with the pop() method, there's no need to read the data in the textbox. We just need the line "dynamic_array.reverse()" to invert the array elements and the next line to update the display in the textarea. See how the list reads backwards? That's what reverse() does.

Summary & Exercises

There are a lot of handy array methods that make manipulating arrays easy. So far, we've learned:

push( ) - to add a single item to the bottom of the array.

pop( ) - to remove the last item of an array.

reverse( ) - to invert the order of array elements.

Try making a page that displays a fixed array and then making a box like in the example that will add to it, reverse it, and remove the last item.

Next we'll learn how to add and remove items from the top of an array.

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index