5467 posts The Dude Abides
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • United States
+13 more
CodingJack
says

When it comes to something like this in jQuery:

element.each(function() { // do something });

... and there are 5 elements, do five objects get created in memory for the function part? And if so, shouldn’t we always be doing this instead?

element.each(unestedFunction);

function unestedFunction() { // do something }
6231 posts
  • Exclusive Author
  • Elite Author
  • Author Level 8
  • 7 Years of Membership
+13 more
VF
says

Yes, especially when the function does too many things, better avoid creating it many times.

Looks like this is considered on codecanyon to approve scripts. However there is no much discussions on this subject on jQuery communities.

5467 posts The Dude Abides
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • United States
+13 more
CodingJack
says

Cool. Yeah I sort of knew the answer but was curious why I never see this practiced. But regardless of whether its required for review or not, I don’t see any reason why someone would ever need to nest the function in this situation. Same goes for adding events. But the more we push the envelope with JS, the more we need to optimize.

5467 posts The Dude Abides
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • United States
+13 more
CodingJack
says

Just thought, maybe the need to pass an increment argument like this:

element.each(function(i) { // do somethig with "i" });

would be the only reason why a nested function using .each would be useful.

Personally I’ve always nested when using .each but won’t be doing so anymore after giving it more thought.

5467 posts The Dude Abides
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • United States
+13 more
CodingJack
says

^ scratch that “i” example. It still iterates un-nested.

6231 posts
  • Exclusive Author
  • Elite Author
  • Author Level 8
  • 7 Years of Membership
+13 more
VF
says

Yes, the only benefit I see is variable scope. Some rare cases may be beneficial with nesting due to complexity to go with function declaration.

I guess some of the unoptimized practices lives just due to popularity and by beginners. When I first time started using jQuery (also a javascript noob) I didn’t felt doing something wrong whenever I just adopted practices like above. Later understood from reviewer’s advice on soft rejection and then started digging about function recreations.

5467 posts The Dude Abides
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • United States
+13 more
CodingJack
says

I guess some of the unoptimized practices lives just due to popularity and by beginners.

Yeah maybe jQuery was built for designers more than coders. And designers by nature wouldn’t necessarily notice the same things developers would resulting in widespread bad practices. So kudos to reviewers trying to steer us in the right direction.


When I first time started using jQuery (also a javascript noob) I didn’t felt doing something wrong whenever I just adopted practices like above.

I’m in the same boat. I feel like I learned jQuery before JavaScript, and still feel like I have a lot of things to still learn with regards to JS.

42 posts
  • 4 Years of Membership
  • Author Level 6
  • Collector Level 1
  • Exclusive Author
+2 more
maguiar01
says

When it comes to something like this in jQuery:
element.each(function() { // do something });

... and there are 5 elements, do five objects get created in memory for the function part? And if so, shouldn’t we always be doing this instead?

element.each(unestedFunction);

function unestedFunction() { // do something }
Hi CodingJack

I don’t think i understand it, what exactly do you mean by “five objects get created in memory for the function part?”. You’re asking if will be created 5 copies of the function code in the memory?

5467 posts The Dude Abides
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • United States
+13 more
CodingJack
says

Yes, the only benefit I see is variable scope.

Just going through some code and found an example of this:

for(var i = 0; i < maxSubs; i++) {

    ul = ul.children("li").children("ul").each(function() {

        st = i % 2 === 0 ? "light" : "dark";

        $(this).addClass(st + "-sub").prepend($("<div />").addClass("nav-arrow " + st + "-arrow"));

    });

}

(forget about the context, but notice the for-loop’s “i” being used inside the .each)

5467 posts The Dude Abides
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • United States
+13 more
CodingJack
says

You’re asking if will be created 5 copies of the function code in the memory?

yes :)

by
by
by
by
by
by