I was reading the Facebook API when I e across this page, where there is this snippet:

FB.ui({
  method: 'feed',
  link: '/',
  caption: 'An example caption',
}, function(response){});

This code confuses me. If my understanding is correct, this is a function call of FB.ui, its first parameter is an object literal. But what is its 2nd parameter, what is this function(response){}? It seems to me this should be a syntax error.

I was reading the Facebook API when I e across this page, where there is this snippet:

FB.ui({
  method: 'feed',
  link: 'https://developers.facebook./docs/',
  caption: 'An example caption',
}, function(response){});

This code confuses me. If my understanding is correct, this is a function call of FB.ui, its first parameter is an object literal. But what is its 2nd parameter, what is this function(response){}? It seems to me this should be a syntax error.

• javascript
• callback

Share Improve this question Follow edited Oct 27, 2015 at 15:54 C3roe 96.8k1515 gold badges9898 silver badges170170 bronze badges asked Oct 27, 2015 at 15:10 shenkwenshenkwen 3,9001010 gold badges5555 silver badges101101 bronze badges 1

• 3 That is an anonymous function that does nothing, it should bot raise syntax error, it is valid synatx – Tushar Commented Oct 27, 2015 at 15:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

This is a callback. Because JS operates in the browser, it can't simply sit and wait for a network request to plete. The browser has to go off and do other work while the server is sending a response, so callbacks are used to call back into the code once some remote operation has finished.

This particular pattern, of:

remoteCall(objectParams, responseCallback)

is a very mon way to handle some request that goes out to a server or filesystem. It's a way of putting the actual IO operation in a separate thread, so as not to freeze the rest of the program.

There are three main ways to handle asynchronous operations in JS:

Callback Parameters

You can pass these as function parameters or part of the object:

remoteCall(objectParams, responseCallback)
remoteCall({
  success: responseCallback
})

The function is responsible for invoking the functions you provide once it has reached some state (finished, failed, progress changed).

Events

A more elegant, but somewhat more plex, way of handling this is through proper events. The built-in XHR class uses these (from the wikipedia article):

var request = new XMLHttpRequest();
request.onreadystatechange = function () {
    var DONE = this.DONE || 4;
    if (this.readyState === DONE){
        alert(this.readyState);
    }
};

In this model, you subscribe to a named event, which will be called at some future time.

The DOM (web page hosting a script) typically interacts with the script via events, using standardized names. MDN has a page of the DOM events, what info they use, and when they're fired.

Promise(/Deferred)

This is a newer model bining callbacks and events. jQuery is well-known for using a mutilated version of promises, but with real promises, a request can bee:

promise.then(function(result) {
  console.log(result); // "Stuff worked!"
}, function(err) {
  console.log(err); // Error: "It broke"
});

This article (where the above snippet es from) has a fantastic parison of events and promises.

One of the best implementations of promises is Bluebird, which has fantastic documentation on the patterns and how they work.

What You're Seeing

An anonymous function (declared inline, with no name) is used to pass a function around as an object (because functions in JS are objects). If a function is named:

function foo() { ... }
// do some things
foo(); // do foo

then you are able to call it from within the same scope. If a function is not named:

var foo = function() { ... }
// do some things
foo(); // do foo

then you need a reference in order to call it. The name is not published for just anybody to use.

This is the basis of immediately-invoking functions, which can be used to do some logic when a script is loaded:

(function () {
    ...
}());

This function calls itself once when it loads, but has no name (and is not assigned to a variable), preventing it from being called again.