Javascript and Anonymous functions - how to call these during runtime for debugging

Question

I am new to javascript and I am trying to debug an Angular application in the browser dev tool and want to call an anonymous function from the console. Is there a way to do this? I may not even be understanding the code I am looking at when debugging this application in the browser. Below is a sample of the .js file I put a break point in.

I am a bit confused what this function shown is. It's not self executing, but it is anonymous. How is this function ever called by the application? Can anyone help me understand the below code?

It seems it's an anonymous function that has angular module factory - which from what I am reading is the way to define a service? If so, how can I call for example, the 'A' functions in the console to debug?

!function() {
    "use strict";
    angular.module("customPlugin", ["coreFw"]),
    angular.module("naviBar", ["coreCw", "customPlugin"])
}(),
function() {
        "use strict";
        angular.module("moduleName").factory("naviBar", ["$q", "$window", function(a, i, s) {
            var n = function(e) {
                return !0 === e || !1 === e || "[object Boolean]" === toString.call(e)
            }, 
            A = {
                init: function() {
                    a(A.watch, A.watchInterval)
                },
                watch: function() {
                    A.session.monitor(),
                    A.height.monitor(),
                    a(A.watch, A.watchInterval)
                }
            };
        }
        ])
}();

The code as shown as a syntax error, because it's trying to be a function declaration without a name. Function *declarations* must have names. If this were in an expression context, it would indeed be an immediately-invoked anonymous function (invoked by the `()` at the end), but not as shown. — T.J. Crowder, Apr 23 '18 at 15:34
There are no syntax errors for the file that I know of (I had to reduce the code sample as the actual .js file is over 3000 lines long). But the way this function is defined is just as shown and the 'watch' is continually called while the application is running. As I said though, I am new to javascript. Let me add the beginning part of the file in case that sheds light into how this function is declared and help you guys explain for me? — Daniel Kim, Apr 23 '18 at 15:51
The code does nothing because A and n aren't used inside service factory and aren't returned from it. — Estus Flask, Apr 23 '18 at 15:52
Your edit adds back the context. *"It's not self executing, but it is anonymous."* It's [inline-invoked/immediately-invoked](https://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript), which is usually what people mean by self-executing (it's not **self**-executing -- that's a recursive function -- but it's executed immediately by the `()` following it). (As I said above.) — T.J. Crowder, Apr 23 '18 at 15:55
Ah, I didn't notice the () after the declaration of the function. One item that confused me though is that I thought immediately invoked functions had to be enclosed between (), like shown in the link you included. In the code I posted above though, the function is not enclosed in (). Is that just preference but not required? — Daniel Kim, Apr 23 '18 at 16:08

score 0 · Answer 1 · answered Apr 23 '18 at 15:36

Try debugger like below: Then in your browser console it will stop there, go into debugging step by step...

function() {
debugger;
    "use strict";
    angular.module("moduleName").factory("naviBar", ["$q", "$window", function(a, i, s) {
        var n = function(e) {
            return !0 === e || !1 === e || "[object Boolean]" === toString.call(e)
        }, 
        A = {
            init: function() {
                a(A.watch, A.watchInterval)
            },
            watch: function() {
                A.session.monitor(),
                A.height.monitor(),
                a(A.watch, A.watchInterval)
            }
        };
    }
    ])
}()

ibrahim tanyalcin · Answer 2 · 2018-04-23T16:39:43.633

I have been working on a client side module system similar to ES6 import/export. It uses Promises and requestAnimationFrame to sort and then queue and execute the functions (It will fall to requestAnimationFrame only on older browsers). It operates on an dependency sorted function queue which you can pause anytime you want, thus useful for your purpose.

So what does it look like at the simplest case? My answer to this question might help.

Basically, the library will start executing the functions you push to queue after the load event has fired. You can check the repository here;

Here is a dummy project. Each time a dot is plotted you are infact reexecuting a function(script), and the pause button pauses the browser execution. A bit more detailed explanation.

Javascript and Anonymous functions - how to call these during runtime for debugging

2 Answers2