Immediately Executing Functions

By  on  

JavaScript is full of nifty little tricks to accomplish tasks with less code.  One of those tricks is immediately executing functions.  We oftentimes see this pattern for executing anonymous functions to limit variable scope:

(function() {
	console.log('executed!');

	// Do processing here

})();

What many developers don't know is that this code can be shorted by using a ! before the anonymous function:

!function() {
	console.log('executed!');

	// Do processing here	
}()

The function above executes immediately, just as the first snippet did.  One caveat:  the immediately executing function always returns false.  If you desire the result of the anonymous function, you wont want to use this second pattern.

Ben Alman has created an excellent, detailed writeup on the subject and if you want to learn more, be sure to visit his post!

Recent Features

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    Making the Firefox Logo from HTML

    When each new t-shirt means staving off laundry for yet another day, swag quickly becomes the most coveted perk at any tech company. Mozilla WebDev had pretty much everything going for it: brilliant people, interesting problems, awesome office. Everything except a t-shirt. That had to change. The basic...

  • By
    Create a Simple News Scroller Using Dojo

    My journey into Dojo JavaScript has been exciting and I'm continuing to learn more as I port MooTools scripts to Dojo. My latest experiment is porting a simple new scroller from MooTools to Dojo. The code is very similar! The HTML The news items...

Discussion

  1. Bruce Williams

    Because not quite enough people pulled out their hair on encountering the function(){…}() syntax.

  2. The first is not exactly valid. The right call has the call-parentheses inside the container parentheses.

    (function() { ... code ... }())
    

    I think the ! is works with call-parentheses too. So it’s not shorter.

    > !function(){console.log('asd')}
    false
    > !function(){console.log('asd')}()
    asd
    true
    > function(){console.log('asd')}()
    asd
    undefined
    > (function(){console.log('asd')}())
    asd
    undefined
    >
    
  3. Chris

    I think such oddities should be removed from the language.

  4. James Fishwick

    What would ever be the argument for doing this? A Obfuscated Javascript Code Contest?

  5. Why even use such a function? I don’t get it. If you want code to execute immediatly, just write it outside a ‘function’. What’s the point of an anonymous function you can’t call later on for reusability? Or am I missing something?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!