I am wondering if the self invoking function as displayed below, mainly the part of using the same function twice ('foo')('bar'), would ever be seen as a good practice?And more important, is there a good reason to use this? Personally in this particular example I would rather go for multiple attributes and loop those.The HTML is just filler.<!DOCTYPE html><meta charset='utf-8'><title>Foo Bar Foobar</title><p id='foo'>Foo</p><p id='bar'>Bar</p><p>Foobar</p><script>(function foobar(id) {    var element = document.getElementById(id);    element.style.color = 'red';    element.style.textIndent = '10px';    // Return self    return foobar;})('foo')('bar');</script>
Any use for this kind of self invoking function?
javascript
Wow. Basically you wrote Code A but in a cool functional programming style.Code A:(function(){    function foobar(id) {        var element = document.getElementById(id);        element.style.color = 'red';        element.style.textIndent = '10px';    }    for(var i = 0, len = arguments.length; i < len; i++){        foobar(arguments[i]);    }}('foo', 'bar'));Self invoking functions are good for three situations.To perform some startup functions onload. (Most likely your case)To save results from a expensive operation into a loop up table.Example:var primeTable = (function(){    var primeObject = {}    // calculates and stores primes from 100 to 1000 in primeObject    return primeObject;})();   3. To create private variables, which is normally called a Module Design Pattern.Example:var box = (function () {    var key = Math.floor(Math.random() * 1e5).toString(16);    return {        open : function(val){            return (val === key) ? Box has opened. : Wrong Key;        },        setKey : function (oldKey, newKey) {            if (oldKey === key) {                key = newKey;            }        }    }})();Overall, if you want to follow KISS philosophy then I think you should wrap everything in a closure and call the function traditionally. (function(){    function foobar(id) {        var element = document.getElementById(id);        element.style.color = 'red';        element.style.textIndent = '10px';    }    foobar('foo');      foobar('bar');  })();