What Are Closures and Callbacks

How is a closure different from a callback?

Check the introduction in this: http://jibbering.com/faq/faq_notes/closures.html. It can help you understand better how closures relate to functions.

Here is a set of closure examples: http://www.javascriptkit.com/javatutors/closures2.shtml

Basically, the callback is like a function pointer. The bit that makes it a closure, is when that function accesses anything on the context where it lives, like variables outside it. When that happens, the function will use the current values of the variables (as opposed to copy them). See example 4.

What's the difference between closures and callbacks in Swift?

They are two completely different, although compatible, concepts. A callback is a hook for a function to be attached to so that when an action is needed the function can be called to provide a result or affect. A closure is a function that captures local variables to be used in a scope outside of the local scope. A closure can be a callback just like any other function can be a callback but it's not limited to that use.

In your quote they are talking about how you can use a closure for the callback. In that case the compiler can infer the function signature (types of parameters and return) from the context.

Note that this has very little to do with Objective-C blocks. Swift and Objective-C are two completely different languages and blocks and closures are two different implementations of similar concepts.

What are Closures and Callbacks?

Closures have already been well handled in Stackoverflow here is just a selection:-

How does a javascript closure work?

What exactly does “closure” refer to in JavaScript?

can you say this is a right example of Javascript Closure.. Where the places we need to consider avoiding the closures??

JavaScript scope and closure

Javascript Closures and ‘this’ context

JavaScript - How do I learn about “closures” usage?

Callbacks are a simpler concept. A callback is basically where a function accepts another function as a parameter. At some point during execution the called function will execute the function passed as a parameter, this is a callback. Quite often the callback actually happens as an asynchronous event, in which case the called function may return without having executed the callback, that may happen later. Here is a common (browser based) example:-

 function fn() { alert("Hello, World"); }
 window.setTimeout(fn, 5000);

Here the function fn is passed as a callback to the setTimeout function. Set timeout returns immediately however 5 seconds later the function passed as a callback is executed.

Closures and callbacks

Quite often the reason that closures get created (either incidentally, accidentally or deliberately) is the need to create a callback. For example:-

 function AlertThisLater(message, timeout)
 {
     function fn() { alert(message); }
     window.setTimeout(fn, timeout);
 }

 AlertThisLater("Hello, World!", 5000);

(Please read some of the linked posts to grasp closures)

A closure is created containing in part the message parameter, fn is executed quite some time after the call to AlertThisLater has returned, yet fn still has access to the original content of message.

Is callback function always a closure?

callback is always a closure?

These are orthogonal terms.

Callback is a function reference passed to another function to be called from inside it.

Closure is always an inner function that uses variables from outer function.
If inner function does not use any outer variables then it "closes nothing" - just a function as any other.

What are the use cases for closures/callback functions in JavaScript?

Firstly:

Callback: A function passed as an argument to another function, usually to be called as a result of an event occurring.
Closure: A retained scope. I.e. the concept that when you declare a function within another function, the outer function's scope is accessible within the inner function.

Callbacks can also be closures but are not always.

This is a callback:

someProcess(myCallback);

function myCallback() {
    alert('Done...');
}

function someProcess(callback) {
    // does stuff...
    // ...
    callback();
}

A closure:

function foo(msg) {

    function bar() {
        // I can access foo's scope
        // (i.e. bar can access everything that foo can access)
        alert(msg);
    }

    return bar;

}

foo('hello')(); // alerts "hello"

One common usage of closures is to provide information-hiding, which is helpful in bringing some kind of encapsulation to the language. Have a look at the module pattern to see this in action.

Another common usage is when the binding event handlers to elements. E.g.

var myElements = [ /* DOM Collection */ ];

for (var i = 0; i < 100; ++i) {
    myElements[i].onclick = function() {
        alert( 'You clicked on: ' + i );
    };
}

That wouldn't work. By the time the element is clicked, the variable i is 99. To make this work properly we could use a closure to capture the value of i:

function getHandler(n) {
    return function() {
        alert( 'You clicked on: ' + n );
    };
}

for (var i = 0; i < 100; ++i) {
    myElements[i].onclick = getHandler(i);
}

React closure with callbacks

This is the complete code for the Button component:

class Button extends React.Component {
  shouldComponentUpdate() {
    return false;
  }

  render() {
    return (
      <div>
        <button onClick={this.props.onClick}>This one is stale</button>
        <button onClick={() => this.props.onClick()}>This one works</button>
      </div>
    );
  }
}

The Button component is set up to not rerender when passed new props, thus this.props.onClick will only be evaluated once on initial render and will always reference the first onClick function that was passed to it.

In contrast, even though it is also evaluated once, () => this.props.onClick() is set up to look up onClick on the component current props at the time the arrow function is actually executed. At that point, the props will have been updated with the new version of onClick.

PHP closures & callbacks

Pay attention in your example there is 2 functions. addPrefix, and an anonymous function it addPrefix returns.

So, $c is this anonymous function (returned by addPrefix), which has the $prefix argument.

JavaScript closures & callback functions

If I want to take advantage of closure in, say, a callback function, then the function must always be an inner function.

That's correct. Every function in JavaScript only has access those variables which are either defined in its own scope or defined in a parent scope¹. Therefore, your first example works while your second example doesn't.

The question is, is there any way to pass inner variables to an external function like this, short of adding them to a parameter list?

No, there's no way to do that. Well, technically you could add your inner variable to an object and then bind that object to the external function after which you can access the inner variable from the this context of the external function, but that is no better than passing the variable to the function directly.

doSeparated();
function doSeparated() {    var message = "Goodbye";
    setTimeout(outer.bind({        message: message    }), 3000);}
function outer() {    alert(this.message);}