The JavaScript Diaries: Part 13/Part 3

[previous] [next]

The JavaScript Diaries: Part 13 - Array Properties and Methods

pop()

This method removes the last element in an array. It's similar to squeezing the array and the last element "pops" out. Using our example above, we can write this snippet:

var chevCar = new Array("Nova","Impala","Corvette");
alert("The array chevCar contains " + chevCar);
chevCar.pop();
alert("But now, the array chevCar contains " + chevCar);

So what happened here? Well, first we created a new instance of the array chevCar and assigned three elements ("Nova","Impala","Corvette") to it. Then we used an alert window to display the contents of the chevCar array. Next, we used the pop() method to remove the last element ("Corvette") from the array. Finally, we displayed the remaining elements of the array ("Nova","Impala"). Try it and see how it works.

We can also use the pop() method with the concat() method from above:

var chevCar = new Array("Nova","Impala","Corvette");
var fordCar = new Array("Escort","Pinto","Taurus");
var volksCar = new Array("Beetle","Jetta","Quantum");
var combCar = chevCar.concat(fordCar,volksCar);
alert("The variable combCar contains " + combCar);
combCar.pop();
alert("The array combCar contains " + combCar);

Now it should combine all of the elements from each array into the variable combCar, and then remove the last one ("Quantum").

If you want, the element that is removed can be assigned to a variable and reused later.

var chevCar = new Array("Nova","Impala","Corvette");
alert("The array chevCar contains " + chevCar);
var rmCar = chevCar.pop();
alert("The removed element is " + rmCar);

push()

The push() method will add new elements to the end of the array. Since it's the opposite of the pop() method, it works in reverse — you add the element you want appended to the back, i.e., you "push" it in.

var chevCar = new Array("Nova","Impala","Corvette");
alert("The original lineup is " + chevCar);
chevCar.push("Camaro");
alert("The new lineup is " + chevCar);

Do you want to add more than one element? No problem.

var chevCar = new Array("Nova","Impala","Corvette");
alert("The original lineup is " + chevCar);
chevCar.push("Camaro","Malibu");
alert("The new lineup is " + chevCar);

I found an excellent script that demonstrates how the push(), pop(), and join() methods, along with the length property, can be used with a loop statement (taken from Sams Teach Yourself JavaScript in 21 Days, Watt, Sams Publishing, 2002, pp. 185-186). Place this script in the head section of the document:

var ages = new Array(12,57,32,6,21,19);
var adults = new Array();
var minors = new Array();
while (ages.length) {
  var tempAge = ages.pop();
  if (tempAge ";
  msg += "There are " + minors.length + " minors ";
  msg += "with the ages " + minors.join(", ");

Next, place this in the body section, within the proper script tags:

document.write("
" + msg + "
");

Try it out yourself. Pretty neat, huh? Let's break it down and see what is happening with this script.

First, we created three new instances of the Array object: ages, adults, and minors. However, we only gave elements to the ages variable. The other two are empty for right now. Next, we set up the loop using a while statement. It breaks down like this: We have previously looked at the while statement. It's used for short comparisons, and that's exactly what we want to do here. We want to compare the ages and sort them. First, we stated that, as long as we've not exceeded the maximum number of elements in the ages array (using the length property), the statement will keep looping. Next, we removed the last element from the ages array and assigned it to the tempAge variable. If the value of the string contained in the tempAge variable is less than 21, add ("push") it to the end of the elements in the minors array; otherwise, add it to the end of the elements in the adults array. (Obviously, the first time the element is "added" to either array, it will be the first element in that array. The others will be added behind them.) This will continue until all of the elements of the ages array have been removed. After all of the arrays were sorted, we created the variable msg and gave it a value. We then added three other statements to the value of the msg variable. Finally, we used the document.write statement to display the results of the script on the Web page. It should look like the screen below.

[previous] [next]

URL: