Functions and Closures

JavaScript Closures Are Everywhere

In JS we often want to say “when this thing happens, do something”

event driven programmingFor example:

When the user clicks on an image, show a bigger version of the imageOn 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 objectlike 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 functionvar 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 functionFeel 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

setTimeoutTakes 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);