Advanced Topics of JavaScript: Exploring Functions

Advanced Topics of JavaScript: Exploring Functions

Transcript

1. Advanced Topics of JavaScript: Exploring Functions by Nizar Khalife @khalifenizar
2. Please interrupt me with questions!
3. The wild world of functions Part 1 of 5
   ••••
4. JavaScript is a bit nutty. And it will remain so.
5. All of its quirks will stay in the language. Don't break the Web. This way JavaScript written 15 years ago still works.
6. It's especially eccentric with functions Functions are the most important thing in JavaScript.
7. Let's address some of those function gotchas that commonly throw off new JavaScript developers.
8. Functions are values Part 2 of 5 •
   •••
9. In JavaScript, functions are values. That's the first weird thing.
10. You might have heard the phrase "functions are first class citizens" in JavaScript.
11. When a function is created in JavaScript it is an object, just like strings, numbers, arrays, etc. are objects.
12. You are able to print a function like a regular value. function greeting () { console.log("Hello, world!"); } greeting(); console.log(greeting);
13. Similar to assigning anonymous functions to a variable in PHP. // PHP $greeting = function () { echo "Hello, world!\n"; }; $greeting(); var_dump($greeting);
14. You can assign an anonymous function in JavaScript for the same result as before. var greeting = function () { console.log("Hello, world!"); }; greeting(); console.log(greeting);
15. Function objects are mutable: you can assign properties dynamically. function greeting () { console.log("Hello, world!"); greeting.amount += 1; } greeting.amount = 0; greeting(); greeting(); console.log(greeting.amount);
16. You can even assign functions to properties, creating makeshift methods. function greeting () { console.log("Hello, world!"); } greeting.spanish = function () { console.log("Hola, mundo!"); };
17. Yep, you can call a function on a function. function greeting () { console.log("Hello, world!"); } greeting.spanish = function () { console.log("Hola, mundo!"); }; greeting(); greeting.spanish();
18. Practical application of functions being values: functions as arguments to other functions.
19. Function values you pass into other functions are known as callbacks. Run this function when [blank].
20. Common case for callbacks: adding a click handler in jQuery. $(".my-button").click(function () { console.log("You just clicked my button!"); });
21. You can also pass in a function that's in a variable instead of an anonymous function. function doStuff () { console.log("You just clicked my button!"); } // My callback variable // | // v $(".my-button").click( doStuff );
22. Function scope & closures Part 3 of 5 ••
    ••
