functions and closures
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
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);