Function as parameter returning an anonymous object

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 purpose of using this instead of simply running an anonymous object?

 myFunction({ foo: 'bar' }); 

Answer 1

In the first example, you pass 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 just pass an object to the called function.

Use this link to learn more about callback functions. Enjoy :)

Answer 2

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

In addition, if you use a function, you can do additional things, such as logging, how often your function / argument was called, or so on. Thus, the use of a function increases the flexibility for the user of the function.
For a function developer, on the other hand, accepting a function as an argument can lead to a tiny problem that the function should not return the same value every time you call it - myFunc() == myFunc() COULD return false, so I would not recommend passing a function if it should just return an argument.

Answer 3

Using the baseline has many places where they will initialize the function if it is passed to get the value, for example.

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

This is smart if you need to do some calculations / fulfill some conditions before you know what 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 , and 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 closure, 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 cannot access the variable v without using .get / .set on setGet , and in example 2. I can simply change it by setting setGet.v = 'new_val';

Answer 4

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

In this case, myFunction seems to require you to pass a function, not 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, any external user can access a . But in the first case, a becomes like a private variable, which is displayed by a public function. So you can observe this in places where people want to follow OOP concepts in indifferent JS.

---

Otherwise, you need a callback function or some function that will be called later. Therefore, if the data must be stored until something ends, you can make it available as the return value of the function, and not store it globally ...