Jonathan Weiß

Let us assume, that you wrote some code to extend the Array class to a method. In this case we will add the min() method, which will return the lowest numeric value of all elements inside the array:

Array.prototype.min = function min(){
 
  var returnValue = Number.MAX_VALUE;
 
  if(this.length === 0){
    return false;
  }
 
  for(var i = 0; i < this.length; i++){
    if(this[i] < returnValue){
      returnValue = this[i];
    }
  }
 
  return returnValue;
 
};

This methods work fine, but you will notice a strange behavior if you cycle through all array elements using a for loop construct.

var list = [1, 2, 3];
for(var i in list){
  console.log(list[i]);
}

The code will produce this output:

1
2
3
min()

It seems that the for loop also iterates over the recently added method.

The method can only be removed from the Array class, not from an instance of it:

delete Array.prototype.min;

It can not be removed, but overwritten by assigning a value to it:

list.min = 0;

So, if you still want to use the for loop to iterate over the entries, you have to check the type of each entry:

for(var i in list){
  if(typeof(list[i]) != 'function'){
    console.log(list[i]);
  }
}

Note: this is a really old article which I never finished at first. As I had some time waiting at the airport, I managed to finish the article and the demo site. ;-)

Some months ago I mentioned how to prevent the browser from selecting HTML elements. While I was working on an early prototype of a new functionality, I discovered an interesting pit fall in handling events in all browsers.
When I tried to move an HTML element, suddenly it was not moved on the screen. Furthermore it seemed that no mouse event was handled to my functions. I double checked that the event handles were assigned to the specified element and also checked the functions which should be called on the mouse events.
It was like something strange cut off the event handle and did not inform my functions about the mouse move. It took me a while to notice the strange new cursor which my Firefox showed. The browser showed a typically drag-and-drop cursor. By selecting the GUI element, I unnoticed selected some text which lay inside this element!
When you select text in your gecko-based browser you can drag it into places like the address, a textarea or create a bookmark based on the selected content. This is a nice feature, but it is important to know this internal method has priority against JavaScript functions which are bound to events.
I have created a little test page on which you can have a look at this behavior.

So, remember: internal browser events are fired before custom events.

You can save execution time by assigning values to variables at the same time there are initilized.

var myString;
var myArray;
 
myString = 'lorem ';
myString += 'ipsum';
 
myArray = new Array();
myArray.push('foo');
myArray.push('bar');

You can also save a little amount of time by avoiding concating strings via the += operator.

var myString = 'lorem ipsum';
var myArray = ['foo', 'bar'];

The best way to comment directly in the source code is using JSDoc, the JavaScript equivalent of JavaDoc.

To comment on the code, just insert specially formatted comment lines (starting with /** instead of /*) containing a description text and tags before each class, attribute or method. As in JavaDoc, there a several tags to describe the source code: @param, @return, @version and many more.
If you have included this comments, you have to run a perl script over the javascript files which creates a bunch of HTML files containing the information from your sources.

But be careful if you are commenting on private methods! In this example there will be no comment for _privateMethod():

/**
 * Description for this MyObject..
*/
function MyObject(){
 
/**
 * @param {object} myElement Description for myElement
 * @private
*/
  var _privateMethod = function(myElement){
    ;
  }
 
/**
 * @return {number} Answer to Life, the Universe, and Everything
*/
  this.publicMethod = function(){
    return 42;
  }
 
}

JSDoc does not support this way of defining private methods. You have to use this scheme:

 
function MyObject(){
  function _privateMethod(){
    ;
  }
}