Understanding Javascript

An overview of Javascript concepts:
Variable Scope
Variable Hoisting
Function Statement vs Expression
What is a function?
'this' context
Closures

Transcript

1. Understanding Javascript Tuesday, 20 August, 13
2. Variable Scope Variable Hoisting Function Statement vs Expression What is a function? 'this' context Closures Tuesday, 20 August, 13
3. Variable Scope Tuesday, 20 August, 13
4. var a = 10; var getA = function() { var a = 20; return a; }; > console.log(a); Tuesday, 20 August, 13
5. var a = 10; var getA = function() { var a = 20; return a; }; > console.log(a); Tuesday, 20 August, 13
6. var a = 10; var getA = function() { var a = 20; return a; }; > console.log(a); Tuesday, 20 August, 13
7. var a = 10; var getA = function() { var a = 20; return a; }; > console.log(a); > 10 Tuesday, 20 August, 13
8. var a = 10; var getA = function() { var a = 20; return a; }; getA(); > console.log(a); Tuesday, 20 August, 13
9. var a = 10; var getA = function() { var a = 20; return a; }; getA(); > console.log(a); > 10 Tuesday, 20 August, 13
10. var a = 10; var getA = function() { a = 20; return a; }; getA(); > console.log(a); Tuesday, 20 August, 13
11. var a = 10; var getA = function() { a = 20; return a; }; getA(); > console.log(a); Tuesday, 20 August, 13
12. var a = 10; var getA = function() { a = 20; return a; }; getA(); > console.log(a); Tuesday, 20 August, 13
13. var a = 10; var getA = function() { a = 20; return a; }; getA(); > console.log(a); Tuesday, 20 August, 13
14. var a = 10; var getA = function() { a = 20; return a; }; getA(); > console.log(a); > 20 Tuesday, 20 August, 13
15. Scope is Function based. A variable is visible everywhere in the function it was defined but not outside of the function Tuesday, 20 August, 13
16. var getA = function() { var a = 100; } getA(); console.log(a); Tuesday, 20 August, 13
17. var getA = function() { var a = 100; } getA(); console.log(a); Tuesday, 20 August, 13
18. var getA = function() { var a = 100; } getA(); console.log(a); > undefined Tuesday, 20 August, 13
19. var getA = function() { console.log(a); var a = "some value"; } getA(); Tuesday, 20 August, 13
20. var getA = function() { console.log(a); if (condition) { var a = "some value"; } } getA(); Tuesday, 20 August, 13
21. var getA = function() { console.log(a); if (condition) { var a = "some value"; } } getA(); var getA = function() { console.log(a); var a = "some value"; } getA(); Tuesday, 20 August, 13
22. Both are: undefined Tuesday, 20 August, 13
23. Why? Tuesday, 20 August, 13
24. Why? Variable Hoisting Tuesday, 20 August, 13
25. var getA = function() { console.log(a); if (condition){ var a = "some value"; } } getA(); Tuesday, 20 August, 13
26. var getA = function() { console.log(a); if (condition){ var a = "some value"; } } getA(); Tuesday, 20 August, 13
27. var getA = function() { var a; //<--hoisting console.log(a); if (condition){ var a = "some value"; } } getA(); Tuesday, 20 August, 13
28. var getA = function() { var a; console.log(a); if (condition){ a = "some value"; } } getA(); Tuesday, 20 August, 13
29. <?php $a = 10; function getA(){ echo $a; if ($condition){ $a = "some value"; } } getA(); Tuesday, 20 August, 13
30. <?php $a = 10; function getA(){ global $a; echo $a; if ($condition){ $a = "some value"; } } getA(); Tuesday, 20 August, 13
31. Tricky Hoisting/Scope Tuesday, 20 August, 13
32. var foo = 5; (function() { var bar = foo; if (1) { var foo = 10; } alert(bar); }()); Tuesday, 20 August, 13
33. var foo = 5; (function() { var bar = foo; if (1) { var foo = 10; } alert(bar); }()); Tuesday, 20 August, 13
34. var foo = 5; (function() { var bar = foo; if (1) { var foo = 10; } alert(bar); }()); Tuesday, 20 August, 13
35. var foo = 5; (function() { var bar = foo; if (1) { var foo = 10; } alert(bar); }()); Tuesday, 20 August, 13
36. var foo = 5; (function() { var bar = foo; if (1) { var foo = 10; } alert(bar); }()); Tuesday, 20 August, 13
37. var foo = 5; (function() { var foo; var bar = foo; if (1) { var foo = 10; } alert(bar); }()); Tuesday, 20 August, 13
38. What is a function? Tuesday, 20 August, 13
39. Here's what a function is: function () {} Tuesday, 20 August, 13
40. function [Name] ([arg1,...,argN]){ [statement1; statement2; //... statement Q;] [return ;] } Tuesday, 20 August, 13
41. function [Name] ([arg1,...,argN]){ [statement1; statement2; //... statement Q;] [return ;] } Tuesday, 20 August, 13
42. function [Name] ([arg1,...,argN]){ [statement1; statement2; //... statement Q;] [return ;] } Tuesday, 20 August, 13
43. function [Name] ([arg1,...,argN]){ [statement1; statement2; //... statement Q;] [return ;] } Tuesday, 20 August, 13
44. function [Name] ([arg1,...,argN]){ [statement1; statement2; //... statement Q;] [return ;] } Tuesday, 20 August, 13
45. function [Name] ([arg1,...,argN]){ [statement1; statement2; //... statement Q;] [return ;] } Tuesday, 20 August, 13
46. Function Expression vs Function Statement/Declaration Tuesday, 20 August, 13
47. if you start with function, it is a statement function Banana(){} var banana = function (){}; var banana = function Apple(){}; Tuesday, 20 August, 13
48. if you start with function, it is a statement // statement function Banana(){} var banana = function (){}; var banana = function Apple(){}; Tuesday, 20 August, 13
49. if you start with function, it is a statement function Banana(){} // expression var banana = function (){}; var banana = function Apple(){}; Tuesday, 20 August, 13
50. if you start with function, it is a statement function Banana(){} var banana = function (){}; // named expression var banana = function Apple(){}; Tuesday, 20 August, 13
51. var someFunc = function(){ orange(); function orange(){ console.log(‘orange’); } } someFunc(); Tuesday, 20 August, 13
52. var someFunc = function(){ orange(); function orange(){ console.log(‘orange’); } } someFunc(); > orange Tuesday, 20 August, 13
53. var someFunc = function(){ orange(); var orange = function(){ console.log(‘orange’); }; } someFunc(); Tuesday, 20 August, 13
54. var someFunc = function(){ orange(); var orange = function(){ console.log(‘orange’); }; } someFunc(); > Error Tuesday, 20 August, 13
55. If statements and function statements don't mix. The ECMAScript standard says that this should not be supported. However browsers handle it differently and always wrong. Tuesday, 20 August, 13
56. Very bad, never do this: function conditionalFunc(){ if (condition) { function someFunc() { return foo; }; } else { function someFunc() { return bar; }; } return someFunc; }); Tuesday, 20 August, 13
57. Better but far from good: function conditionalFunc() { var someFunc; if (condition){ someFunc = function (){ return foo; } } else { someFunc = function() { return bar; } } return someFunc; }; Tuesday, 20 August, 13
58. Much better and probably best: function conditionalFunc() { var biz; if (condition) { biz = foo; } else { biz = bar; } return function(){ return biz; } }; Tuesday, 20 August, 13
59. There are four ways functions can be called: 1. as a Method 2. as a function 3. as a Constructor 4. using call or apply Tuesday, 20 August, 13
60. There are four ways functions can be called: 1. as a Method (obj.func();) 2. as a function 3. as a Constructor 4. using call or apply Tuesday, 20 August, 13
61. There are four ways functions can be called: 1. as a Method 2. as a function (func();) 3. as a Constructor 4. using call or apply Tuesday, 20 August, 13
62. There are four ways functions can be called: 1. as a Method 2. as a function 3. as a Constructor (new Func();) 4. using call or apply Tuesday, 20 August, 13
63. There are four ways functions can be called: 1. as a Method 2. as a function 3. as a Constructor 4. using call or apply (func.apply();) Tuesday, 20 August, 13
64. Bonus parameters for Functions Tuesday, 20 August, 13
65. Bonus parameters for Functions ‘this’ & arguments Tuesday, 20 August, 13
66. ‘this’ Tuesday, 20 August, 13
67. var someObj = { prop : ‘myproperty’, myMethod : function (){ console.log(this.prop); } } someObj.myMethod(); Tuesday, 20 August, 13
68. var someObj = { prop : ‘myproperty’, myMethod : function (){ console.log(this.prop); } } someObj.myMethod(); > myproperty Tuesday, 20 August, 13
69. var myFunction = function (){ console.log(this); } myFunction(); Tuesday, 20 August, 13
70. var myFunction = function (){ console.log(this); } myFunction(); > window || global object Tuesday, 20 August, 13
71. var myFunction = function (){ console.log(this); } myFunction(); > undefined Tuesday, 20 August, 13
72. SomeObj = function () { this.someproperty = “alpha”; } var myObj = new SomeObj(); console.log(myObj.someproperty); Tuesday, 20 August, 13
73. SomeObj = function () { this.someproperty = “alpha”; } var myObj = new SomeObj(); console.log(myObj.someproperty); > alpha Tuesday, 20 August, 13
74. var getA = function() { var a=20; return { value : a }; }; > console.log(new getA().value); Tuesday, 20 August, 13
75. var getA = function() { var a=20; return { value : a }; }; > console.log((new getA()).value); Tuesday, 20 August, 13
76. var getA = function() { var a=20; return { value : a }; }; > console.log((new getA()).value); > 20 Tuesday, 20 August, 13
77. var getA = function() { this.value = 20; return 0; }; > console.log(new getA().value); Tuesday, 20 August, 13
78. var getA = function() { this.value = 20; //return 0; return this; }; > console.log((new getA()).value); Tuesday, 20 August, 13
79. var getA = function() { this.value = 20; //return 0; return this; }; > console.log((new getA()).value); > 20 Tuesday, 20 August, 13
80. var getProperty = function () { return this.property; } var myObj = {‘property’ : ‘alpha’}; var prop = getProperty.apply(myObj); console.log(prop); Tuesday, 20 August, 13
81. var getProperty = function () { return this.property; } var myObj = {‘property’ : ‘alpha’}; var prop = getProperty.apply(myObj); console.log(prop); Tuesday, 20 August, 13
82. var getProperty = function () { return this.property; } var myObj = {‘property’ : ‘alpha’}; var prop = getProperty.apply(myObj); console.log(prop); > alpha Tuesday, 20 August, 13
83. var setProperty = function () { var properties = { ‘alpha’ : ‘foo’, ‘beta‘ : ‘bar’ }; this.property = properties[arguments[0]]; } var myObj = {‘property’ : ‘’}; setProperty.apply(myObj,[‘alpha’]); console.log(myObj.property); Tuesday, 20 August, 13
84. var setProperty = function () { var properties = { ‘alpha’ : ‘foo’, ‘beta‘ : ‘bar’ }; this.property = properties[arguments[0]]; } var myObj = {‘property’ : ‘’}; setProperty.apply(myObj,[‘alpha’]); console.log(myObj.property); Tuesday, 20 August, 13
85. var setProperty = function () { var properties = { ‘alpha’ : ‘foo’, ‘beta‘ : ‘bar’ }; this.property = properties[arguments[0]]; } var myObj = {‘property’ : ‘’}; setProperty.apply(myObj,[‘alpha’]); console.log(myObj.property); >foo Tuesday, 20 August, 13
86. var setProperty = function (prop) { var properties = { ‘alpha’ : ‘foo’, ‘beta‘ : ‘bar’ }; this.property = properties[prop]; } var myObj = {‘property’ : ‘’}; setProperty.call(myObj,‘alpha’); console.log(myObj.property); Tuesday, 20 August, 13
87. var setProperty = function (prop) { var properties = { ‘alpha’ : ‘foo’, ‘beta‘ : ‘bar’ }; this.property = properties[prop]; } var myObj = {‘property’ : ‘’}; setProperty.call(myObj,‘alpha’); console.log(myObj.property); Tuesday, 20 August, 13
88. var setProperty = function (prop) { var properties = { ‘alpha’ : ‘foo’, ‘beta‘ : ‘bar’ }; this.property = properties[prop]; } var myObj = {‘property’ : ‘’}; setProperty.call(myObj,‘alpha’); console.log(myObj.property); >foo Tuesday, 20 August, 13
89. What is a Closure? Tuesday, 20 August, 13
90. var f,getA = function() { var a=0; return function (){ return a = a+1; }; }; f = getA(); console.log(f()); Tuesday, 20 August, 13
91. var f,getA = function() { var a=0; return function (){ return a = a+1; }; }; f = getA(); console.log(f()); Tuesday, 20 August, 13
92. var f,getA = function() { var a=0; return function (){ return a = a+1; }; }; f = getA(); console.log(f()); Tuesday, 20 August, 13
93. var f,getA = function() { var a=0; return function (){ return a = a+1; }; }; f = getA(); console.log(f()); Tuesday, 20 August, 13
94. var f,getA = function() { var a=0; return function (){ return a = a+1; }; }; f = getA(); console.log(f()); Tuesday, 20 August, 13
95. var f,getA = function() { var a=0; return function (){ return a = a+1; }; }; f = getA(); console.log(f()); Tuesday, 20 August, 13
96. var f,getA = function() { var a=0; return { add: function () { return a = a+1; }, sub: function () { return a = a-1; } }; }; f = getA(); console.log(f.add()); console.log(f.sub()); Tuesday, 20 August, 13
97. var getPeachTree = function (peaches) { var peaches = peaches || 10; var Peach = function () { var eaten = false; this.eat = function(){ if (!eaten) { eaten = true; console.log('mmm'); } else { console.log('all gone.'); } }; }; return { 'getPeach' : function () { if (peaches < 1){ console.log('no more peaches'); return null; } peaches--; return new Peach(); } }; }; Tuesday, 20 August, 13
98. var getPeachTree = function (peaches) { var peaches = peaches || 10; var Peach = function () { var eaten = false; this.eat = function(){ if (!eaten) { eaten = true; console.log('mmm'); } else { console.log('all gone.'); } }; }; return { 'getPeach' : function () { if (peaches < 1){ console.log('no more peaches'); return null; } peaches--; return new Peach(); } }; }; Tuesday, 20 August, 13
99. var ptree = getPeachTree(2); var peach = ptree.getPeach(); var peach2 = ptree.getPeach(); peach.eat(); //mmm peach.eat(); //all gone peach2.eat(); //mmm peach2.eat(); //all gone var p3 = ptree.getPeach(); //no more peaches Tuesday, 20 August, 13
100. http://github.com/fifteen3/Fruit-Tree Tuesday, 20 August, 13
101. What to Watch: Crockford on Javascript YUI Theatre YouTube channel http://www.youtube.com/playlist? list=PL7664379246A246CB&feature=plcp What to read: Javascript the Good Parts - D. Crockford Eloquent Javascript - M. Haverbeke Javascript Patterns - S. Stefanov High Performance Javascript - N. Zakas Maintainable Javascript - N. Zakas Tuesday, 20 August, 13
102. carlocostantini.ca github.com/fifteen3 @fifteen3 Tuesday, 20 August, 13