Functions and Closures

JavaScript Closures Are Everywhere In JS we often want to say “when this thing happens, do something” event driven programming For example: When the user clicks on an image, show a bigger version of the image On clicking the image, show a new image styled a particular way. This is all done through closures

So what is a Closure? All functions are closures!

Lexical Closure Lexis means word (greek) “the words are bound/enclosed”

Function Definition function foo(bar) { return 1+1; } console.log(typeof foo);

Function Expression var foo = function (bar) { return 1+1; }; console.log(typeof foo);

Functions take parameters and return a value (an Object)

Notice the lack of difference between a function expression and definition. They’re the same!

Functions are just another type of object like String, Date, Array, Number, etc.

Let’s consider the implications

We can instantiate an object inside our function and return it function foo() { var d = new Date(); return d.toLocaleString(); } console.log(foo()); // this looks normal

We can instantiate an object inside our function and return it var foo = function() { var s = "and on earth peace to all people of good will"; return s; } console.log(foo()); // this looks normal

What happens if we replace a common object (like Date or String) with Function object?

We can instantiate an object inside our function and return it function foo() { //<-- the outer function var bar = function () { //<-- the inner function return "hello world from an inner function"; }; return bar; } var aFunction = foo(); console.log(aFunciton()); // this looks weird at first.

There are some interesting repercussions of this.

The inner function’s scope includes the scope of the outer function Feel free to read that a few times.

Reminder: What is Scope? When you can reference a variable

function scope as you’re used to it. var n = 1; function foo() { var n = 2; console.log("n === " n); } console.log("n === " + n); foo(); console.log("n === " + n);

function scope in functional languages var n = 1, inner; function foo() { var n = 2; console.log("n === ", n); return function () { console.log("inner n === " + n); }; } console.log("n === " + n); inner = foo(); inner(); console.log("n === " + n);

It also means this will print 1 each time var n = 1, inner; function foo() { console.log( " n === " + n); return function () { console.log( " inner n === " + n); }; } console.log( " n === " + n); inner = foo(); inner(); console.log( " n === " + n);

A Partial Summary Variables from outer functions are available to inner functions.

So what’s a global variable? A variable which forces itself from an inner scope into an outer.

Why do this? An example with setTimeout

setTimeout Takes a function and a time. Will call the function after that many seconds

Simple reminder script var reminder = prompt("What do you need to be reminded of?"); setTimeout(function () { alert(reminder) }, 10);