Skip to main content

JavaScript Self-Executing Anonymous Functions Simplified

I've seen code like this everywhere, and maybe you have too. A function (hopefully wrapped in parenthesis) followed by some variables in parenthesis. 

  (function(a, $){
    ... code ...
  })(window, jQuery);

I eventually started trying to research what they were, how they worked, and why they should be used. Most of the explanations got thick quick, so I thought I'd simplify things.

In essence, this is declaring and calling a function all at the same time. The easiest way to think of it (for me, anyway) is that this: 

  (function(a, $){
    ... code ...
  })(window, jQuery);

...is roughly equivalent to this:

  var myFunction = function(window, $){
    ... code ...
  }

  myFunction(window, jQuery);

There are some (pretty big) differences (such as when and how it runs), but this is enough to get you started.

The parenthesis wrapping the function aren't required, but are considered best practice and common courtesy because they help to identify this function as self-executing, and making it easier to find the parameters being passed in.

Without getting too deep into it, these functions are really nice for compartmentalizing code (restricting access and preventing conflicts), as well as making your code more compressible. Hopefully some day when I have the time (and more understanding), I can write about this some more, but for now I wanted to share this little tidbit that has helped me understand what was going on here.

Labels:

Comments

Post a Comment

Popular posts from this blog

Element.focus() in IE9 running Jasmine tests with Karma

I recently udpated our Jasmine unit tests to run in Karma ; expanding our browser coverage, adding code coverage reports , and using fixtures for testing DOM manipulation . One of my tests kept failing in IE9, but only when I ran from the console. If I attempted to debug in the browser, everything passed. It turns out that IE9 (at least) needed a few ms to catch it's breath before correctly focusing on the starting element. To do this, I just added a 100ms delay before each test ran (Using Jasmine 2.3). beforeEach(function(done){ loadFixtures('myfixture.html'); // Setting focus in IE requires a delay to work correctly! setTimeout(function(){ done(); }, 100); });
Post a Comment
Read more

CSS line-height Units Explained

In Chris Coyier's recent article, " Fun with line-height! ", he mentions that we often use unitless values for line-height so that it's proportional to the font size. This is only part of the story, and I was reminded of a Stack Overflow question that got me investigating more about how line-height worked with regards to the various CSS units. If you're declaring the line-height on each element, you won't notice any difference. But if you're not crazy and using the first C of CSS (that's 'Cascading', by the way), then the inherited line-height might not work the way you expect. Disclaimer: This is my understanding after doing some research and testing. I may not be completely correct. TL;DR When using a relative unit (em, %), the line-height is calculated based on the font size of the element where the line-height is defined. This line-height is then inherited, unchanged, by each of its descendants. So we end up with a line...
Post a Comment
Read more

Flags vs Vendor Prefixes for Experimental CSS

Google recently announced that it will be switching Chrome's rendering engine to a fork of Webkit, called “Blink”. If you're interested, you can read their blog post about Blink . One of the changes we will be seeing in Blink, is the use of browser flags in place of vendor prefixes . What this means, is that rather than prefixing experimental CSS with -webkit-, -moz-, -ms-, -o-, -khtml-, etc.; We will be required to enable these attributes using a flag in the browser (like the ones currently at chrome://flags). If you ask me, both ways have their advantages and disadvantages. Though, in the end, I lean towards the flags over the vendor prefixes, and here's why: #1 Code Bloat On average, using CSS with vendor prefixes requires writing it 5 times . Every time you use it . #2 Future Friendly Eventually, prefixed code will be replaced by the unprefixed code. #3 Browser Dev Friendly Browsers tend to continue to support the prefixed code, even if it doesn...
Post a Comment
Read more