Create data structures with JavaScript arrays
Takeaway: The JavaScript array object provides powerful support for assigning multiple data values to one variable, but you can also use it to utilize stack and queue data structures in an application. Get more information about JavaScript stacks and queues.
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.
Posted by Work From Home Blogger at 8:57 PM::
0 Comments::
--------------------oOo--------------------
