A function being passed as an argument to a function?

[Circuits]

Can someone help explain how this code works? Firstly:

function showNumericInputDialog(title, message, buttons, primaryIndex, handler, cancelHandler, minValue, maxValue)
    {
        var comp = Qt.createComponent("qrc:/Source/QML/UiControls/PopupNumericKeyboard.qml");
        comp.createObject(application, {
                                "title": title
                              , "message": message
                              , "modelButtons": buttons
                              , "primaryIndex": primaryIndex
                              , "selectionHandler": handler
                              , "cancelHandler": cancelHandler
                              , "minValue": minValue
                              , "maxValue": maxValue
                          })
    }

so the above code seems pretty straight forward. We have a function which when called will create a component. The function requires 8 inputs two of which confuse me a bit and I will show you why:

onReadyToSetAzimuthGuidance: showNumericInputDialog(
            qsTr("Azimuth Degree"),
            qsTr("Type in the azimuth in degree of the guideline"),
            [qsTr("Cancel"), qsTr("OK")],
            1,
            function(index, text){
                if (index === 1) {
                    presentationManager.guidancePresenter.setGuidanceAzimuth(text)
                } else {
                    presentationManager.guidancePresenter.cancelGuidanceCreation()
                }
            },
            function() {
                presentationManager.guidancePresenter.cancelGuidanceCreation();
            }, 0, 360);

The code above shows how this function is being called. The part that confuses me is this portion:

function(index, text){
                if (index === 1) {
                    presentationManager.guidancePresenter.setGuidanceAzimuth(text)
                } else {
                    presentationManager.guidancePresenter.cancelGuidanceCreation()
                }
            },
            function() {
                presentationManager.guidancePresenter.cancelGuidanceCreation();
            }

so these functions are simply called functions... they have no name? I am wondering how a function with no name can be called and how the original function (showNumericInputDialog) knows what to do when its see's two random unnamed functions as inputs. I mean it calls them: handler and cancelHandler, respectively but those don't seem to be keywords or anything like that.

Is the entire function itself being passed to the component? Does showNumericInputDialog even care what it's being handed or does it just pass it on to the component regardless?

[sierdzio]

@circuits said in A function being passed as an argument to a function?:

so these functions are simply called functions... they have no name? I am wondering how a function with no name can be called and how the original function (showNumericInputDialog) knows what to do when its see's two random unnamed functions as inputs. I mean it calls them: handler and cancelHandler, respectively but those don't seem to be keywords or anything like that.

Within that function (showNumericInputDialog) the handler and cancelHandler are names of these anonymous functions, and can be called like this: handler(1, "abc") and cancelHandler().

Does showNumericInputDialog even care what it's being handed or does it just pass it on to the component regardless?

It does not care, that's JavaScript for you ¯\(ツ)/¯

[Circuits]

@sierdzio Oh... cool XD thanks