23. Local variables in JavaScript have a specific scope. Local variables are those created with var.
24. A variable's scope determines what parts of the code it can be used in. Scope speaks to the visibility of a variable.
25. if..else statements and other, non-function {} blocks do not constitute a new scope. var pizza = "Pepperonni"; if (true) { var pizza = "Mushroom"; } console.log(pizza); //=> Mushroom
26. JavaScript has function scope: every function has its own set of variables. var pizza = "Pepperonni"; function printPizza () { var pizza = "Mushroom"; console.log(pizza); } printPizza(); //=> Mushroom console.log(pizza); //=> Pepperonni
27. The key thing to remember about function scope in JavaScript is Disney•Pixar. Mnemonics are great for tricky development concepts.
28. Variables can be seen from the inside out. But not from the outside in.
29. From the inside of printPizza you can see out to the variable pizza. var pizza = "Hawaiian"; function printPizza () { console.log(pizza); } printPizza(); //=> Hawaiian
30. From the outside we do not have access to largePizza. function printLargePizza () { var largePizza = "Large Four Cheese"; console.log(largePizza); } printLargePizza(); //=> Large Four Cheese console.log(largePizza); //=> ReferenceError: largePizza is not defined
31. Practical application of function scope: protect your variables from other scripts. (function () { // Other scripts can't see this app variable var app = {}; app.init = function () { console.log("Starting app"); }; app.init(); })();
32. This is an IFFE (immediately invoked function expression) // No name // | // v (function () { // do stuff }) ( ); // ^ // | // Parentheses to // invoke the function You pronounce it like iffy.
33. Scoping can also be used to make variables private. There's no way to make a variable attached to an object private.
34. The pizza variable is defined inside of doPizzaStuff but used inside of printPizza. function doPizzaStuff () { var pizza = "Onion & Garlic"; function printPizza () { console.log(pizza); } printPizza(); } doPizzaStuff(); This works because of inside out.
35. Functions that use variables that are on the loose are known as closures. function doPizzaStuff () { var pizza = "Onion & Garlic"; // Using pizza makes this a closure function printPizza () { console.log(pizza); } printPizza(); } doPizzaStuff(); The printPizza function is a closure.
36. More often you are returning the closure. function createPizzaPrinter (pizza) { // Still a closure function printPizza () { console.log(pizza); } return printPizza; } var onionPrinter = createPizzaPrinter("Onion & Garlic"); onionPrinter();
37. Practical application of function scope: using closures to make variables private. function createCounter () { var count = 0; // Anonymous closure return function () { count += 1; return count; }; } var myCounter = createCounter(); console.log( myCounter() );
38. Function context & this Part 4 of 5 •••
    •
39. Functions also have a context, an object that owns the call to the function.
40. Function context is represented by the magical keyword this. function printPizza () { var pizza = "Fancy Arugula"; console.log(pizza, this); // ^ // | // Magically defined in every function }
41. this is magical because it changes depending one how the function is invoked. It can potentially have different, unexpected values.
42. The manner of execution determines the rules for the context.
43. When you call the function in the regular way this is the global object, window. function printPizza () { var pizza = "Fancy Arugula"; console.log(pizza, this); // ^ // | // window } printPizza(); //=> Fancy Arugula, Window {}
44. All global variables and functions are properties of window. console.log( window ); //=> Window { // Array: function Array(), // Number: function Number(), // Object: function Object(), // RegExp: function RegExp(), // console: Console, // document: document, // setTimeout: function setTimeout(), // undefined: undefined, // ... etc. // }
45. The other way main way to call functions is as methods of an object Let's take a look at a simple pizza object.
46. Our pizza has toppings and cheese attributes. var pizza = { toppings: "Fancy Arugula", cheese: "Mozzarella" }; console.log( pizza.toppings ); //=> Fancy Arugula console.log( pizza.cheese ); //=> Mozzarella
47. Let's add a print method. var pizza = { toppings: "Fancy Arugula", cheese: "Mozzarella" }; pizza.print = function () { // print pizza stuff };
48. When you call a function as the method of an object, this is the object. var pizza = { toppings: "Fancy Arugula", cheese: "Mozzarella" }; pizza.print = function () { console.log(this.toppings + " and " + this.cheese + " Pizza"); // ^ ^ // | | // pizza.toppings pizza.cheese }; pizza.print(); //=> Fancy Arugula and Mozzarella Pizza
49. Here's where it gets complicated... Incoming mind blow!
50. If you assign the method to a variable and call it, this is window. var pizza = { toppings: "Fancy Arugula", cheese: "Mozzarella" }; pizza.print = function () { console.log(this.toppings + " and " + this.cheese + " Pizza"); // ^ ^ // | | // window.toppings window.cheese }; var printPizza = pizza.print; printPizza(); //=> undefined and undefined Pizza
51. You can set the context explicitly with .call(). var pizza = { toppings: "Fancy Arugula", cheese: "Mozzarella" }; pizza.print = function () { console.log(this.toppings + " and " + this.cheese + " Pizza"); }; var printPizza = pizza.print; printPizza.call( pizza ); //=> Fancy Arugula and Mozzarella Pizza
52. You have to do this every time you want to execute the function. var pizza = { toppings: "Fancy Arugula", cheese: "Mozzarella" }; pizza.print = function () { console.log(this.toppings + " and " + this.cheese + " Pizza"); }; var printPizza = pizza.print; printPizza.call(pizza); printPizza.call(pizza);
53. But you can pass in different contexts on the fly var pizza = { toppings: "Fancy Arugula", cheese: "Mozzarella" }; var otherPizza = { toppings: "Bison", cheese: "Cheddar" }; pizza.print = function () { console.log(this.toppings + " and " + this.cheese + " Pizza"); }; var printPizza = pizza.print; printPizza.call( pizza ); //=> Fancy Arugula and Mozzarella Pizza printPizza.call( otherPizza ); //=> Bison and Cheddar Pizza
54. The .apply() method works in a similar way. var pizza = { toppings: "Fancy Arugula", cheese: "Mozzarella" }; var otherPizza = { toppings: "Bison", cheese: "Cheddar" }; pizza.print = function () { console.log(this.toppings + " and " + this.cheese + " Pizza"); }; var printPizza = pizza.print; printPizza.apply( pizza ); //=> Fancy Arugula and Mozzarella Pizza printPizza.apply( otherPizza ); //=> Bison and Cheddar Pizza
55. You can also set context of a function with .bind(). var pizza = { toppings: "Fancy Arugula", cheese: "Mozzarella" }; pizza.print = function () { console.log(this.toppings + " and " + this.cheese + " Pizza"); }; var printPizza = pizza.print.bind( pizza ); // ^ // | // Bound to pizza printPizza(); //=> Fancy Arugula and Mozzarella Pizza
56. .bind() really creates a new function with a fixed context. var pizza = { toppings: "Fancy Arugula", cheese: "Mozzarella" }; pizza.print = function () { console.log(this.toppings + " and " + this.cheese + " Pizza"); }; var printPizza = pizza.print.bind( pizza ); console.log( printPizza === pizza.print ); //=> false
57. The new function is immune to further context changes. var pizza = { toppings: "Fancy Arugula", cheese: "Mozzarella" }; var otherPizza = { toppings: "Bison", cheese: "Cheddar" }; pizza.print = function () { console.log(this.toppings + " and " + this.cheese + " Pizza"); }; var printPizza = pizza.print.bind( pizza ); printPizza(); //=> Fancy Arugula and Mozzarella Pizza printPizza.call( otherPizza ); //=> Fancy Arugula and Mozzarella Pizza
58. Practical application of this and context: callback functions' this will always be window. var pizza = { toppings: "Fancy Arugula", cheese: "Mozzarella" }; pizza.print = function () { console.log(this.toppings + " and " + this.cheese + " Pizza"); }; setTimeout( pizza.print, 3000 ); // After 3 seconds //=> undefined and undefined Pizza
59. setTimeout pseudo code function setTimeout (callback, ms) { // Wait ms milliseconds callback(); }
60. So how do we get around callbacks and context? A couple of techniques.
61. Bind the method var pizza = { toppings: "Fancy Arugula", cheese: "Mozzarella" }; pizza.print = function () { console.log(this.toppings + " and " + this.cheese + " Pizza"); }; setTimeout( pizza.print.bind(pizza), 3000 ); // After 3 seconds //=> Fancy Arugula and Mozzarella Pizza
62. Use a closure var pizza = { toppings: "Fancy Arugula", cheese: "Mozzarella" }; pizza.print = function () { console.log(this.toppings + " and " + this.cheese + " Pizza"); }; function printPizza () { pizza.print(); } setTimeout( printPizza, 3000 ); // After 3 seconds //=> Fancy Arugula and Mozzarella Pizza
63. Resources & exercises Part 5 of 5 ••••
    
64. bit.ly/exploring-js-functions Bunch of links on this URL.
65. bit.ly/exploring-js-functions NodeSchool Interactive JavaScript tutorials on your terminal.
66. bit.ly/exploring-js-functions Mozilla Developer Network In-depth articles on all these things.
67. bit.ly/exploring-js-functions Effective JavaScript A great book on all the nuances of JavaScript.
68. About me Anyway... I've been Nizar Khalife Iglesias. You can follow me pretty much everywhere @khalifenizar.
69. About me I work as the Lead Instructor at Ironhack.
71. We are looking for mentors to help our students in their journey.
72. Being a mentor is a 4 hour commitment across 2 weeks.
73. If you want to pay it forward talk to me and apply.
74. Advanced Topics of JavaScript: Exploring Functions bit.ly/exploring-js-functions @khalifenizar