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
![Page 1: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/1.jpg)
Functions and Closures
![Page 2: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/2.jpg)
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
![Page 3: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/3.jpg)
So what is a Closure? All functions are closures!
![Page 4: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/4.jpg)
Lexical Closure
Lexis means word (greek)“the words are bound/enclosed”
![Page 5: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/5.jpg)
Function Definition
function foo(bar) {return 1+1;
}
console.log(typeof foo);
![Page 6: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/6.jpg)
Function Expression
var foo = function (bar) {return 1+1;
};
console.log(typeof foo);
![Page 7: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/7.jpg)
Functions take parameters and return a value (an Object)
![Page 8: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/8.jpg)
Notice the lack of difference between a function expression and definition.They’re the same!
![Page 9: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/9.jpg)
Functions are just another type of objectlike String, Date, Array, Number, etc.
![Page 10: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/10.jpg)
Let’s consider the implications
![Page 11: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/11.jpg)
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
![Page 12: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/12.jpg)
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
![Page 13: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/13.jpg)
What happens if we replace a common object (like Date or String) with
Function object?
![Page 14: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/14.jpg)
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.
![Page 15: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/15.jpg)
There are some interesting repercussions of this.
![Page 16: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/16.jpg)
The inner function’s scope includes the scope of the outer functionFeel free to read that a few times.
![Page 17: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/17.jpg)
Reminder: What is Scope?When you can reference a variable
![Page 18: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/18.jpg)
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);
![Page 19: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/19.jpg)
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);
![Page 20: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/20.jpg)
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);
![Page 21: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/21.jpg)
A Partial Summary
Variables from outer functions are available to inner functions.
![Page 22: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/22.jpg)
So what’s a global variable?
A variable which forces itself from an inner scope into an
outer.
![Page 23: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/23.jpg)
Why do this?An example with setTimeout
![Page 24: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/24.jpg)
setTimeoutTakes a function and a time. Will call the function after that many seconds
![Page 25: Functions and Closures](https://reader035.vdocuments.us/reader035/viewer/2022062218/56815f0c550346895dcdcbf5/html5/thumbnails/25.jpg)
Simple reminder script
var reminder = prompt("What do you need to be reminded of?");setTimeout(function () {
alert(reminder) }, 10);