Javascript Closures

Thoughtbot: WWJ Lightning Talk

Transcript

1. JavaScript Closures by Meredith Edwards @meredith_marg
2. Why closures?
3. What is a closure? A closure is a function with free variables + a referencing environment that closes those variables.
4. A Useful Metaphor Meredith Edwards
5. Free variables function counter() { count = count + 1; return count; } Free variables are any variables that don’t get defined inside a function. Like here, count is a free variable. It’s not defined inside the counter function. So where is count defined?
6. count is defined… function makeCounter() { var count = 0; function counter() { count = count + 1; return count; } return counter; }
7. What is a referencing environment? function makeCounter() { var count = 0; function counter() { count = count + 1; return count; } return counter; }
8. Let’s do some work together! Either on your laptop or with a neighbor, visit https: //repl.it/languages 1. Under the ‘Popular’ tab, click on JavaScript 2. On the left (white) side of your screen, type: console. log(‘Hello, Jelly!’); 3. Click run 4. Verify that your code is working by looking at the right (black) side of your screen
9. Copy the code on the left in your JavaScript repl.it function makeCounter() { var count = 0; function counter() { count = count + 1; return count; } return counter; } doCount = makeCounter(); console.log(doCount()); console.log(doCount()); console.log(doCount());
10. What is the closure here? function makeCounter() { var count = 0; function counter() { count = count + 1; return count; } return counter; }
11. Step 1, Illustrated doCount = makeCounter(); function counter() { count = count + 1; return count; } var count = 0;
12. Step 2, Illustrated Calling doCount() invokes the counter function function counter() { count = count + 1; return count; } var count = 1;
13. What happens when we call doCount( ) a second time… ? function counter() { count = count + 1; return count; } var count = 1;
14. Calling doCount( ) invokes counter, which increments the count variable: counter( ) function counter() { count = count + 1; return count; } var count = 2;
15. Let’s Review ❏ Wait, what is a closure again? ❏ I still have a burning question…
16. Take a look at another example 1. Comment out the code in your current repl. 2. Copy the code on the right at the top of your repl. function multiplier(x) { function multiply(y) { return x * y; } return multiply; }
17. Sketch this out: multiplyBy5 = multiplier(5); function multiplier(x) { function multiply(y) { return x * y; } return multiply; }
18. When you assign multiplyBy5 to multiplier(5)... function multiply(y) { return x * y; } multiplyBy5 = var x = 5;
19. But wait… what about ‘y’ ?? function multiply(y) { return x * y; } multiplyBy5 = var x = 5;
20. We define ‘y’ by invoking the function with 3: function multiply(y) { return x * y; } 3 5 3 multiplyBy5(3) = var x = 5; var y = 3; multiplyBy5(3) => 15
21. Now You Try Play around in the repl! multiplyBy5(6) => ? multiplyBy5(144) => ?
22. Meredith Edwards Please get in touch! I’d love to hear from you. email: meredith.edwards1771@gmail.com twitter: @meredith_marg blog: medwardstechblog.wordpress.com
23. Sources 1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures 2. http://stackoverflow.com/questions/111102/how-do-javascript-closures-work 3. Head First JavaScript, 2014