JavaScript functions inside of JavaScript functions, closures, et al

Question

When I declare OnSuccess inside another function like below, the browser developer tools console indicates an error that there's no function called OnSuccess in the global scope. From this, I infer that any functions declared like below inside another function are still hoisted/pinned/treated as functions of the HTML DOM window object.

Then, I declare OnError like you declare a member inside an object initializer. That doesn't work either.

One way I could do is move both OnError and OnSuccess outside the AssignBackupOnServer function, but I want the OnSuccess and OnError to be able to look at the local variables of the AssignBackupOnServer, so I have declared it within the AssignBackupOnServer function.

What's the right way of going about this declaration if I want the contained lambda to exhibit a closure on the captured variables of its containing/enclosing function?

function AssignBackupOnServer(mainGuyUId, backupUId, backupFirstName, backupLastName) {

    var url = '/Foo/SearchForBackup';

    $.ajax(url,
        {
            cache: false,
            async: false,
            type: 'POST',
            data: JSON.stringify(
            { 
              'mainGuyUId': mainGuyUId, 
              'backupUId': backupUId, 
              'backupFirstName': backupFirstName, 
              'backupLastName': backupLastName 
            }),
            dataType: 'json',
            contentType: 'application/json',
            success: AssignBackupOnServer.OnSuccess,
            error: AssignBackupOnServer.OnError
        });

    function OnSuccess(data, textStatus, jqXHR) {
        // I want to use mainGuyUId, backupUId, 
        // backupFirstName, and backupLastName
        // here and therefore, I want this function
        // to exhibit a closure on its containing lambda
        // so I have declared it here
    }

    OnError : function(jqXHR, textStatus, errorThrown) {
    }
}

Richard Dalton · Accepted Answer · 2014-01-07 14:46:25Z

1

You were close with the OnSuccess but just slightly wrong when referencing it. You don't need the AssignBackupOnServer. prefix:

    success: OnSuccess,
    error: OnError
});

function OnSuccess(data, textStatus, jqXHR) {
}

function OnError(jqXHR, textStatus, errorThrown) {
}

answered Jan 7, 2014 at 14:46

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Water Cooler v2 Over a year ago

Thank you. :-) That's the thing I'd done at first, but I can't remember if it gave me an error or not with that. Please let me try that and get back to you.

JaredPar · Accepted Answer · 2014-01-07 14:47:19Z

1

The best way to handle this is to declare an identifier in the function AssignBackupOnServer for both functions and use those identifiers directly intstead of AssignBackupOnServer. For example

function onSuccess(data, textStatus, jqXHR) { 
  ...
}

function onError(jqXHR, textStatus, errorThrown) { 
  ...
}

$.ajax(url,
        {
         ...
            success: onSuccess,
            error: onError
        });

answered Jan 7, 2014 at 14:47

JaredPar

759k152 gold badges1.3k silver badges1.5k bronze badges

Comments

Maroshii · Accepted Answer · 2014-01-07 15:25:10Z

0

For what I see you are willing to reuse the onSuccess and onError functions but access the outer variables. If that's not the case Richard's answer is what you need. If it is I would suggest a more functional approach:

function makeSuccess(mainGuyUId, backupUId, backupFirstName, backupLastName){
  return function(data, textStatus, jqXHR){
    // Here you have access to everything
    // and you can use the function elsewhere
  }
}

function makeError(mainGuyUId, backupUId, backupFirstName, backupLastName){
  return function(jqXHR, textStatus, errorThrown){
    // Here you have access to everything
    // and you can use the function elsewhere
  }
}

function AssignBackupOnServer(mainGuyUId, backupUId, backupFirstName, backupLastName) {
  var args = Array.prototype.slice.call(arguments);
  var url = '/Foo/SearchForBackup';

  $.ajax(url,
    {
      //...
      success: makeSuccess.apply(this,args),
      error: makeError.apply(this,args)
    });
}

answered Jan 7, 2014 at 15:25

Maroshii

4,0274 gold badges26 silver badges29 bronze badges

1 Comment

Water Cooler v2 Over a year ago

Why did you need to call slice on the arguments? Why not just assign var args = arguments;?

Collectives™ on Stack Overflow

JavaScript functions inside of JavaScript functions, closures, et al

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related