Does this work cross browser?

Question

Provided Object.prototype hasn't been modified, will the following snippet work in major browsers?

var obj = {length:0};
var push = Array.prototype.push;
push.call(obj,'1st value')
push.call(obj,'2nd value');

Many have responded that the above code is bad practice, but what makes code like this any better?

Array.prototype.slice(arguments,0)

Both are calling Array.prototypes on non Arrays.

Answer 1

I'm going to say no, because this is an array. It works, but you are hammering a screw at this point. Simply use an array.

Answer 2

I'm not going to go into the depths of implementation detail with this one; I'm just going to say that you're invoking a single Array function on an object that is not an Array.

It's like you're driving along the motorway in a box that may have any of: steering wheel, tyres, axle, floor, seats ... and you don't know which.

Depending upon how Array is implemented on any given browser, this may completely not work at all. Breaking the API in this manner is a silly idea.

So, no.

Answer 3

Question 1:

What's the different between Code A and Code B?

Code A:

var obj = {length:0};
var push = Array.prototype.push;
push.call(obj,'1st value')
push.call(obj,'2nd value');

Code B:

Array.prototype.slice(arguments,0)

---

Answer:

First off, Code B is wrong and should be the following.

Code B2:

function test(){
    var args = Array.prototype.slice.call(arguments,0);
    return args;
}

Unless defined, arguments exist within the scope of a function. Basically arguments is an object literal with the initial state of {length:0}. When a function is called with an argument, the argument is stored in the object arguments by the index corresponding to the argument position.

Example:

function getFirstArgument(){
    return arguments[0];
}
console.log( getFirstArgument(1,2,3) === 1 );

The purpose of Code B2 is to convert the arguments object into an array so you can get access to the array prototype functions easily.

Example:

// returns the arguments as an array in reverse order.
function reverseArguments(){
    return Array.prototype.slice.call(arguments).reverse();
}
console.log( reverseArguments(1,2,3).join(",") === "3,2,1" );

So as you can see, both obj in Code A and arguments in Code B are the same object initially. However, Code A is adding values to obj, while Code B2 is converting arguments to an array.

More information here:

What's the use of array.prototype.slice.call(arguments,0)

MDN Array.slice

Question 2:

Will "Code A" work in major browsers?

Answer: Most likely. However, if you want to guarantee that it works, then rewrite the push fuction.

var push = function( obj, val ){
    if( typeof obj !== "object" ){
        return;
    }
    obj.length = obj.length || 0;
    obj[ obj.length ] = val;
    return ++obj.length;
};

Usage:

var obj = {};
console.log( push( obj, 1 ) === 1 );
console.log( push( obj, 1 ) === 2 );
console.log( JSON.stringify( obj ) === "{"0":1,"1":1,"length":2}" );

Answer 4

Working with Javascript is like working with templates in C++. If it has what the function need it works. In this case length might not suffice for every browser. It is true that it is possible to use built-in functions like that but if that function tries to access a property which is not available in your object it will fail.

Now coming to your second point. AFAIK, ECMA script standard does not push any internal operation and even if it does browsers do not use them as hard rules, they take it as guidelines. So it is possible that your code will not work on every browser, but arguments object is implemented by the browser as well, to be compatible with its array architecture. Therefore using Array.prototype.slice.push(arg, 0); is relatively safer than using your custom object with built in array functions.

Answer 5

Yes, this will work because in javascript Arrays function like Objects.

Answer 6

It will work without crashing. The exact result will be the object with properties "0", "1" and the "length"==2. There is the scope replacement becasue of the "call" function using. However it's not very good practice to use this solution becasue of bad readability and maintainability. I suggest to do it excplicitly.