Defining and calling function in one step

Question

Is there a way in Javascript to define a function and immediately call it, in a way that allows it to be reused?

I know you can do one-off anonymous functions:

(function(i) {
    var product = i * i;
    console.log(product);
    // Can't recurse here because there's no (ECMA standard) way for the 
    // function to refer to itself
}(2)); // logs 4

Or you can name a function then call it afterwards:

function powers(i) {
    var product = i * i;
    console.log(i * i);
    if (product < 1e6) { powers(product) };
}

powers(2); // Logs 4, 16, 256...

But is there a cleaner way of defining and calling a function in one go? Sort of like a hybrid of both examples?

Not being able to do this isn't preventing me from doing anything, but it feels like it would be a nice expressive way to write recursive functions or functions that need to be run on $(document).ready() but also later when situations change, etc.

Possible duplicate of [Can I name a javascript function and execute it immediately?](http://stackoverflow.com/questions/6404196/can-i-name-a-javascript-function-and-execute-it-immediately) — brichins, Mar 23 '17 at 15:43

score 60 · Accepted Answer · edited Dec 30 '15 at 07:58

60

You can try:

(window.powers = function(i) {
  /*Code here*/
  alert('test : ' + i);
})(2);

<a href="#" onclick="powers(654)">Click</a>

Working link : http://jsfiddle.net/SqBp8/

It gets called on load, and I have added it to an anchor tag to change the parameter and alert.

edited Dec 30 '15 at 07:58

Mosh Feu

28,354
16
88
135

answered Sep 21 '11 at 11:26

Marc Uberstein

12,501
3
44
72

4

Clever solution! Works without the `window.` as well, but obviously implied globals are evil... – quis Sep 21 '11 at 11:50
1

Just add a `var powers;` before the immediately executing function and you're good to go. – Yohaï-Eliel Berreby Sep 08 '14 at 21:08

score 41 · Answer 2 · answered Sep 21 '11 at 13:05

41

If all you want is access the function within its own body, you can simply specify a name after the function keyword:

> (function fac (n) {
    return (n === 0 ? 1 : n*fac(n-1));
  })(10)
3628800

This is a standard feature (see ECMA-262, ed. 5.1, p. 98).

answered Sep 21 '11 at 13:05

Matthias Benkard

15,497
4
39
47

7

This is very elegant for what it does. – quis Sep 21 '11 at 13:17

score 15 · Answer 3 · answered May 28 '14 at 21:28

15

All the answers here are close to what you want, but have a few problems (adding it to the global scope, not actually calling it, etc). This combines a few examples on this page (although it unfortunately requires you to remember arguments.callee):

var test = (function() {
  alert('hi');
  return arguments.callee;
})();

Later, you can call it:

test();

answered May 28 '14 at 21:28

gkoberger

476
4
11

2

The only problem is that arguments.callee is [deprecated](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments/callee) and throws an error on ES5 in strict mode. – Tivie Jul 02 '14 at 01:12
5

@Tivie But you can name the anonymous function. `var test = (function fn() { alert('hi'); return fn; })();` – Evan Kennedy Aug 04 '15 at 20:20

score 6 · Answer 4 · answered Jun 03 '14 at 01:42

6

If you don't care about the return value, you can do this.

var powers = function powers(i) {
    var product = i * i;
    console.log(i * i);
    if (product < 1e6) { powers(product) };
    return powers;
}(2);

answered Jun 03 '14 at 01:42

twhb

4,294
2
20
23

Defining and calling function in one step

4 Answers4