Javascript Closures
I had a good conversation today that brought up Javascript Closures, which was me mostly having no idea what closures were, and the concept just being pretty hard to explain right off the bat. Anyway, that all lead me to go checkout what closures are.
In a nutshell, Javascript Closures are most likely used in everyone's code already, and the actual technical aspect is not new, it just has a name. But knowing about closures can be a powerful tool to avoid using gnarly global variables and needing to keep track of variables, parameters, and such that aren't necessarily needed all the time, globally.
A closure can be seen as an inner function within an outer function, where the inner retains the local variables, parameters, and what not of the outer function, even after the outer function has returned.
Some other ways to see it is that the closure can be a stack-frame that's not deallocated when when the outer function returns.
Again, that might be totally confusing, but take a common occurance as an example (example is using JQuery helpers, got the example from here):
function SetClassOnHover(className){
$("td").hover(
function () {
$(this).addClass(className);
},
function () {
$(this).removeClass(className);
}
);
}
What happens is, when the td gets a hover state, you add and remove the class names that were parameteres initially set in the SetClassOnHover function. SetClassOnHover has already returned, yet when the hover observer is fired off, you still know the className. That's how closures work! Hope that makes sense, leave any comments feedback that you have to help clarify or correct.
