Adding isArray method in native JavaScript Array object

typeof method in JavaScript returns wrong value if you pass an array as parameter. To fix this, we can add isArray method to JavaScript’s native Array object. In future, if browser includes one such method, the below code will not break as it will use browser’s native code in that case.

This will be handy fix for typeof known bug for Arrays.

/**
 * @author rajakvk <rajakvk(at)gmail.com>
 */
if (!Array.isArray) {
    
    /**
     * Returns true if an object is an array, false if it is not.
     * @name isArray
     * @methodOf Array
     * @param {*} value 
     * @returns {Boolean}
     */
    Array.isArray  = function (value) {
                
        return Object.prototype.toString.call(value) === '[object Array]';
        
    };

}

Array like JavaScript Objects (array LIKE JAVASCRIPT objects)

Everything in javascript is object. It a powerful feature. So Array is object. Stay focused.

// straight forward object, property creation & storing, retrieving value 
var obj = {}; // equivalent of new Object()
obj.age = 22; // create a property age and store value in it
console.log(obj.age); // 22
console.log(obj['age']); // 22
//

Now comes the interesting part with array. Still remembering Array is an object??

//
var arr = [];  // equivalent of new Array()
arr[0] = 'one';  // adds to the array
arr[1] = 'two';  // adds to the array
arr['age'] = 22; // does not add to the array but with property above
console.log(arr.length);  // 2 not 3
// gotcha
for(me in arr) {
  // still you will get 'age' here  !!!!
}
//

Hold on, we are going to explore Array like objects now. Array like objects have length property, numbered elements. Yes, it stops there. It does not have push(), pop(), sort(), splice(), etc. ie. any of Array functions. You can’t even loop through it. Perfect example for these kind of objects are HTML node sets like document.forms, document.getElementByTagName(), etc. Even arguments object also belongs to this category. Now let us jump into code to prove these points.

//
console.log(document.forms.length);  // 1 if you have one form element
document.forms[0]; // return first form in the document
document.forms.join(', '); // throws error !!!
// another example
function arrayLike(a,b) {
  alert(arguments.length);  // No error. works fine. arguments is a property created automatically with every function
  for(var i=0;i<arguments.length;i++) {
    alert("parameters "+ i + " is " + arguments[i]);  // works fine
  }
  alert("your parameters were " + arguments.join(", "));  // throws error
}
//

Now comes interesting part. How to convert array like object to get benefits of array functions??

//
function behave(a,b){
  var para = Array.prototype.slice.call(arguments);  // this needs explanation. read below
  alert(" arguments " + para.join(", "));   // works fine
}
//

Read note in the specification document.

Array: original object from where all array inherit their functions like join, pop, etc.
Array.prototype: this gives access to all functions in Array object
Array.prototype.slice: the native method; take this as Array but not arguments
Array.prototype.slice.call: call is prototype methods of Function which available to all functions; call changes the this context to the first argument passed

Wow!! Finally slice will return array object though whatever we pass in.

Bit lengthy post this time. Feel free to shoot your questions in the comment section.

Another proof.

For loop trick – part 2

Javascript is a expressive language. In continuation to the previous post, check the following code

//
var arr = ['x','y','z'];

for (var count = -1, l = arr.length, obj; obj = arr[++count], count < l;) {
  alert(obj);
}

// alerts x, y, z
//

Nothing wrong with conventional looping technique, but this is to explore JavaScript’s expressiveness!!!