Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Understanding closures, callbacks and promises in JavaScript

#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:

##Tasks to help my understanding of closures, callbacks and promises:

  1. 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 
  1. 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

@sachini93

This comment has been minimized.

Copy link

@sachini93 sachini93 commented Mar 30, 2017

thank u.. it was a good explanation.. 👍

@wingtips1

This comment has been minimized.

Copy link

@wingtips1 wingtips1 commented Apr 9, 2017

thank you. Short and very clear. You just saved me so much time trying to understand these.

@langtudatinh117

This comment has been minimized.

Copy link

@langtudatinh117 langtudatinh117 commented Apr 10, 2017

It's helpful, thank you.

@abhi10901

This comment has been minimized.

Copy link

@abhi10901 abhi10901 commented Aug 20, 2017

Thank you. This gives me a clear understanding of closures, callbacks, and promises and their usages.

@geoapi

This comment has been minimized.

Copy link

@geoapi geoapi commented Oct 1, 2017

Wonderful write up!, thanks a lot

@FantomX1-github

This comment has been minimized.

Copy link

@FantomX1-github FantomX1-github commented Oct 2, 2017

good tutorial

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Oct 24, 2017

Hi Amy. May this message find you well.

 Thank you for the share. I am going to enjoy reading through these notes.
 Only recently getting my feet wet on these things.

,,, consider some Markdown tips in return for glancing at your notes:

  1. Putting a space after the # or ## to invoke the header levels
    # Title ->

Title

  1. Code:
```javascript
var say2 = sayHello2('Bob');
``` 

Note the javascript added which give code syntax (where available)

var say2 = sayHello2('Bob');

Code segment..

console.log('Failed to fetch data.txt: " + error);

can be -> (note the " instead of the ')

console.log("Failed to fetch data.txt: " + error);

Greetings.
- Dan

@eugen-private

This comment has been minimized.

Copy link

@eugen-private eugen-private commented Nov 16, 2017

hey, try expanding with async/await :)

@YoneMoreno

This comment has been minimized.

Copy link

@YoneMoreno YoneMoreno commented Mar 23, 2018

Thank you interesting explanation and examples.

@ALELIWI-Muhammad

This comment has been minimized.

Copy link

@ALELIWI-Muhammad ALELIWI-Muhammad commented Jul 30, 2018

.

@nainav

This comment has been minimized.

Copy link

@nainav nainav commented Sep 19, 2018

Thanks ,Very well explained !!

@GlenCorreia

This comment has been minimized.

Copy link

@GlenCorreia GlenCorreia commented Sep 28, 2018

Well explained. Thanks!

@developer-subash

This comment has been minimized.

Copy link

@developer-subash developer-subash commented May 11, 2019

well said thank you

@coolskin2b

This comment has been minimized.

Copy link

@coolskin2b coolskin2b commented Sep 25, 2019

Thanks for this.

@nikitagupta0809

This comment has been minimized.

Copy link

@nikitagupta0809 nikitagupta0809 commented Sep 26, 2020

Hi! Thanks for sharing this! Great explanation!

@vikaschauhan1

This comment has been minimized.

Copy link

@vikaschauhan1 vikaschauhan1 commented Sep 24, 2021

Nice explanation with proper examples. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment