JavaScript: Advanced Fundamentals

Transcript

1. javascript advanced fundamentals Monday, April 8, 13
2. javascript is... • dynamic • interpreted • weakly typed • functional • object-based Monday, April 8, 13
3. first-class functions Monday, April 8, 13
4. closures Monday, April 8, 13
5. everything is an object Monday, April 8, 13
6. everything* is mutable Monday, April 8, 13
7. functions Monday, April 8, 13
8. first-class citizens can be passed as arguments: ////== can be passed as arguments: function save(callback) { if (true) callback(); } save(function() { console.log("Success!"); }) // => "Success!" $('button').click(function(){ console.log("herp derp"); }); Monday, April 8, 13
9. first-class citizens can be assigned: var a = function() { console.log("I was assigned to var a"); } a; // => [Function] a(); // => "I was assigned to var a" var b = { log: function() { console.log("I was assigned to b.log"); } } b.log; // => [Function] b.log(); // => "I was assigned to b.log" Monday, April 8, 13
10. first-class citizens can be returned: function makeEcho() { return function(phrase) { console.log(phrase); } } var echo = makeEcho(); echo("hi"); // => hi echo("hello"); // => hello echo("howdy"); // => howdy Monday, April 8, 13
11. closures retain local and surrounding scope function makeEcho() { var i = 0; return function(phrase) { console.log(i++, phrase); } } var echo1 = makeEcho(); var echo2 = makeEcho(); echo1("hi"); // => 1, hi echo1("hello"); // => 2, hello echo2("bye"); // => 1, bye echo2("goodbye"); // => 2, goodbye echo1("howdy"); // => 3, howdy Monday, April 8, 13
12. closures `var` keyword creates a hidden variable leaving off `var` exports the variable var x = 50; function doIt() { var i = 0; x = 80; } console.log(x); // 50 console.log(i); // undefined doIt(); console.log(x); // 80 console.log(i); // undefined Monday, April 8, 13
13. IIFE immediately-invoked function expression (function() { var i = 0; function inc() { return ++i }; x = function() { return inc() }; })(); console.log(i); // undefined console.log(inc); // undefined console.log(x); // [Function] console.log(x()); // 1 console.log(x()); // 2 console.log(x()); // 3 Monday, April 8, 13
14. objects Monday, April 8, 13
15. objects everything is an object {} instanceof Object // => true DUHHH [] instanceof Object // => true (function(){}) instanceof Object // => true (new Date) instanceof Object // => true Monday, April 8, 13
16. ProTip™ Monday, April 8, 13
17. there is no type system Monday, April 8, 13
18. objects behave like maps var contact = { name: { first: "Casey", last: "O'Hara" }, phone: "603-630-0696" } contact.name // => { first: "Casey", last: "O'Hara" } contact.name.first // => "Casey"; contact.email // => undefined contact.email = "casey.ohara@imulus.com"; contact.email // => casey.ohara@imulus.com contact["email"] // => casey.ohara@imulus.com Monday, April 8, 13
19. objects methods are just function properties contact.name.full = function() { return [this.first, this.last].join(" ") } contact.name.full // [Function] contact.name.full() // => Casey O'Hara var contact = { name: { first: "Casey", last: "O'Hara" }, phone: "603-630-0696" } Monday, April 8, 13
20. ProTip™ Monday, April 8, 13
21. property resolution happens at runtime Monday, April 8, 13
22. you can add/delete/augment behavior at runtime Monday, April 8, 13
23. objects everything is a dynamic property lookup contact.name.full() // => Casey O'Hara contact.name.first = "Derp"; contact.name.last = "Tamland"; contact.name.full() // => Derp Tamland contact.name.full = function() { return "Terp Damland" } contact.name.full() // => Terp Damland Monday, April 8, 13
24. objects arrays are just objects var arr = ["hi", "hello", "howdy"]; arr[0] // => "hi" arr[1] // => "hello" arr[2] // => "howdy" arr.length // => 3 arr["nope"] = "bye"; arr["nope"] // => "bye" arr.length // => 3 // wtf? arr; // => ['hi', 'hello', 'howdy', nope: 'bye'] // WTF?! Monday, April 8, 13
25. objects functions are just objects function greet() { return greet.greeting; } greet() // => undefined greet.greeting = "HULLO"; greet() // => "HELLO" greet.greeting = "BUHBYE"; greet() // => "BUHBYE" Monday, April 8, 13
26. classes Monday, April 8, 13
27. ProTip™ Monday, April 8, 13
28. there are no classes Monday, April 8, 13
29. classes classes are just functions function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; this.fullName = function() { return [firstName, lastName].join(" "); } } var casey = new Person("Casey", "O'Hara"); casey.fullName() // => "Casey O'Hara" var derp = new Person("Derp", "Tamland"); derp.fullName() // => "Derp Tamland" Monday, April 8, 13
30. classes prototypes are delegate objects casey.toString() // => '[object Object]' casey.toString = function() { return this.fullName() } casey.toString() // => "Casey O'Hara" derp.toString() // => '[object Object]' Person.prototype.toString = function() { return this.fullName() } casey.toString() // => "Casey O'Hara" derp.toString() // => "Derp Tamland" Monday, April 8, 13
31. ProTip™ Monday, April 8, 13
32. property resolution is a matter of looking up the delegate chain Monday, April 8, 13
33. classes classical inheritance via prototypes function Imulite() { Person.apply(this, arguments); } Imulite.prototype = Object.create(Person.prototype); Imulite.prototype.email = function() { return this.fullName() .toLowerCase() .replace(/[^a-z\ ]/g,'') .replace(/\ /,'.') + "@imulus.com" } casey = new Imulite("Casey", "O'Hara"); casey.email() // => "casey.ohara@imulus.com" casey.toString() //=> "Casey O'Hara" Monday, April 8, 13
34. classes core types are open too! String.prototype.toEmail = function(domain) { return this.toLowerCase() .replace(/[^a-z\ ]/g,'') .replace(/\ /,'.') + "@" + domain } Imulite.prototype.email = function() { return this.fullName().toEmail("imulus.com") } casey.email() // => "casey.ohara@imulus.com" "Derp Tamland".toEmail("rageface.com") // => "derp.tamland@rageface.com" Monday, April 8, 13
35. ProTip™ Monday, April 8, 13
36. don’t be a dick Monday, April 8, 13
37. classes “static” vs. “instance” methods Imulite.prototype.email = function() { return this.fullName().toEmail("imulus.com") } Imulite.fromEmail = function(email) { var names = email.split("@")[0].split("."), firstName = names[0], lastName = names[1]; return new Imulite(firstName, lastName); } var imulite = Imulite.fromEmail("derp.tamland@imulus.com"); console.log(imulite.firstName, imulite.lastName); // => derp, tamland Monday, April 8, 13
38. ProTip™ Monday, April 8, 13
39. `this` is promiscuous var car = { make: "Subaru", model: "WRX", color: "Black", toString: function() { return [this.color, this.make, this.model].join(" ") } } var snowboard = { make: "Never Summer", model: "Cobra", color: "Red", } car.toString() // => "Black Subaru WRX" car.toString.call(snowboard) // => "Red Never Summer Cobra" Monday, April 8, 13
40. `this` is promiscuous var car = { make: "Subaru", model: "WRX", color: "Black", toString: function() { return [this.color, this.make, this.model].join(" ") } } var snowboard = { make: "Never Summer", model: "Cobra", color: "Red", } car.toString() // => "Black Subaru WRX" car.toString.call(snowboard) // => "Red Never Summer Cobra" Monday, April 8, 13
41. core types Monday, April 8, 13
42. primitives treated as value types • Boolean • String • Number Monday, April 8, 13
43. complex types live on the heap, passed by reference • Object // duhhh • Array • Function • Date • Math • RegExp Monday, April 8, 13
44. literals // booleans true false // string literal "I am a string" 'I am also a valid string' // number 5 5.123 Monday, April 8, 13
45. literals // object literal { make: "Subaru", model: "WRX", color: "black" } // array literal [1,"2","three",null,false,undefined] // function literal function loop() {} var loop = function() {} Monday, April 8, 13
46. ProTip™ Monday, April 8, 13
47. you can’t handle the truthy function truthy(flag) { if (flag) return "truthy" else return "falsy" } truthy(false) // => falsy truthy("") // => falsy truthy(0) // => falsy truthy(null) // => falsy truthy(undefined) // => falsy truthy(true) // => truthy truthy("true") // => truthy truthy(1) // => truthy truthy(100) // => truthy truthy({}) // => truthy truthy([]) // => truthy Monday, April 8, 13
48. ProTip™ Monday, April 8, 13
49. function hoisting console.log(sayHello); // undefined console.log(sayGoodbye); // [Function: sayGoodbye] console.log(sayHello()); // TypeError: undefined is not a function console.log(sayGoodbye()); // => "goodbye" var sayHello = function() { console.log("hello"); } function sayGoodbye() { console.log("goodbye"); } Monday, April 8, 13
50. ProTip™ Monday, April 8, 13
51. use built-in methods Array.prototype.filter Array.prototype.map Array.prototype.reduce days.filter(function(day) { return day.year == 2013 || (day.year == 2012 && day.month > 6) }).map(function(day) { return day.vertical }).reduce(function(a,b) { return a + b }) // => 248812 Monday, April 8, 13