#Understanding closures, callbacks and promises
For a code newbie like myself, callbacks, closures and promises are scary JavaScript concepts.
10 months into my full-time dev career, and I would struggle to explain these words to a peer.
So I decided it was time to face my fears, and try to get my head around each concept.
Here are the notes from my initial reading. I'll continue to refine them as my understanding improves.
I hope they help!
Cheers,
Amy
##Closures
Source: How do JavaScript Closures Work
- In JavaScript, if you use the function keyword inside another function, you are creating a closure
- A regular function created in the global scope can also close over variables
- The below code has a closure because the anonymous function function() { console.log(text); } is declared inside another function, sayHello2()
function sayHello2(name) {
var text = 'Hello ' + name; // Local variable
var say = function() { console.log(text); }
return say;
}
var say2 = sayHello2('Bob');
say2(); // logs "Hello Bob"
- If you declare a function within another function, then the local variables can remain accessible after returning from the function you called
- This is demonstrated above, because we call the function say2() after we have returned from sayHello2(). The code that we call is still able to reference the variable 'text', which was a local variable of the function sayHello2()
Source: Understanding JavaScript Closures With Ease
- A closure is an inner function that has access to the outer (enclosing) function's variables
- The closure has three scopes, all part of the same chain: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function's variables, and it has access to the global variables
- The inner function has access not only to the outer function’s variables, but also to the outer function's parameters
function showName (firstName, lastName) {
var nameIntro = "Your name is ";
// this inner function has access to the outer function's variables, including the parameter
function makeFullName () {
return nameIntro + firstName + " " + lastName;
}
return makeFullName ();
}
showName ("Amy", "Simmons"); // Your name is Amy Simmons
My own attempt: Also on JS Fiddle
//this example uses a closure because:
//a function is defined inside another function
//the inner function has access to the outer functions variables, 'text'
//the outer function's variables can be accessed even after the outer function is called
function surpriseMe(surprise){
var text = "Today you will be surprised with " + surprise;
function revealSurprise(){
alert(text);
}
return revealSurprise;
}
var surprise = surpriseMe("1000 puppy dogs");
surprise();
##Callbacks
Source: JavaScript The Good Parts
- Take the following example: a user interaction triggers a request to a server, and the response from the server should be displayed in the browser
- A synchronous way of doing this would be:
//synchronous example:
request = prepare_the_request();
response = send_request_synchronously(request);
display(response)
- Because the above code is synchronous, the program will wait for it to finish before moving on to another task
- If either the network or the server is slow, the user will be left waiting
- A better way of doing this would be with an asynchronous request, which provides a 'callback' function which will be invoked once the server's response is received:
//asynchronous example:
request = prepare_the_request();
response = send_request_asynchronously(request, function (response) {
display(response);
});
- When you execute something asynchronously, the program can move on to another task before the request finishes
Source: What is a callback function?
A callback function is a function which is:
- passed as an argument to another function
- is invoked after some kind of event
- once its parent function completes, the function passed as an argument is then called
Source: How to explain callbacks in plain english?
- A callback is any function that is called by another function, which takes the first function as a parameter
- Consider how programmers normally write to a file:
fileObject = open(file)
//now that we have WAITED for the file to open, we can write to it
fileObject.write("We are writing to the file.")
//now we can continue doing the other, totally unrelated things our program does
- In the above example, we wait for the file to open, before we write to it.
- This blocks the flow of execution, and our program cannot do any of the other things it might need to do
- This is where callbacks are useful:
//we pass writeToFile (a callback function) to the open function
fileObject = open(file, writeToFile)
//execution continues flowing -- we don't wait for the file to be opened
//once the file is opened we write to it, but while we wait we can do other things
My own attempt: Also on JS Fiddle
//the callback function
function done(){
console.log("Done");
}
//the parent function
function increment(num, callBack){
for(var i = 0; i <= num; i++){
console.log(i);
}
return callBack();
}
//the callback function is passed to the increment function
increment(10, done);
##Promises
Source: Udacity JavaScript Promises
- Normally code is synchronous - one statement executes and there is a guarantee that the next statement will execute immediately afterwards
- With asynchronous operations, you should assume that you have no idea when the operation will complete. You can't even assume that just because you send out one request first, and another request second, that they will return in that order
- Callbacks are the standard way of handling asynchrnous code in JavaScript, but promises are the best way to handle asynchronous code. This is because callbacks make error handling difficult, and lead to ugly nested code.
Source: Promisejs.org
- Promises help you naturally handle errors, and write cleaner code by not having callback parameters
- A promise represents the result of an asynchronous operation. A promise is in one of three different states: pending, fulfilled or rejected
- Once a promise is fulfilled or rejected, it is immutable (i.e. it can never change again)
- We use new Promise to construct the promise, the constructor is called immediately with two arguments - one that fulfils the promise and the other that rejects the promise
- promise.done allows us to wait for the promise to be fulfilled or rejected before doing something with it
Source: JavaScript Promise API
Basic usage:
var p = new Promise(function(resolve, reject) {
// Do an async task async task and then...
if(/* good condition */) {
resolve('Success!');
}
else {
reject('Failure!');
}
});
p.then(function() {
/* do something with the result */
}).catch(function() {
/* error :( */
})
Realistic example:
- A realistic example of using promises would be converting a get request to a promise-based task:
// From Jake Archibald's Promises and Back:
// http://www.html5rocks.com/en/tutorials/es6/promises/#toc-promisifying-xmlhttprequest
function get(url) {
// Return a new promise.
return new Promise(function(resolve, reject) {
// Do the usual XHR stuff
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function() {
// This is called even on 404 etc
// so check the status
if (req.status == 200) {
// Resolve the promise with the response text
resolve(req.response);
}
else {
// Otherwise reject with the status text
// which will hopefully be a meaningful error
reject(Error(req.statusText));
}
};
// Handle network errors
req.onerror = function() {
reject(Error("Network Error"));
};
// Make the request
req.send();
});
}
// Use it!
get('story.json').then(function(response) {
console.log("Success!", response);
}, function(error) {
console.error("Failed!", error);
});
Source: Eloquent JavaScript
- Promises wrap an asynchronous action in an object, which can be passed around and told to do certain things when the action finishes or fails
- Simialr to the above example:
funciton get(url){
return new Promise(function(succeed, fail){
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.addEventListener("load", function(){
if(req.status < 400){
succeed(req.responseText);
}else{
fail(new Error("Request failed: " + req.statusText));
}
});
req.addEventListener("error", function(){
fail(new Error("Network error"));
});
req.send(null);
});
}
- The get function above receives a url, and returns a promise
- The promise has a .then method which can be called with two functions, one to handle success, and the other to handle failure
get("example/data.txt").then(function(text){
console.log("data.txt: " + text);
}, function(error){
console.log('Failed to fetch data.txt: " + error);
});
- Calling .then produces a new promise, whose result depends on the return value of the first function we passed to then
My JS Fidles:
- .then example: https://jsfiddle.net/z4978svf/1/
- .catch example: https://jsfiddle.net/2wvj8j8u/
##Tasks to help my understanding of closures, callbacks and promises:
- Log the numbers 1 to 10 in the console with one second intervals using a loop: https://jsfiddle.net/4kdua72m/2/
for (var i = 0; i <= 10; i++) {
(function(index) {
setTimeout(function(){
console.log(index);
}, 1000 * index);
})(i);
}
//the above uses an IIFE, an immediately invoked function expression
//the IIFE takes in its own private copy of i
//it console logs the index at 1000ms, 2000ms, 3000ms, etc
//IIFE is the quickest way of creating a closure
- Log the numbers 1 to 10 in the console with one second intervals without using a loop: https://jsfiddle.net/v9qybf6x/2/
var i = 0;
function loop(){
setTimeout(function(){
console.log(i);
i++;
if (i <= 10){
loop();
}
}, 1000)
}
loop()
##Additional sources
It's helpful, thank you.