Javascript call changing type

I want to write a function like jQuery each and am using the javascript call function.

function each(array, callback) {
    for (var i开发者_运维技巧=0; i<array.length; i++) {
        console.log(typeof(array[i])); // Number
        callback.call(array[i]);
    }
}

each([1,2,3], function() {
    console.log(typeof(this)); // Object
});

The problem is call seems to be casting Number types to Object types. This causes issues with the console.log call. Can anyone explain why this is happening (my guess is that call casts arguments to type Object). Why would it do this? Can you figure out a way to work around or prevent this?

---

This is a requirement of the specification when not in strict mode.

If you use the "use strict"; declarative at the top of your code, you'll get whatever actual value you passed.

DEMO: http://jsfiddle.net/agXkZ/

"use strict";
function each(array, callback) {
    for (var i=0; i<array.length; i++) {
        callback.call(array[i]);
    }
}

each([1,2,3], function() {
    console.log(this);
});

---

Note that strict mode is lexically scoped, so you could add the declarative to the callback only if you'd prefer.

DEMO: http://jsfiddle.net/agXkZ/1/

function each(array, callback) {
    for (var i=0; i<array.length; i++) {
        callback.call(array[i]);
    }
}

each([1,2,3], function() {
    "use strict";
    console.log(this);
});

---

If you don't want to use strict mode, you can (in this case) convert to a primitive by using the unary + operator.

DEMO: http://jsfiddle.net/agXkZ/2/

function each(array, callback) {
    for (var i=0; i<array.length; i++) {
        callback.call(array[i]);
    }
}

each([1,2,3], function() {
    console.log( +this ); // <--converts from object to primitive
});

---

Related information:

From ECMAScript 5 Annex E (informative) Additions and Changes in the 5th Edition that Introduce Incompatibilities with the 3rd Edition:

15.3.4.3, 15.3.4.4: In Edition 3 passing undefined or null as the first argument to either Function.prototype.apply or Function.prototype.call causes the global object to be passed to the indirectly invoked target function as the this value. If the first argument is a primitive value the result of calling ToObject on the primitive value is passed as the this value. In Edition 5, these transformations are not performed and the actual first argument value is passed as the this value...

And ECMAScript 5 Annex C (informative) The Strict Mode of ECMAScript:

If this is evaluated within strict mode code, then the this value is not coerced to an object. A this value of null or undefined is not converted to the global object and primitive values are not converted to wrapper objects. The this value passed via a function call (including calls made using Function.prototype.apply and Function.prototype.call) do not coerce the passed this value to an object.

---

The first argument to call method is the scope in which the callback has to be executed. The actual arguments start only from second argument onwards. This would work

function each(array, callback) {
    for (var i=0; i<array.length; i++) {
        console.log(typeof(array[i])); // Number
        callback.call(this, array[i]);
    }
}

each([1,2,3], function() {
    console.log(typeof(arguments[0])); // Number
});

As for the number getting converted to Object, this MDN doc has the explanation

The first parameter is the value of this provided for the call to fun. Note that this may not be the actual value seen by the method: if the method is a function in non-strict mode code, null and undefined will be replaced with the global object, and primitive values will be boxed.

In this case the primitive number is getting boxed. To see boxing in action, you can run this code.

function each(array, callback) {
    for (var i=0; i<array.length; i++) {
        console.log(typeof(array[i])); // Number
        callback.call(array[i]);
    }
}

each([1,2,3], function() {
    console.log(typeof(this)); // Object
    console.log(Number(this)); // prints 1,2 and 3
});

---

this is meant to be used to reference the object which a function is part of.

While it is possible to use it like a free argument, it’s usually better to just pass undefined as the first argument to call and give the value as a regular argument.

None of the built-in JavaScript iteration functions (like Array’s .forEach) set this, and it’s becoming common to bind functions to a specific this value so they have access to it no matter who calls them (.bind is part of JavaScript 1.8.5, but there are lots of third-party libraries with their own bind utilities, like Underscore). If I passed a bound function into your each(), it wouldn’t be able to see the current object!