Part of the JavaScript training series offered by Bitovi. Full course schedule is available here: http://blog.bitovi.com/free-weekly-online-javascript-training/

1. JavaScript Training
Goal Trainers Format
• Lecture
• Exercises
• Ask Questions!
• bitovi/js-training

2. Functions & Closures

3. var sum = function( x , y ){
return (++x) +
(++y.val)
},
a = 1,
b = {val : 2},
c = sum( a, b);
Types as Arguments
WINDOW
sum fn
a
b
c 5
1
2
sum(a,b
)
x
y
1
PROTOTYPE
val
2
3

4. Summary
Primitives: passed by value, get a copy of
data
Objects: passed by reference

5. var a = {};
for(var i=0; i<3; i++) {
a[i] = function() { alert(i) };
}
a[0]();
a[1]();
a[2]();
// 3
// 3
// 3

6. var counter = function(){
var count = 0;
return function(){
return ++count;
};
};
var c1 = counter();
c1();
c1();
var c2 = counter();
c2();
WINDOW
counter fn
counter()
count 0
fnc1
c1()

7. var counter = function(){
var count = 0;
return function(){
return ++count;
};
};
var c1 = counter();
c1();
c1();
var c2 = counter();
c2();
WINDOW
counter fn
counter()
count 0
fnc1
c1()
1
// 1

8. var counter = function(){
var count = 0;
return function(){
return ++count;
};
};
var c1 = counter();
c1();
c1();
var c2 = counter();
c2();
WINDOW
counter fn
counter()
count
fnc1
1
// 1
c1()

9. var counter = function(){
var count = 0;
return function(){
return ++count;
};
};
var c1 = counter();
c1();
c1();
var c2 = counter();
c2();
WINDOW
counter fn
counter()
count
fnc1
c1()
1
// 1
2
// 2

10. var counter = function(){
var count = 0;
return function(){
return ++count;
};
};
var c1 = counter();
c1();
c1();
var c2 = counter();
c2();
WINDOW
counter fn
counter()
count
fnc1
c1()
// 1
2
// 2

11. var counter = function(){
var count = 0;
return function(){
return ++count;
};
};
var c1 = counter();
c1();
c1();
var c2 = counter();
c2();
WINDOW
counter fn
counter()
count
fnc1
2
c2 fn
counter()
c2()
0count
// 1
// 2

12. var counter = function(){
var count = 0;
return function(){
return ++count;
};
};
var c1 = counter();
c1();
c1();
var c2 = counter();
c2();
WINDOW
counter fn
counter()
count
fnc1
2
c2 fn
counter()
c2()
0count 1
// 1
// 2

13. var counter = function(){
var count = 0;
return function(){
return ++count;
};
};
var c1 = counter();
c1();
c1();
var c2 = counter();
c2();
WINDOW
counter fn
counter()
count
fnc1
2
c2 fn
counter()
c2()
count 1
// 1
// 1
// 2

14. 1
var a = {};
for(vari=0;i<3;i++){
a[i] = function(){
alert(i)
};
}
a[0]();
a[1]();
a[2]();
Closure Gotchas
WINDOW
0
2
i
0
fn
a
fn
fn
123
a[0]()

15. 1
var a = {};
for(vari=0;i<3;i++){
a[i] = function(){
alert(i)
};
}
a[0]();
a[1]();
a[2]();
Closure Gotchas
WINDOW
0
2
i
0
fn
a
fn
fn
123
a[0]()a[0]()
WINDOW
i
3

16. 2
fn 2…
…1 fn 1
Closure Gotchas
WINDOW
0
a
fn()
j
i
0
0
var a = {};
for(var i=0; i<3; i++){
(function(j){
a[j] = function(){
alert(j)
};
})(i);
}
a[0]();
a[1]();
a[2]();
fn
fn
123
a[0]()
fn()
j

17. Exercise
Build a tag library that creates elements of the following types in the
least LOC: a, div, span, form, h1, h2, h3, h4.
Example usage:
var h1 = make.h1();
h1.innerHTML = 'Hello World';
document.body.appendChild(h1);
var a = make.a();
a.href= 'http://canjs.com';
a.innerHTML = 'CanJS';
document.body.appendChild(a);
HINTS:
• Code is ‘built’ one statement at a time.
• document.createElement('h1') – creates and returns an 'h1' element.

18. fn(me,val)
this
arg1
arg2
Summary
Creating a Function
var fn=function(arg1,arg2){
var foo = "Bar";
}
var me = {name: "Justin"},
val= 5
fn(me, val)
Calling a Function
WINDOW
fn fn
PROTOTYPE
me "Justin"
name
val 5
5
"Bar"foo