Clever Geek Handbook

Is it possible to define AND immediately call a function in just one stroke?

I have some code on my site which

$(function () {
    for (var k = 0; k < ogmap.length; ++k) {
        $('#orglist').append($('<option></option>').text(ogmap[k]['orgname']).val(ogmap[k]['orgname']));
    } // create organization option memu from list of organizations

    function updateInfo() {
        var newlySelectedOrg = $('#orglist option:selected').val();
        $('#currorg').text(newlySelectedOrg);
        var categories = [];
        for (var k = 0; k < ogmap.length; ++k) {
            if (ogmap[k]['orgname'] == newlySelectedOrg) {
                categories = ogmap[k]['catnames'];
                break;
            }
        } // Get array of strings corresponding to the categories for the selected organization in
        $('#catlist > option').each(function () {
            $(this).remove();
        }); // remove current <option> list items for the categories <select> list
        for (var k = 0; k < categories.length; ++k) {
            $('#catlist').append($('<option></option>').text(categories[k]));
        } // add new <option> list items for the categories <select> list
    }

    updateInfo();

    $('#orglist').change(function () {
        updateInfo();
    });

});

because I need to define a function updateInfo

and also run it because it is part of the preprocessing for my page. I know that

var updateInfo() = function() { ... }

or equivalent

function updateInfo() { ... }

define a function and not run it, but

(function() { ... })

runs it but keeps it anonymous.

Is it possible to define and run it?

For some reason, having

function updateInfo() { ... };
updateInfo();

just rubs me in the wrong way, gives me the idea that I am not using best practice.

+3


source to share


8 answers


There is no such elegant way to do it, you have a way to do it

function updateInfo() { ... };
updateInfo();

$('elem').on('event', updateInfo);


For completeness, you can just fire an event to fire the function on the first pageload as well as when the event is fired.

$('elem').on('event', function updateInfo() {
   // inside updateInfo
}).trigger('event');
+2


source


No, it is not possible to declare a function and call it in the same run.

However, if you do not need to declare a variable (which will be used after the call), you can use an Instant Call Expression (IIEFE).

If you need to refer to a function inside your body (for recursive calls or similar), you can still name it by creating an IINFE.



For your actual use, by attaching it as an event handler and calling it to initialize immediately, you can use a different template - just fire the event immediately:

$('#orglist').change(updateInfo).change();

// instead of
$('#orglist').change(updateInfo);
updateInfo();
+2


source


You can do this, but I would recommend using the latest version you posted. The following snippet will write running foo...

twice:

var foo = (function bar() {
  console.log('running foo...');
  return bar;
})();

foo();
+1


source 


// Define and run
(updateInfo = function( message ) {
    var el = document.createElement('div');
        el.innerHTML = message;
    document.body.appendChild(el);
})('Meow!!');

// Run again later
updateInfo('Bark!');
Run codeHide result


+1


source


This will warn you Success

twice:

(window.test= function() {
  alert('Success');
})();

test();
Run codeHide result


+1


source 


(function functionName () { ... })();

This function will call the function and execute it at the same time. Although I really recommend that you keep this feature.

0


source


If you bind a named function to an event and want to fire that event on page load, you just need to fire the event using .trigger('event')

or event()

on the same element.

So replace:

updateInfo();

$('#orglist').change(function () {
    updateInfo();
});

FROM

$('#orglist').change(updateInfo)
.change();
0


source


If your function doesn't need to return anything, it can return itself, and you can do whatever you want. I don't see how the standard way is inelegant - it's readable. But if you really want to confuse your jr developers:

var t = function(){
  console.log("Weee");
  return arguments.callee;
}();

t();

and then really mess with minds ...

var t = function(){
  console.log("Weee");
  return arguments.callee;
}();

t()()()();
0


source






More articles:


All Articles