callbacks.txt

Consider the callstack:

function foo (var a, var b) {
	return a + b;	
}

// this is one stack depth deeper than the main function
var result = x(1,2);
console.log(result); // 3

// image of stack as flat rectangle with other below it

function bar (var c) {
	// this function is called within the other, so the stack is an extra layer deeper
	return foo(x,2);
}

// this goes 2 deep in the stack
result = foo(2,2);
console.log(result); // 4

// variables of called functions are passed deeper into the stack

---
// in javascript we can pass a function to be called by another function
function foobar (var a, function fn) {
	// we dont worry about declaring the function, we just know that one is passed in
		// and if we know what we're passing in,
	return fn(a,3);  // we can assume how it works 
}

result = foobar( 2, foo); // 5
console.log(result);

// but the callstack acts the same

---
// also in javascript, we can declare functions on the fly, 'anonymously'
result = foobar( 2,function (a,b) {
	return a + b;
});
console.log(result);
// this is the exact same syntax as 'foobar( 2, foo)', just used with an anonymous function

---
// so if we declare an anonymous function as the argument to our function, we can callback variables into a different scope
	// when you're writing node.js or jquery code, all of our events are triggered by an action
	// when performing a long running action or waiting for user input, we dont want to stop responding to new requests
	// in javascript, these are presented to us when interfacing with modules, and jquery when waiting for user input or requests
	// you can write code in different files to encapsulate functionality, and rely on callbacks a variables around the stack

function yolo (function fn) {
	var a = 1;
	var b = 2;
	sleep(2000); // wait 2 seconds before returning result
	return fn(a,b);
}

yolo( function (a,b) {
	var result = a + b;
	console.log(result);
});
console.log('called after yolo');

// picture of stacks passing variables up
// variables of callbacks are used to call a function declared in the previous stack 
// this function can peacefully reside in another file 

---
// this comes in handy in jquery when we're waiting for a user to do something
$('#button').on('click', function(event) {
	// do something . . .
	console.log(event); // would log in clients browser
});

// and a lot of node modules are written by other people, but we interface via callbacks, because its the same idea as jquery
// everything we do is based on users causing events, and the functions might take some time
query_a_database( query, functions(result){
	// this query might take a couple seconds to run
	console.log(result); // but the result is still used after
});

---
// when writing code to do this, we want to remember variables we receive from the callback, and how they're used as arguments

function baz (callback) {
	var a = 3;
	return callback(a);
}

function bat (cb) {
	var a = 4;
	return cb(a);
}

// and it makes for cleaner nesting, letting us keep variables on different stacks
function batbaz (bool) {
	var b = 4;
	if (bool) {
		baz(function (a) {
			result = a + b;
			console.log(result); // 3 + 4
		});
	} else {
		bat(function (a) {
			result = a + b;
			console.log(result); // 4 + 4
		});
	}
};
// we just need to remember where we are on the stack, cause it can get confusing
// we dont want to lose a variable generated by a callback, because we think we're in a different scope, rather than actual scope within the anonymous function

batbaz(false); // first function 
batbaz(true); // second function