geeky

jQuery.each vs Javascript for loop

Being a big jQuery fan, I use jQuery.each method a lot in my Javascript code. Until recently I didn’t think too hard what jQuery.each really is.

Its description says it’s an iterator but it certainly is NOT a true iterator.

For example:

Let me know what you expect the code below to return.

var myVars = ['foo1', 'foo2', 'foo3'];

function containsValue(myValue, myCollection) {
	jQuery.each(myCollection, function(i, val) {
		if(val == myValue) {
			return true;
		}
	});
	return false;
}

$(document).ready(function() {
	console.log(containsValue('foo2', myVars));
});

Before I know better, I’d expect it to return true. Since myCollection DOES CONTAIN the value ‘foo2’. However the function containsValue WILL ALWAYS RETURN FALSE. That’s because when you return out of jQuery.each, it simply exits out of jQuery.each but not the containing function. In fact, whether you do anything in the callback function at all, jQuery.each ALWAYS RETURNS the collection you pass in.

e.g.

var returnedVar = jQuery.each(myVars, function(i, val) {});
console.log(returnedVar === myVars); // evaluates to true

In my opinion, jQuery.each acts more like a closure than an iterator. Sure you may use it as an iterator as long as you not returning anything. If you are just changing behaviors or collecting information, it will mimic an iterator. But you need to know, it really is not an iterator.

Personally I’m going to start to use Javascript’s native for..in statement instead of jQuery.each for Javascript collection variables. There is also an argument that jQuery.each may never perform faster than the native support for an iterator. Therefore below I will rewrite the function above using for..in.

function containsValueWithFor(myValue, myCollection) {
	for (index in myCollection) {
		if(myCollection[index] == myValue) {
			return true;
		}
	}
	return false;
}

console.log(containsValueWithFor('foo2', myVars)); // true

var myMap = {'lala':'foo1', '2':'foo2', 'b':'foo3'};

console.log(containsValueWithFor('foo2', myMap)); // true as well for an object/map

—>Example code<—

2 thoughts on “jQuery.each vs Javascript for loop

  1. You’re correct that if you want to return a value from $.each, you need to do some extra work. (Save the value, return false to break out of $.each, etc.)

    However, I wanted to point out that “for … in” is NOT faster than $.each. It is in fact one of the slowest iterating operations available. A standard for loop is the fastest:

    for (var i=0; i < length; i++) {}

    See: http://jsperf.com/jquery-each-vs-for-loop/41

    1. for based on length doesn’t support json objects where it behaves more like a map… the index is not necessarily an int.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s