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
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • By
    Chris Coyier’s Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it's damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • By
    Create WordPress Page Templates with Custom Queries

    One of my main goals with the redesign was to make it easier for visitors to find the information that was most popular on my site. Not to my surprise, posts about MooTools, jQuery, and CSS were at the top of the list. What...

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!