Array.prototype - not sure what this does! (Q1)

Question

It is worth mentioning that I'm a "halfway decent" Javascript programmer but the thought of really learning Javascript WELL like some of the ingenious stuff I've seen guys write seems daunting. I am just a non OOP php programmer and JS seems like a whole new world.

there is a block of code I found in this script: fisheye navigation

[].indexOf||(Array.prototype.indexOf=function(v,n){
 n=(n==null)?0:n;var m=this.length;
 for(var i=n;i<m;i++)if(this[i]==v)return i;
 return-1;
});

and honestly I don't even see it assigning a value to a variable! It seems the writer is sniffing for the indexOf method but that doesn't make sense..

I figure that if I dissect this code section by section (which looks to be really well-written) I will be on my way to undertanding the deeper javascript concepts. Thanks!

• Salvatorelab: it creates a function called "indexOf" inside Array if it does not already exist.
• Quentin: ... indexOf=function... - One =, one assignment.

Answer 1

This is a polyfill for the Array.prototype.indexOf method (https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/indexOf). You can see a support table for it here: http://kangax.github.io/es5-compat-table/#Array.prototype.indexOf

What this code does is see if Array.prototype.indexOf exists by checking on the method on an array literal. If it doesn't it assigns a function to Array.prototype.indexOf, essentially filling in the missing functionality.

Answer 2

The indexOf() method is not supported in Internet Explorer 8 and earlier. http://www.w3schools.com/jsref/jsref_indexof_array.asp

Author just makes another implementation of indexOf method if it not exists.

• John Dvorak: w3schools is a terrible resource. I suggest this one: developer.mozilla.org/en-US/docs/JavaScript/Reference/…
• Dmitry Volokh: developer.mozilla.org is really awesome, but why do you think that w3schools is terrible?
• John Dvorak: Please read w3fools.com; w3schools contains a lot of misinformation, and more keep appearing.
• Dmitry Volokh: As I suspected - mistakes and refererence to w3c. Thanks!

Answer 3

the above code checks if the function indexOf is associated with the Array object (It is not available on older browsers using versions of Javascript below 1.6). If not, it assigns the following function to the Array object's prototype

// v is the element you are checking for in the array and n is the index from which the check starts
Array.prototype.indexOf = function(v,n) {
 // check if the "fromIndex" n has been specified, if not start the check from the first element
 n= (n==null) ? 0 : n;
 // m stores the length of the array in which the check is being performed
 var m=this.length;
 // using the for loop to iterate each element of the array
 for(var i=n;i<m;i++)
 if(this[i]==v) // checking if the array element (this refers to the array) is the same as the supplied value, if so it returns the index of the element which matches the supplied value 
 return i;
 // If supplied value is not found in the array, the return value is -1
 return-1;
});

The indexOf function is well explained at MDN

Answer 4

when broken up its self explanatory:

//find out if indexOf exists if not add function to prototype
 [].indexOf||(Array.prototype.indexOf=function(v,n){
 //start search at n which is passed in, if n is not passed in start at 0
 n=(n==null)?0:n; 
 // get length of array
 var m=this.length; 
 for(var i=n;i<m;i++)
 {
 //if you find the value return it
 if(this[i]==v)return i; 
 }
 //if value wasnt found return -1
 return-1;
 });

• Bergi: It's not called null-coalescing operator in JS but simple OR, and the indexOf property won't yield null.