Using Named Immediately-Invoked Function Expression (IIFE) instead of comments

Question

What are the pros and cons of utilizing Named IIFEs within JS code to describe and group related code?

I've been using this "pattern" to lend structure to my more procedural code that gets executed only in one place.

Example

(function hideStuffOnInstantiaton(){
    $('oneThing').hide().removeClass();
    $('#somethign_else').slideUp();
    $('.foo').fadeOut();
}());

I find this preferable to both:

// hide Stuff on Instantiaton
$('oneThing').hide().removeClass();
$('#somethign_else').slideUp();
$('.foo').fadeOut();

since over time the comment may get separated from the code and its not immediately obvious what line(s) the comment applies to

and to:

function hideStuffOnInstantiaton(){
    $('oneThing').hide().removeClass();
    $('#somethign_else').slideUp();
    $('.foo').fadeOut();
};

hideStuffOnInstantiaton();

becuase why separate the function and its execution if its only executed in one place?

Are there any performance, maintainability, testability, or cross-browser considerations when using this pattern? I don't believe I've seen many people use this in the wild butI feel as though it could be very useful

I would not name my immediately-invoked function. If I see a code like yours I would not expect it to be immediately invoked, because you can have `(function a(){ .. });`. I would perfer a comment instead. — TryingToImprove, Mar 20 '13 at 17:24
It might be useful for debugging, as the function name will show on the stack trace. Also, this is a compulsory reading on this topic: http://kangax.github.com/nfe/ — bfavaretto, Mar 20 '13 at 17:27
@TryingToImprove - Never seen that before, I'm sure the above link will have the answer, but can you explain briefly why you would ever do that without invoking the function? — Zach Lysobey, Mar 20 '13 at 17:37
Okey, I would never have code like I wrote - but you can. @bfavaretto have a good point with the stacktrace. — TryingToImprove, Mar 21 '13 at 08:44
Can we open the discussion up to why this question is not percieved as constructive? I feel like we already have a good, and useful answer brewing - "Its probably not a good idea because it may be confusing for X reason, but there is some benefit to having named IIFE since it shows up in the stack trace. Here is a good resource on this topic..." To me, that's a good fit for a SO Q&A; am I wrong? — Zach Lysobey, Mar 21 '13 at 14:24
Zach - I've never seen this form (however I am familiar with IIFE's). I think it's great. Additional detail in a stacktrace is incredibly helpful. To support the argument that this is a constructive/useful question, maybe we should get into specifics like performance, maintainability, testability, compatibility (stacktrace support everywhere?), etc. The kangax link from @bfavaretto is incredibly valuable, thanks! — blong, Mar 21 '13 at 14:51
@BishopZ where specifically? Also, why not link directly to http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/ ? — blong, Mar 21 '13 at 19:21

score 8 · Answer 1 · answered Mar 21 '13 at 18:14

8

I always thought labels were cool:

hideStuffOnInstantiaton: {
  $('oneThing').hide().removeClass();
  $('#somethign_else').slideUp();
  $('.foo').fadeOut();
}

In reality, it's usually silly to do this. Instead, grouped functionality generally belongs in its own function.

answered Mar 21 '13 at 18:14

Stephen

5,710
1
24
32

wow, I sort of remember reading about labels a while ago. They *are* cool, and seem to make better sense than what I'm suggesting. – Zach Lysobey Mar 21 '13 at 18:21
1

Make sure you weigh the pros and cons of using 'cool' language features. On the pro side, it might be objectively better than a comment. On the other hand, rare language features can be confusing for less experienced developers. – jporcenaluk Aug 24 '17 at 19:34

Bergi · Accepted Answer · 2015-07-26T21:30:06.717

why separate the function and its execution if its only executed in one place?

In that case, there's no reason to use a function (with its overhead) at all - just inline the code. And don't hide comments in function names, I'd call that a bad practise. If someone separates the comment from the code, it's his fault not yours - actually he could pack completely unrelated stuff in your IENFE as well.

While this pattern could be useful if you'd reuse the function (recursively) or need it to build a closure around something, and the named function makes stacktraces easier to debug, there are various bugs in IE. So avoid it if you don't really need it - and you do not.

If you want to express that your comment applies to a block of code, you can explicitly use a block statement for that and put your comment at its head:

{ // hide Stuff on Instantiaton
    $('oneThing').hide().removeClass();
    $('#somethign_else').slideUp();
    $('.foo').fadeOut();
}

…although that'll likely confuse your readers as much as a superfluous IEFE.

That sucks, I love this pattern myself and use it often. Thanks for the info. — Lucas Green, Mar 21 '13 at 17:54

Using Named Immediately-Invoked Function Expression (IIFE) instead of comments

Example

2 Answers2

Linked