Mindstab.net

for(var i=0; i< 10; i++) { var t = setTimeout( function () { alert(i);}, 200); }

This will results in 10 alerts all saying ’10′ and not as some might think 10 alerts of 1, 2, 3, …, 9, 10. This is because the function being called is a closure and contains a reference to i, not the value of i. When the first one is finally called, 200ms later, i contains the value of 10 since the loop is done executing when the function looks i up. I suspect this has caused some people some headaches.

You can easily test this in Chrome’s javascript console as I did first ;)

I’ve been wanting to play with HTML5′s canvas for a bit now and I’ve always liked Conway’s game of life since it was introduced to me in first year CS so it seemed like a good match. In the spare time of a few days I was easily able to cobble it together, and even add some nice controls and one novel (to me) feature: the rainbow color age effect, which cycles the color of the cells and darkens them with age so you can quickly see the age of cells on the board and get a pretty show.

The code is on github and you can see it live on the demo I put up.

HTML5′s canvas is fun for simple things like this. I don’t know how it would a) hold up for more complicated and practical applications, and b) how much “fun” it would still be. Maybe I’ll find out, maybe not.

So in the course of cleaning Cortex up I’m trying to add some structure and modularity so it can be taken apart and extended more easily in the future. I came across this fun trick with closures for wrapping methods. I <3 JavaScript

function a(x, y) {
	z = x + y;
	document.writeln("fn a: " + x + " + " + y + " = " + z +"<br />");
}
 
document.writeln("a(1, 2)<br />");
a(1, 2);
 
function makeB() {
	fna = a;
	return function (x, y) {
		document.writeln("fn b: inc-ing x:" + x +"  & y:"+y+"<br />");
		x = x + 1;
		y = y + 1;
		fna(x, y);
	};
}
 
b = makeB();
 
document.writeln("b(1, 2)<br />");
b(1, 2)
 
document.writeln("a = b<br />");
a = b;
document.writeln("a(1, 2)<br />");
a(1, 2);

The output is

a(1, 2)
fn a: 1 + 2 = 3
b(1, 2)
fn b: inc-ing x:1 & y:2
fn a: 2 + 3 = 5
a = b
a(1, 2)
fn b: inc-ing x:1 & y:2
fn a: 2 + 3 = 5

As you can see you can use closures in this fashion to override a function and still maintain it’s original functionality. We now have a new “function a” that replaced the old one, but still calls it internally to preform its functionality. I’m trying to find a more streamlined way to do this now, the closest I’ve gotten is

function wrapFN(fn, maker) {
	return maker(fn);
}
 
a = wrapFN(a, function (fn) {
		return function(x, y){ 
			...
			fn(x, y);
                        ...
		}});

Neat huh?