About Anonymous Functions in Javascript

Question

I am new in Javascript, but have deep background real OO languages like C#, Java, C++... In Javascript there is a concept called anonymous functions. Here is a sample code:

(   function() { 
      for(var x = 0;x<5;x++) {
         console.log(x); 
      } 
   })();

As I have understood the parantheses at the end make the function call itself. There is also another syntax which does the same:

var x =   function() { 
      for(var x = 0;x<5;x++) {
         console.log(x); 
      } 
   }();

But right now if I try to use x, it does not execute the function again. So what is the goal if using the assignment in the second version? Can I use the function via x again?

Since you have `()` after function, it will call it immediately and assign its return value (*in your case, undefined*). Remove `()` and if you want to call it immediately, make a call on next line like: `x();` — Rajesh, Nov 06 '17 at 07:54
Beware that JavaScript is not object oriented. Instead, JS is prototype oriented and there will be things that surprise you. — Derek 朕會功夫, Nov 06 '17 at 07:58
why someone downvoted this question? it is a good question for beginners — Luke, Nov 06 '17 at 07:59
The first one without `var x = `is actually an IIFE https://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript — Niladri, Nov 06 '17 at 08:03
var x is the result of calling that anonymous function ... which, in this case ... is `undefined` as it has no return — Jaromanda X, Nov 06 '17 at 08:06

score 4 · Accepted Answer · answered Nov 06 '17 at 07:59

Self executing function are known as IIFE (Immediately-Invoked Function Expression), it is usually used to control the scoping so you don't end up with a lot of global variables.

For example, this function act as a moneybox, it encapsulate all information of your "money", so you can only insert money or get the total money, but you can't directly call add/get and access the variable.

It can be used as a form of OOP as well, since you are already very familiar with it

var myMoneyBox = (function() {
    var money = 0;

    function addMoney(x) {
        if (x > 0)
            money += x;
    }

    function getMoney() {
        return money;
    }

    return {
        add: addMoney,
        get: getMoney
    }
})();

myMoneyBox.add(10);
console.log(myMoneyBox.get());

Thanks a lot. That made the concept much more clearer – Code Pope Nov 06 '17 at 08:14 — Code Pope, Nov 06 '17 at 08:14

score 2 · Answer 2 · answered Nov 06 '17 at 07:54

2

x is assigned the result of your function, just like in any other expression x = f(), you just define f within the expression. It doesn't have a return value so in this case the value of x is undefined.

If you want to use x to call the function, then just don't add the () to the end of the expression...

answered Nov 06 '17 at 07:54

RemcoGerlich

30,470
6
61
79

May be opinionated comment, but this should have been a comment – Rajesh Nov 06 '17 at 07:56
5

Comments are for asking clarification, this is an actual answer. What you mean is that the answer is so simple that this should never have been a question, and there I agree. – RemcoGerlich Nov 06 '17 at 07:57
If you think that should not be a question here, where should I ask this question when I have it? (Btw thanks for the answer, now it is clear) – Code Pope Nov 06 '17 at 08:03
1

@CodePope: a bit more playing around with the code on your own in a browser's console would also have done it, so it's a bit low effort. But I was procrastinating and your question was on top :-). Amusingly the high voted and accepted answer completely ignores your question and explains something else. – RemcoGerlich Nov 06 '17 at 08:16
1

@Rajesh: whenever there is a risk I take myself too seriously, I remember what my highest voted answer is ( https://stackoverflow.com/questions/22988640/what-is-the-difference-between-return-and-return/22988680#22988680 ) and then I can only laugh... – RemcoGerlich Nov 06 '17 at 08:17

score 2 · Answer 3 · answered Nov 06 '17 at 08:00

2

I think this could help you:

var x =   function() { 
      for(var x = 0;x<5;x++) {
         console.log(x); 
      } 
   }; 
x();

answered Nov 06 '17 at 08:00

Ken Ha

129
5

About Anonymous Functions in Javascript

3 Answers3