Analysing Code

Sometimes there are JavaScript commands that you may be unaware of that will greatly reduce the amount of code required to perform a particular task. As an example let's consider the situation where we have two select lists where the content of the second list is determined by what is selected in the first list. We are not going to look at the entire code to do this but just at one small piece of it.

We'll imagine that we have already retrieved the value selected from the first select and have the values and texts for the second list already loaded into an array called optArray with each entry consisting of 'value|text'. We'll also assume that we have already got a variable called s2 pointing at the second select. This just leaves us with the code to take the values from the array and to add them to that second select.

The piece of code that we need in order to do this part of the process is very short - provided that we take full advantage of the JavaScript commands specific to arrays and select lists. If you don't take advantage of these commands then the code to do this simple task would be a lot longer. Here's all the code that we really need:

optArray.forEach(function(a) {
var p = a.split('|');
s2.options.add(new Option(p[0],p[1]))});

Now if you are just starting out with JavaScript then it is likely that you may not understand much of this code at all. Your code to do this probably looks more like the following:

for(vari = 0; i < optArray.length; i++){
var p = optArray[i].split('|');
var newOption = document.createElement("option");
newOption.value = p[0];
newOption.innerHTML = p[1];

Now the first thing that the short version does is to substitute the Array forEach method in place of the for loop. This gets rid of the need to reference each element in the array based on its position and allows us to simply reference each value in the array without needing to distinguish which one it is. The short version of the code will automatically skip over any empty spots in the array as well so any extra commas in the array code will not cause the option list to break.

Secondly the array that we are splitting each element into in order to separately identify the option value and the option text is now defined locally to the function that is processing an individual option. We are not polluting some higher scope with a variable that is only needed temporarily to perform an assignment.

JavaScript has always provided an object specifically for creating options so we don't need to create a tag, add a value and content in order to have something to add to the select. Simply calling new Option(value,text) will create a complete option along with the value and text attributes. Note that the text content to be displayed in the option is identifiable via the text property so using innerHTML is unnecessary even with longer variants.

Finally the select object has an options property that contains all of the options already in the select and that property also has its own add method for adding additional options to the select so there is no need to use the appendChild method for adding options.

JavaScript considers select lists (including all the options) as a single element with its own properties and methods that are far more efficient at manipulating selects than using the basic DOM commands are for doing the same thing (the same applies to other composite elements in the HTML such as tables).

As you can see, the only command from the long version that still exists in the shorter one is the string split call that separates each array element into the value and text for the option. Everything else in the processing has been changed to use commands specific to the type of element being processed. Learning the way that the different composite elements are able to be accessed more directly in JavaScript allows you to write much shorter and cleaner code for processing these elements. Not only that the element specific code is also far more efficient than the alternative in execution time as well in most browsers (Firefox appears to be the sole exception to this).


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow