Quick Tip: Dissecting jQuery – Grep
videos

Quick Tip: Dissecting jQuery – Grep

on Sep 23rd 2010 with 28 comments
Tutorial Details
  • Topic: jQuery Source
  • Difficulty: Intermediate
  • Format: 7 Minute Screencast

In this latest episode of “Dissecting jQuery,” we’ll peal back the cover of $.grep, and learn exactly what’s happening behind the scenes.


Subscribe to our YouTube page to watch all of the video tutorials!

jQuery Source for grep

// jQuery source for the grep method 
grep: function( elems, callback, inv ) {
		var ret = [];

		// Go through the array, only saving the items
		// that pass the validator function
		for ( var i = 0, length = elems.length; i < length; i++ ) {
			if ( !inv !== !callback( elems[ i ], i ) ) {
				ret.push( elems[ i ] );
			}
		}

		return ret;
	}

Hopefully, you now have a better understanding of what's happening behind the scenes. Just remember: any time that you need to remove items from an array, $.grep will do the trick quite nicely!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Charles

    This is really helpful, it has helped me understand how javascript works, never even thought about passing a function into a function.

  • http://dragongears.com dragongears

    I assume the reason for so many confusing nots (!) is to force type conversion to boolean.

  • Mdobs

    Great tutorial. Learning more about javascript and jquery all the time from here!

  • http://www.facebook.com/Dev.MZahran Mohamed Zahran

    I’m confused about how it works ( I mean !!! ) but it’s great tutorial.

  • http://zimg.me Zach

    Jeffery very nice tutorial thanks… What application did you use to zoom to the code like that?

    thanks for all your fantastic tutorials.

    –z

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Hey Zach – It’s my screencast software, Screenflow.

  • Bogaert Dieter

    I don’t understand why you can’t just do if( inv !== callback…
    Only reason I can come up with is what dragongears said about the forced boolean conversion.

    I would have never in my life come up with writing a function like that… I feel so dumb now ;-)

  • Leigh Kaszick

    If you guys actually watch the video he explains the reason for the three NOT unary operators.

    • Bogaert Dieter

      No he does not… He explains the logic behind the 3 NOT’s he doesn’t say why exactly they are used… at least I haven’t noticed it. :-s

      • Leigh Kaszick

        It is so when you set the 3rd argument Boolean as false it will invert what it returns. So if you put false in there and search the array for values containing c it will actually skip all values that contain c and only show ones without. Because the value of !inv would be true and the function would return true on values with c, therefore true !== true returns false.
        Hope that makes sense.

  • nadeem khedr

    it would be nice if you put the links of the previews series about dissecting jquery in every time you make a new episode

  • http://www.code.my devlim

    Wow, jquery team really write awesome javascript.
    Seem like i has much to learn.

    btw, great explain. quiet confusing, but with writing the true or false on paper, it will much more easy to understand and make sense :)

  • http://lookitsatravis.com Travis Vignon

    Coke. Children. Fat.

    Hilarious.

    Great tut! These jQuery source tuts are some of my favorites.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Travis!

  • Nasi

    Great tutorials! Thanks, but I have a question. What’s the right sotsiyalniya addon on firefox?

  • http://datasplash.co.uk Darren Lunn

    No dissapointment here, Jeff. Loving this series, I really enjoy your teaching style too. I hope you do many more of these tuts in this series.

  • http://www.calendee.com Justin Noel

    I was watching this and thinking : “But surely you can accomplish all of this with .each() !”

    Well, after dabbling, I see you can. However, you end up duplicating virtually all of the code in the built in .grep function. So, it makes a lot more sense just to use it to begin with.

    Thanks for teaching me something new!

  • yassir

    Please make more of these videos !

  • http://www.webdesigncrap.info Gary

    Again, great stuff. I can never get enough about jQuery!

    Regards,

  • passerby

    i just think using !!inv !== callback is easier to follow.

  • alvaro obyrne

    I like this. Thank you very much. What I don’t understand is why is it not important to you using an ide for developing. Vim is superpowerful but, for example, things like auto completion and intellisense are lacking. It is strange going from vim into firefox instead of pressing a key over the function definition so that the ide opens the file where the definition is. Also when one uses an ide and opens parenthesis after a function call, code hinting is available in order to see what parameters are needed: this will allow you to do everything in the same environment and not going from firefox to vim and forth. I understand that jquery code is in the google server and all that, but on one side one could have the jquery file in one’s computer while developing (in production hang to google’s version) and on the other side, autocompletion intellisens and code hinting are useful when one writes functions and own code. I am aware that this might not be the place for posting about this, but I am a follower and would like to know your opinion. I’m not even an intermediate web developer (better an intermediate actionscript developer).

  • http://www.umbraprojekt.pl mingos

    “Is it true that true does not equal true? No, it’s not true” – priceless :D

    • http://net.tutsplus.com Jeffrey Way

      Yeah – talk about a brain twister. :)

  • http://ezror.com sunny

    @alvaro Vim does have autocomplete. A simple google search gave me thousands of hits http://www.google.com/search?client=ubuntu&channel=fs&q=vim+autocomplete&ie=utf-8&oe=utf-8

    • alvaro obyrne

      Ok. Thanks and sorry for not searching before posting. No: vim is wonderful … it’s just that… I don’t know…. I wonder why jeffrey doesn’t use autocompletion and so… Any way I’m very grateful for this series….

  • Bjarki

    Love this series, keep it up!

  • http://blueco.ir/ طراحی سایت و سئو

    i cant understand yet!!!

  • www.isatise.com

    good