Question

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?

Answer 1

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.