JavaScript functions confusion

Question

I am in the process of learning AngularJS, and have the following code (from video tutorials I'm going through).

eventsApp.controller('EventController',
                    function EventController($scope, eventData) {
                        eventData.getEvent(function(event) {
                            $scope.event = event;
                        });

I am confused about this bit of the JavaScript eventData.getEvent(function(event) { } I admit that my JavaScript knowledge isn't super, but JavaScript functions are so strange in this regard compared to C# or Java functions/methods.

I understand that eventData is my AngularJS service and on that, I have a method called getEvent() but that does not take in an event object as a parameter! Here is my AngularJS service code:

eventsApp.factory('eventData', function($http, $log) {
    return {
        getEvent: function(successcb) {
            $http({ method: 'GET', url: 'data/event/1.json' }).
            success(function(data, status, headers, config) {
                successcb(data);
            }).
            error(function(data, status, headers, config) {
                $log.warn(data, status, headers, config);
            });
        }
    }
});

Even when I tell myself "ignore object types and classes (thinking along C# / Java lines) and think of it as a plain object", then still I don't get where the event parameter in eventData.getEvent(function(event) { } came from!

Can someone please clarify?

Thanks

It's a param to an anonymous function. See This wikibooks post for more information — scragar
– scragar, Commented May 20, 2014 at 14:37
The parameter is just a parameter, it can be anything. But, in your case, that parameter is a callback - Callbacks are needed in JavaScript to continue processing work from ASYNC requests, as you have above. — tymeJV
– tymeJV, Commented May 20, 2014 at 14:41

Tom · Accepted Answer · 2014-05-20 14:49:31Z

You're not actually passing event as the parameter, you're passing that entire function as the parameter as a callback. When getEvent reaches .success, it's calling that function (called successcb in the service), and passing data (where data is actually the event parameter that you're seeing in your controller.

It actually looks more like this:

eventsApp.factory('eventData', function($http, $log) {
    return {
        getEvent: function() {
            $http({ method: 'GET', url: 'data/event/1.json' }).
            success(function(data, status, headers, config) {
               // successcb(data);
               // this is essentially what's happening, except in your controller...
               // ...so, this won't actually work because you don't have $scope in this service
               // but it's the same idea
               successcb(data);
               var successcb = function(event) {
                   $scope.event = event;
               };
            }).
            error(function(data, status, headers, config) {
                $log.warn(data, status, headers, config);
            });
        }
    }
});

dhalsumit · Accepted Answer · 2014-05-20 14:48:00Z

1

Javascript functions can be treated as inline objects and can be passed as parameters.

for example you can have something like the below (pseodo code):

var x = function fun(){alert ('hi');};
callerFunction(x);

which is same as

callerFunction(function fun(){alert ('hi');});

Above is what is the concept behind and all modern JS libraries (like jQuery) leverage it to include all callback functions as parameters.

edited May 20, 2014 at 14:48

answered May 20, 2014 at 14:42

dhalsumit

1431 gold badge1 silver badge10 bronze badges

Comments

Ruben Nagoga · Accepted Answer · 2014-05-20 15:01:57Z

0

Your service method is waiting for variable REFERENCE_TO_FUNCTION. Maybe this example will make it more clear:

eventsApp.factory('eventData', function($http, $log) {
    return {
        getEvent: function(REFERENCE_TO_FUNCTION) {
            $http({ method: 'GET', url: 'data/event/1.json' }).
            success(function(data, status, headers, config) {
                REFERENCE_TO_FUNCTION(data);
            }).
            error(function(data, status, headers, config) {
                $log.warn(data, status, headers, config);
            });
        }
    }
});

answered May 20, 2014 at 15:01

Ruben Nagoga

2,2182 gold badges20 silver badges32 bronze badges

Collectives™ on Stack Overflow

JavaScript functions confusion

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related