Why does this change to the Array prototype not work in my jQuery plugin?

Question

I have added the following method to the Array prototype:

Array.prototype.foreach = function(func){
    for(var i = 0; i < this.length; i++){
        if(!func(this[i]) === false) break; //return false from func in order to break the loop
    }
    return this;
}

In the same file, after the above code, I have the following jQuery plugin:

jQuery.fn.addClassForEvents = function(){

    var that = this;

    arguments.foreach(function(event){
        that.bind(event[0], function(){
            that.addClass(event[0]);
        })
        .bind(event[1], function(){
            that.removeClass(event[0]);
        });
    });

    return this;
}

In order to use this jQuery plugin, my code would look something like:

$('div').addClassForEvents(['mouseenter', 'mouseleave']);

However, the browser throws an error on the "arguments.foreach(...." line of the jQuery plugin, stating simply that

Object # has no method 'foreach'

Yet the foreach method works in other places of my code. Why is it undefined within this jQuery plugin?

Why do you break your loop (and foreach), when the function returns a truthy value? — knittl
– knittl, Commented Jan 29, 2012 at 13:48
That's actually a mistake (just look at my comment next to that line of code!). Thanks for pointing it out. — maxedison
– maxedison, Commented Jan 29, 2012 at 14:48
That still does not make much sense within a foreach function/method.… — knittl
– knittl, Commented Jan 29, 2012 at 16:35
Why is that? Seems like providing a way to break out of a loop is pretty standard. — maxedison
– maxedison, Commented Jan 29, 2012 at 17:08
Common understanding is that foreach iterates over every element of a collection. I don't know of a language, where a foreach method breaks out if the applied function returns false. Feel free to prove me wrong — knittl
– knittl, Commented Jan 29, 2012 at 17:53

Hemlock · Accepted Answer · 2012-01-29 13:38:35Z

8

It doesn't work because arguments isn't an array. Its an (array-like) arguments object.

Explanation from Mozilla

You can convert it to an array using slice in modern browsers (and by actually looping in IE).

var argArray = Array.prototype.slice.call(arguments)

edited Jan 29, 2012 at 13:38

answered Jan 29, 2012 at 13:32

Hemlock

6,2282 gold badges29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AngusC Over a year ago

You can convert it to an array using slice in IE too

Hemlock Over a year ago

@AngusC You could be correct. I have a generic function that does this and there are definitely some array-like objects that IE doesn't like to call slice on.

knittl · Accepted Answer · 2012-01-29 13:49:32Z

4

arguments is not an array, but an object. For example it provides properties such as arguments.callee and arguments.caller.

You can use foreach of the Array prototype by calling apply on it (cf. The JavaScript arguments object…and beyond):

Since all the methods of Array.prototype are designed to be generic they can be easily applied to the array-compatible arguments object:

jQuery.fn.addClassForEvents = function(){

    var that = this;

    [].foreach.apply(arguments, (function(event){
        that.bind(event[0], function(){
            that.addClass(event[0]);
        })
        .bind(event[1], function(){
            that.removeClass(event[0]);
        });
    });

    return this;
}

edited Jan 29, 2012 at 13:49

answered Jan 29, 2012 at 13:32

knittl

269k59 gold badges339 silver badges405 bronze badges

Comments

qwertymk · Accepted Answer · 2012-01-29 13:35:01Z

2

You need to turn the arguments object into an array

Try this:

jQuery.fn.addClassForEvents = function(){

    var that = this, arg = Array.prototype.slice.call(arguments);

    arg.foreach(function(event){
        that.bind(event[0], function(){
            that.addClass(event[0]);
        })
        .bind(event[1], function(){
            that.removeClass(event[0]);
        });
    });

    return this;
}

answered Jan 29, 2012 at 13:35

qwertymk

35.6k31 gold badges127 silver badges184 bronze badges

Comments

lmcarreiro · Accepted Answer · 2016-07-21 20:09:44Z

0

To convert the arguments to an array, you can use the jQuery.makeArray(arguments) too...

http://api.jquery.com/jQuery.makeArray/

answered Jul 21, 2016 at 20:09

lmcarreiro

5,8248 gold badges41 silver badges64 bronze badges

Collectives™ on Stack Overflow

Why does this change to the Array prototype not work in my jQuery plugin?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related