作为返回匿名对象的参数的函数

Question

I see a lot of javascript code that passes a function as a parameter that returns an anonymous object.

myFunction(function() {
    return {
       foo: 'bar'
    };
});

What is the advantage or the purpose of using this instead of simply passing directly an anonymous object?

myFunction({
    foo: 'bar'
});

Answer 1

The difference is that if you alter the argument passed in your second code snippet, there is no way to get the original argument again.
If you pass an function instead you can call the function more than once and get always the same argument back. (if the function is implemented this way)

Furthermore if you use a function you can do additional stuff like logging how often your function / argument was called or so on. So using a function adds more flexibility for the user of the function.
For the developer of the function on the other hand accepting a function as argument can cause the tiny problem that a function doesn´t have to return the same value every time you call it - myFunc() == myFunc() COULD return false, therefore i would not recommend handing over a function if it is supposed to JUST return an argument.

Answer 2

Backbone uses have a lot of places where they will initialize the function if passed to get the value, eg.

 Backbone.Model.extend({
     url: function() { return 'myurl.aspx'; }
 });
 // VS
 Backbone.Model.extend({
     url: 'myurl.aspx'
 });

This is clever if you will have to make some calculation / run some conditions before you'ill know that the url is.

 Backbone.Model.extend({
     url: function() { 
         if ( this.get('name') ) {
             return 'service1.aspx';
         }
         else {
             return 'service2.aspx';
         }
     }
 });

---

Your first example sends an anonymous function as the first argument to myFunction while the second example sends an object as the first argument.

myFunction(function() {
    return {
       foo: 'bar'
    };
}); // function() {...}

myFunction({
    foo: 'bar'
}); // {foo: 'bar'}

function myFunction(what) {
    console.log(what);
}

If you are talking about closures, the main difference is that you can have private variables inside closures:

var setGet = (function() {
    var v = null;
    return {
        get: function() { return v; },
        get: function(val) { v=val; }, 
    };
});
// VS:
var setGet = {
    v: null,
    get: function() { return this.v; },
    get: function(val) { this.v; }, 
};

In the first example you can't access the variable v without using .get / .set on setGet while in the 2. example i can simple change it by setting setGet.v = 'new_val';

Answer 3

I think, it really depends where you saw the code being used.

In this case, myFunction seems to require you to pass a function rather than an Object.

But in general, Consider this

myFunction(function() {

    var a = "bar";

    return {
       foo: a
    };
});

and this:

var a = "bar"

myFunction({
    foo: a
});

In the second case, anyone outside is able to access a . But in first case, a becomes similar to a private variable which is exposed as public by the function. So you might observe this in places where people wish to follow OOP concepts in the otherwise classless JS.

---

Another case is where you require a callback function or some function that is to be called later. So if the data is to be preserved until a certain something is over you can make it available as the return value of a function, rather than storing it globally...

Answer 4

In the first example You are passing a callback function.

When we pass a callback function as an argument to another function,
we are only passing the function definition. We are not executing the function
in the parameter.

And since the containing function has the callback function in its parameter as a function definition, it can execute the callback anytime. This allows us to execute the callback functions at any point in the containing function.

A simple example for this is jQuery click binding :

/The anonymous function is not being executed there in the parameter. 
//The anonymous function is a callback function
$("#btn_1").click(function() {
    alert("Btn 1 Clicked");
});

But in the second example you are simply passing an object to the called function.

Use this link to get more details about Callback functions. Enjoy :)