helper function undefined in helper after callback

Question

In my helper function, I have two functions that are called: first one validates data that's in another component using an API,shipmentInfo.handleIsValid. After it returns the desired result, I get data on the server using apex that.handleGetUpsCredential. I appear to be loosing access to the scope of my helper functions.

But I do get a successful response in my handleGetUpsCredential, but maybe I'm not returning a proper value? I don't understand how the error message can say that.handleGetUpsCredential is not a function, even though it causing a console.log to happen.

ShippingInfoHelper.js

generateTrackingNumber: function (component, helper) {
    let prescription = component.get("v.prescription");
    let shipmentInfo = component.find("shipmentInfo");
    let user = component.get("v.user");
    var that = this;

    shipmentInfo.handleIsValid(function (result) {
        if (result.constructor === Array) {              
            component.set('v.matches', result);
        } else { 
            let shipment = component.get("v.shipment");
            // errors right here
            that.handleGetUpsCredential(component)(function (credential) {
                let r = upsUtility.generateTrackingNumber(shipment);
                let body = r.body;
                let endPoint = r.endPoint;
                let action = component.get("c.makeCallOut");

                action.setParams({
                    body,
                    endPoint
                });

                action.setCallback(this, function (response) {
                    let state = response.getState();
                    if (state === "SUCCESS") {
                       // create shipment
                    } else if (state === "ERROR") {
                        lcUtility.showToastError(response.getError());
                    } else {
                        lcUtility.showToastError();
                    }
                }); 
                    $A.enqueueAction(action);         

            })         
       }
})
},
handleGetUpsCredential: function (component) {
   let action = component.get("c.getUpsCredential");

   action.setCallback(this, function (response) {
      let state = response.getState();
         if (state === "SUCCESS") {
            // this console.log does happen
            console.log(response.getReturnValue());
            return response.getReturnValue();
         } else if (state === "ERROR") {
            lcUtility.showToastError(response.getError());
         } else {
            lcUtility.showToastError();
         }
    });    
    $A.enqueueAction(action);         
},  

Answer 1

you have syntax error in calling that.handleGetUpsCredential function. From its declaration I can see, that it accepts only one parameter, handleGetUpsCredential: function (component).

Also passing callback function to the function have syntax error that.handleGetUpsCredential(component)(function (credential) {. It should be that.handleGetUpsCredential(component, function (credential) {

---

if you want to have callback in your handleGetUpsCredential function, you have to dedicate parameter for callback.

handleGetUpsCredential: function (component, callbackFunction)

to pass callback

that.handleGetUpsCredential(component,
    function (credential) {
    //do something
    }//callback is finished here
)//passing parameters is finished here
{
// body of handleGetUpsCredential goes here
}

to call callback function inside handleGetUpsCredential function call it inside body

handleGetUpsCredential: function (component, callbackFunction){
    let credential =  ...;
    callbackFunction(credential);
}

to read more about js callback you can check JavaScript: What the heck is a Callback?