Javascript Self Invoking Function

Posted:   |  More posts about javascript

While peeking into Twitter Bootstrap js code, I noticed function being defined like this:-

+function ($) { "use strict";

    // ======================

    var dismiss = '[data-dismiss="alert"]'
    var Alert   = function (el) {
      $(el).on('click', dismiss, this.close)

Noticed the + sign before the keyword function. At first I thought it could some typo slipping through the commit but after some google, it turn out that just another way to define self invoking function in JavaScript. Those who has been writing some JavaScript, or deal with some JS library probably already familiar with a common idiom to write code like below:-

(function($) {
    $('#some_dom_id').click( ....);

Above also a self invoking function. The primary reason the code being written this way is to avoid introducing unnecessary variable to the global scope. JavaScript does not has namespace so any variable defined in any part of the code (except those in function prefixed with var) exists as global variable. Since most code, except for (libraries) only need to manipulate the dom and does not need to expose any variables for others to use, it best if we can execute the code in isolation without adding new state to the global scope (window).

The only isolation exists in JavaScript is the function scope and since JavaScript support anonymous function, this can be a perfect match. Just define an anonymous function and immediately call the function. Logically, we'll try to define function like this:-

function () {

This however would result in syntax error since the parser expect an identifier (name) after the function keyword. In other word, above code is a statement rather than an expression that create some value. Fortunately in JavaScript, anything that we wrap inside a parantheses will be treated as an expression and JavaScript will evaluate the expression, yielding it's value. For example, (1) will yield a value 1 while (1 + 1) will yield a value 2. So what if try to evaluate a function ?

(function () { alert('hello'); });

It will yield a function as a result, which what we want. In above code, the parser will know that inside the parantheses is an expression and it should evaluate it, just like it evaluate 1 + 1 and produce 2. So what the result of evaluation function expression ? A function. So now we have a function at hand, we can call it.

(function () { alert('hello'); })();

Now we know the story behind the cryptic syntax of JavaScript code commonly found on the Net. But it turn out that defining function inside a parantheses is not the only way to tell the parser to treat it as function expression instead of statement. We can also prefix the function with some arithmetic operator and the parser will happily treat it as an expression. So the above code can also be written like this:-

+function () { alert('hello'); }();
Comments powered by Disqus

About me

Web developer in Malaysia. Currently work at MARIMORE Inc building internet services using Python and Django web framework.

ImportError is an error message emitted by Python when it failed to load certain module as requested by programmer. It's a very common error when someone new to the language trying it out. This website on the same theme, will try provide help for newcomers on any technologies to overcome their first hurdle.

Try most of the examples you may find here on Digital Ocean cloud service. They provide excellent VPS at a very cheaper price. Using this referral link you'll get USD10 credits upon sign up. That's enough to run single VPS with 1GB RAM for a month.


I can also be found at the following sites:-



The postings on this site are my own and don't necessarily represent my employer's positions, strategies or opinions.