What is a closure

Was talking with a coworker explaining what a bit of javascript syntax was doing, and reminded me of a good explanation of what a closure is in Javascript.

The short version of it is that:
A closure, enCLOSES all the variables – allowing you to access them from anywhere within that… enCLOSURE

This is because javascript only has one kind of scope, function scope.
Everything inside of a function has access to the created by the parent function.
So you can have something like this

var CanvasDemo = function() {
		return this;
	};
 
// On Ready Callback
	CanvasDemo.onReady = function(e)
	{
		this.canvas = this.createCanvas();
		this.canvasContext = this.canvas.getContext('2d');
		this.canvasContext.fillRect(100, 100, 50, 50);
 
		this.loadTruck();
 
		// Start rendering loop
		var that = this;
		this.loopInterval = setInterval(function() {
                 console.log(this); // 'this' - refers to document window
                 console.log(that); // 'that' - refers to 'CanvasDemo' instance
		 this.loop();
		}, 30);
	};

Because the closure (created by the javascript engine in the background), enCLOSES the ‘that’ variable, the function maintains access to it.

Tags: javascript