Property behaves differently when not wrapped in anonymous function

Question

I don’t understand very well how this JS function gets the data. This is the first variation of my code:

function iReceived(msg) {
              console.log(msg.data);
          };
            var rest = $.ajax({
                   type: "POST",
                   dataType:'jsonp',
                   url: "https://api.novaposhta.ua/v2.0/json/",
                   data: {"modelName": "Address",
                        "calledMethod": "getCities",
                        "methodProperties":{}, 
                         "apiKey": "XXXXXXXXXXXXXXXXXXX"},
                success:  function(e) { iReceived(e) }, 

            });

The function iReceived prints the data that it gets. But in the second variation:

function iReceived(msg) {
              console.log(msg.data);
          };
            var rest = $.ajax({
                   type: "POST",
                   dataType:'jsonp',
                   url: "https://api.novaposhta.ua/v2.0/json/",
                   data: {"modelName": "Address",
                        "calledMethod": "getCities",
                        "methodProperties":{}, 
                         "apiKey": "XXXXXXXXXXXXXXXXXXX"},
                success:   iReceived(e) , 

            });

the function returns undefined. Please, tell me why this variantion works a different way.

`function(e) { iReceived(e) }` is a function, `iReceived(e)` is `undefined` (it calls `iReceived` and uses the return value — `undefined` because nothing is returned). The value of the `success` property should be a function. — Sebastian Simon, Aug 18 '16 at 19:29
Because you're calling `iReceived` immediately instead of setting it as the callback. Doing `success: iReceived(e)` is just like writing `iReceived(e)` on a line by itself. — Mike Cluck, Aug 18 '16 at 19:29
Before anyone comments as to the specific duplicate, please be aware that `setTimeout` is a red-herring as to the actual issue here, which is calling a function instead of passing a function. The solution is absolutely the same, and this is a common problem. — zzzzBov, Aug 18 '16 at 20:12
@Xufox >The value of the success property should be a function. And the success "feeds" his data to the function, am i right understand? — Ogurchik, Aug 18 '16 at 20:23
@Ogurchik Internally the success property is called (if it is a function) with some parameters. The parameters contain the data. — Sebastian Simon, Aug 18 '16 at 20:25

gearsdigital · Answer 1 · 2016-08-18T20:08:21.100

In JavaScript you are able to pass a function as argument to other functions just by referring it by its name with no parentheses.

So you need to pass a reference to the success callback. If you pass iReceived() it is immediately executed and not what you expect here.

The first example works because you passed an anonymous function to the success callback which is executed right after your request is done. While the anonymous function is executed it is able to run your function with the loaded data.

Code

function iReceived(msg) {
  console.log(msg.data);
};

var rest = $.ajax({
  type: "POST",
  dataType: 'jsonp',
  url: "https://api.novaposhta.ua/v2.0/json/",
  data: {
    "modelName": "Address",
    "calledMethod": "getCities",
    "methodProperties": {},
    "apiKey": "XXXXXXXXXXXXXXXXXXX"
  },
  success: iReceived,

});

Oh, oh honestly say i didn't wait such answer. No a function, and reference to the function, hmm, this is unexpectedly. Thanks for your answer. — Ogurchik, Aug 18 '16 at 20:11

Property behaves differently when not wrapped in anonymous function

1 Answers1

Further reading on this topic

Code