While JavaScript has many similarities to more robust
languages like Java and C, it does have many features that are less than
intuitive. JavaScript arrays are one such design element that provides some
obscure features that developers often overlook. This article examines some of
these features by using JavaScript arrays to build stack and queue data
structures.

Going beyond arrays

You can use the JavaScript Array object to store a set of values with a single
variable name. The JavaScript in
Listing A creates an array with five elements (assigned Web site addresses) and
loops through the array, displaying each value in an alert dialog box.

JavaScript doesn’t necessarily support multi-dimensional
arrays, but you can have arrays of arrays. The JavaScript Array object provides
more than just basic array support; it can also be used to provide queue and
stack functionality.

Queue up

A queue is a data structure utilizing the first in, first
out (FIFO) approach to storing and handling data. It is analogous to people in
line at a bank, where they are served sequentially. New items added to a queue
are added to the back or end of the list.

The JavaScript Array object provides two methods for using a
queue in your code:

  • shift: removes and returns the
    first element of an array.
  • push: allows you to add one or
    more elements to the end of an array. It returns the new length of the
    array.

Both methods affect the length of the array, with push
adding one and shift subtracting one to/from the length of the array. The code
in Listing B shows the two methods
used to build a queue of numbers and retrieve the first queue element.

The following output is generated:

1
2

It is a simple example that adds two integers to the array
(1 and 2) via the push method. Next, the shift method returns the first element
from the array (1) and two more values are added to the array (3 and 4); the
first element is retrieved (2) and displayed.

Another available method is unshift, which allows you to
insert one or more elements at the beginning of an array unlike the pop method,
which adds item to the end. The unshift method returns the new length. In Listing C, I altered the previous
example to use the unshift method.

You’ll notice the output generated changes since everything
is now added to the beginning of the array. The following values are displayed
when the script is run via the button of the page:

2
4

While a queue focuses on the first element in the data
structure, a stack is more interested in the last item added.

Stacked

A stack is a data structure that utilizes the last in, first
out (LIFO) approach to handling data. Or, you can think of it as a push down
list, where new items are pushed down on the existing items in the list, so the
last one added is the first one in the list.

The push method is used with the array object’s pop method
to provide stack functionality. The pop method is used to remove and return the
last element of an array. Basically, it pops off the last element added to the
array. This method affects the length of an array (subtracting one for the item
removed). The sample in
Listing D
uses both the pop and push methods to utilize a stack data structure.

The following output is generated:

2
4
3

The functionality of these methods kind of overlaps because
you could utilize a stack data structure using the shift/unshift methods as
well. The code in
Listing E rewrites
the previous stack example using the shift and unshift methods.

You can rewrite the previous queue example by using unshift
and pop array methods as the example in
Listing F demonstrates.

More options

Like every other development language, JavaScript has its
own set of quirks. A good example is the multiple uses of the array object,
which allows you to easily utilize stack and queue data structures. These data
structures are just one more development feature to have at your disposal when
building Web applications.

Miss a column?

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton’s column.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.