Closure Design Patterns The power of functions in JavaScript Qafoo GmbH October 25, 2012 Closure Design Patterns 1 / 54 What comes next? Welcome Closure Design Patterns 2 / 54 About Me Jakob Westhoff I More than 11 years of professional PHP Working with experience I More than 8 years of Qafoo passion for software quality professional JavaScript experience I Open source enthusiast I Regular speaker at (inter)national conferences I Consultant, Trainer and Author Closure Design Patterns 2 / 54 About Me Jakob Westhoff I More than 11 years of professional PHP Working with experience I More than 8 years of Qafoo passion for software quality professional JavaScript experience We help people to create I Open source enthusiast high quality web I Regular speaker at applications. (inter)national conferences I Consultant, Trainer and Author Closure Design Patterns 2 / 54 About Me Jakob Westhoff I More than 11 years of professional PHP Working with experience I More than 8 years of Qafoo passion for software quality professional JavaScript experience We help people to create I Open source enthusiast high quality web I Regular speaker at applications. (inter)national conferences I Consultant, Trainer and http://qafoo.com Author Closure Design Patterns 2 / 54 Goals of this session I Special role of functions in JavaScript I The concept of closures I Utilize those features I Closure/Function Design Patterns Closure Design Patterns 5 / 54 Goals of this session I Special role of functions in JavaScript I The concept of closures I Utilize those features I Closure/Function Design Patterns Closure Design Patterns 5 / 54 What comes next? Functions Closure Design Patterns 6 / 54 First level citizens I Functions are first level citizens in JavaScript I Can be passed like any other variable I Can be created inline I Can be defined at any nesting level I Can be assigned like any other variable Closure Design Patterns 6 / 54 First level citizens I Can be passed like any other variable 1 function foo(callback) f g 2 3 function bar() f g 4 5 foo(bar); Closure Design Patterns 7 / 54 First level citizens I Can be created inline 1 function foo(callback) f g 2 3 foo( function () f 4 //.. 5 g ); Closure Design Patterns 8 / 54 First level citizens I Can be defined at any nesting level 1 function foo() f 2 function bar() f 3 function baz() f 4 //... 5 g 6 g 7 g Closure Design Patterns 9 / 54 First level citizens I Can be assigned like any other variable 1 function baz(callback) f g 2 3 var foo= function () f g 4 var bar= foo; 5 baz(bar); Closure Design Patterns 10 / 54 What comes next? Scope Basics Closure Design Patterns 11 / 54 JavaScript Scoping Basics I Scoping in JavaScript isn’t trivial I To understand closures only a part of JavaScripts scoping rules are essential I Especially Scope Isolation and the Scope Chain Closure Design Patterns 11 / 54 JavaScript Scoping Basics I Scoping in JavaScript isn’t trivial I To understand closures only a part of JavaScripts scoping rules are essential I Especially Scope Isolation and the Scope Chain Closure Design Patterns 11 / 54 JavaScript Scoping Basics I Scoping in JavaScript isn’t trivial I To understand closures only a part of JavaScripts scoping rules are essential I Especially Scope Isolation and the Scope Chain Closure Design Patterns 11 / 54 Scope Isolation I JavaScript does only provide scope isolation on a function level I In contrast to block level isolation in other languages (C, C++, Java, ...) 1 var i = 100; 2 3 ( function () f 4 f o r( var i=1;i <=3; ++i) f 5 a l e r t(i);// 1, 2,3 6 g 7 g )(); 8 9 a l e r t(i)// 100 Closure Design Patterns 12 / 54 Scope Isolation I JavaScript does only provide scope isolation on a function level I In contrast to block level isolation in other languages (C, C++, Java, ...) 1 var i = 100; 2 3 ( function () f 4 f o r( var i=1;i <=3; ++i) f 5 a l e r t(i);// 1, 2,3 6 g 7 g )(); 8 9 a l e r t(i)// 100 Closure Design Patterns 12 / 54 Scope Isolation I JavaScript does only provide scope isolation on a function level I In contrast to block level isolation in other languages (C, C++, Java, ...) 1 var i = 100; 1 var i = 100; 2 2 3 f o r( var i=1;i <=3; ++i) f 3 ( function () f 4 a l e r t(i);// 1, 2,3 4 f o r( var i=1;i <=3; ++i) f 5 g 5 a l e r t(i);// 1, 2,3 6 6 g 7 a l e r t(i)// 100 or 4? 7 g )(); 8 9 a l e r t(i)// 100 Closure Design Patterns 12 / 54 Scope Isolation I JavaScript does only provide scope isolation on a function level I In contrast to block level isolation in other languages (C, C++, Java, ...) 1 var i = 100; 1 var i = 100; 2 2 3 f o r( var i=1;i <=3; ++i) f 3 ( function () f 4 a l e r t(i);// 1, 2,3 4 f o r( var i=1;i <=3; ++i) f 5 g 5 a l e r t(i);// 1, 2,3 6 6 g 7 a l e r t(i)//4 7 g )(); 8 9 a l e r t(i)// 100 Closure Design Patterns 12 / 54 Scope Isolation I JavaScript does only provide scope isolation on a function level I In contrast to block level isolation in other languages (C, C++, Java, ...) 1 var i = 100; 1 var i = 100; 2 2 3 f o r( var i=1;i <=3; ++i) f 3 ( function () f 4 a l e r t(i);// 1, 2,3 4 f o r( var i=1;i <=3; ++i) f 5 g 5 a l e r t(i);// 1, 2,3 6 6 g 7 a l e r t(i)//4 7 g )(); 8 9 a l e r t(i)// 100 Closure Design Patterns 12 / 54 Scope Chain I JavaScript Engines chain scopes during their creation I Inner scopes are always allowed to access outer scopes variables I Outer scopes can not access inner scopes variables I Outer scope access is done by reference not by value Closure Design Patterns 13 / 54 Scope Chain 1 var a = 42; Closure Design Patterns 14 / 54 Scope Chain 1 var a = 42; a = 42 Closure Design Patterns 14 / 54 Scope Chain 1 var a = 42; a = 42 null Closure Design Patterns 14 / 54 Scope Chain 1 var a = 42; 2 3 function somefunc() f 4 var b = 23; 5 g a = 42 b = 23 null Closure Design Patterns 14 / 54 Scope Chain 1 var a = 42; 2 3 function somefunc() f 4 var b = 23; 5 g a = 42 b = 23 null Closure Design Patterns 14 / 54 Scope Chain 1 var a = 42; 2 3 function somefunc() f 4 var b = 23; 5 6 function otherfunc() f 7 var c=”foo”; 8 g 9 g a = 42 b = 23 c = "foo" null Closure Design Patterns 14 / 54 Scope Chain 1 var a = 42; 2 3 function somefunc() f 4 var b = 23; 5 6 function otherfunc() f 7 var c=”foo”; 8 g 9 g a = 42 b = 23 c = "foo" null Closure Design Patterns 14 / 54 Scope Chain 1 var a = 42; 2 3 function somefunc() f 4 var b = 23; 5 6 function otherfunc() f 7 var c=”foo”; 8 var a=”bar”; 9 g 10 g a = 42 b = 23 c = "foo" a = "bar" null Closure Design Patterns 14 / 54 Scope Chain 1 var a = 42; 2 3 function somefunc() f 4 var b = 23; 5 6 function otherfunc() f 7 var c=”foo”; 8 var a=”bar”; 9 a=”baz”; 10 g 11 g a = 42 b = 23 c = "foo" a = "baz" null Closure Design Patterns 14 / 54 Scope Chain 1 var a = 42; 2 3 function somefunc() f 4 var b = 23; 5 6 function otherfunc() f 7 var c=”foo”; 8 var a=”bar”; 9 a=”baz”; 10 b= 5; 11 g 12 g a = 42 b = 5 c = "foo" a = "baz" null Closure Design Patterns 14 / 54 Scope Chain 1 var a = 42; 2 3 function somefunc() f 4 var b = 23; 5 6 function otherfunc() f 7 var c=”foo”; 8 a=”baz”; 9 g 10 g a = "baz" b = 23 c = "foo" null Closure Design Patterns 14 / 54 What comes next? Closures Closure Design Patterns 15 / 54 Closures in computer science I Closures are functions I They are closed over their free variables I Variables from an outside scope can be accessed (upvalues) I Still accessible if outer scope ceases to exist I Upvalues are passed by reference not by value Closure Design Patterns 15 / 54 Closures in JavaScript 1 var g r e e t i n g=”Hello World!”; 2 3 function showGreetings() f 4 a l e r t( greeting); 5 g 6 7 showGreetings(); Closure Design Patterns 16 / 54 Closures in JavaScript Closure Design Patterns 17 / 54 Closures in JavaScript 1 function createAlertMessage( message) f 2 var showMessage= function () f 3 a l e r t( message); 4 g 5 6 return showMessage; 7 g Closure Design Patterns 18 / 54 Closures in JavaScript 1 function createAlertMessage( message) f 2 var showMessage= function () f 3 a l e r t( message); 4 g 5 6 return showMessage; 7 g 1 var greetTheWorld= createAlertMessage( 2 ”Hello World!” 3 ); 4 5 greetTheWorld(); Closure Design Patterns 18 / 54 Closures in JavaScript Closure Design Patterns 19 / 54 Closures in JavaScript 1 function createAlertMessage( message) f 2 var showMessage= function () f 3 a l e r t( message); 4 g 5 6 return showMessage; 7 g 1 var greetTheWorld= createAlertMessage( 2 ”Hello World!” 3 ); 4 var greetTheAudience= createAlertMessage( 5 ”Hello Audience.