Understanding JavaScript - Part 1

This is one of my first talk on making Hyatt developers understand JavaScript. This deck includes JS History, Definition, and Scope. Please see part two about 'this' and Closures. I got most of my materials by my experience, reading JS book (Good parts, You Don't Know JS book series).

Transcript

1. S C O P E , C L O S U R E S , T H I S , P R O T O T Y P E I N T R O D U C T I O N T O J AVA S C R I P T B Y N I G A M PA T E L
2. S C O P E , C L O S U R E S , T H I S , P R O T O T Y P E I N T R O D U C T I O N T O J AVA S C R I P T B Y N I G A M PA T E L
3. S C O P E , C L O S U R E S , T H I S , P R O T O T Y P E U N D E R S TA N D I N G J AVA S C R I P T B Y N I G A M PA T E L PA R T 1
4. A B O U T N I G A M • Principal Developer at Hyatt • @nigam02 • nigam-patel • nigampatel
5. W H AT I S T H I S TA L K A L L A B O U T ?
6. H I S T O RY
7. H I S T O RY 1995 - Netscape hires Brendan Eich
8. H I S T O RY S C H E M E S E L F J AVA L I V E S C R E I P T
9. H I S T O RY • LiveScript • ECMAScript • javaScript
10. J AVA S C R I P T I S … •dynamic, weakly typed, prototype-based language with first-class functions.
11. D Y N A M I C • Can define functions and objects on the fly. • Can view the code as well as run it. • No need to specify types explicitly.
12. W E A K LY T Y P E D • Type associated with value, not variable. var x = 10; x = “ten” x = [10]; x = {ten:10};
13. P R O T O T Y P E - B A S E D • Prototypal inheritance is a form of object-oriented code reuse. Javascript is one of the only [mainstream] object-oriented languages to use prototypal inheritance. Almost all other object-oriented languages are classical.
14. F I R S T- C L A S S F U N C T I O N S • A function is an instance of the Object type. • A function can have properties and has a link back to its constructor method. • You can store the function in a variable. • You pass the function as a parameter to another function. • You can return the function from a function.
15. J AVA S C R I P T I S … •dynamic, weakly typed, prototype-based language with first-class functions.
16. D ATA T Y P E S Undefined      undefined  Null                            null  Boolean            true  String              "hello"  Number              2  Object              {name: "value"}  Array                [1,2,3]  Date                  new Date()  RegExp              /.*/g,  Function         function(){} Primitive Object
17. O P E R AT O R S var                        var foo new                        new  Foo assignment              foo = {bar: "a value"}                              foo.bar = value delete                      delete  foo.bar   member                              foo.bar                                foo["bar"] call                      bar()                                  foo.bar() comparison                  == ===
18. S C O P E Global Scope Local Scope
19. S C O P E var str = “Hyatt”;
20. S C O P E var first = "Andy" function shortName(){ var first = "Mike"; } function fullName(first){ first = "Michael"; last = "Smith"; }
21. Andy Error Andy Smith Error S C O P E var first = "Andy" function shortName(){ var first = "Mike"; function fullName(first){ first = "Michael"; last = "Smith"; } fullName("Tom"); } first; // last // shortName(); first; // last; // fullName(); //
22. S C O P E - F U N C T I O N S C O P E function foo(){ return bar(); } var bar = function(){ function baz(){ return 10; } return baz(); }
23. S C O P E - F U N C T I O N S C O P E function foo(){ return bar(); } var bar = function someName(){ function baz(){ return 10; } return baz(); } foo(); // 10 someName() // baz() //
24. S C O P E - B L O C K S C O P E var foo; try { foo.length; } catch (err) { console.log(err); //TypeError } console.log(err); //ReferenceError
25. S C O P E - L E X I C A L S C O P E L O C A L G L O B A L
26. S C O P E - L E X I C A L S C O P E function foo (a) { var b = a * 2; function bar (c) { console.log(a , b, c ); } bar (b * 3); } foo(2)
27. S C O P E - L E X I C A L S C O P E function foo (a) { var b = a * 2; function bar (c) { console.log(a , b, c ); } bar (b * 3); } foo(2)
28. S C O P E - L E X I C A L S C O P E function foo { var b = a * 2; function bar (c) { console.log(a , b, c ); } bar (b * 3); } foo(2) (a)
29. S C O P E - L E X I C A L S C O P E function foo { var b = a * 2; function bar { console.log(a , b, c ); } bar (b * 3); } foo(2) (a) (c)
30. S C O P E - L E X I C A L S C O P E function foo { var b = a * 2; function bar { console.log(a , b, c ); } bar (b * 3); } foo(2) (a) (c) 1 2 3
31. S C O P E - L E X I C A L S C O P E function foo { var b = a * 2; function bar { console.log(a , b, c ); } bar (b * 3); } foo(2) // 2 4 12 (a) (c) 1 2 3
32. var car = "Civic"; function vehicle (str) { console.log(car); } vehicle("var car = 'Accord';"); S C O P E - C H E AT L E X I C A L S C O P E
33. var car = "Civic"; function vehicle (str) { eval(str); console.log(car); } vehicle("var car = 'Accord';"); S C O P E - C H E AT L E X I C A L S C O P E
34. var obj = { a: 1, b: 2, c: 3 } obj.a = obj.b + obj.c; obj.c = obj.b - obj.a with (obj){ a = b + c; c = b - a; d = 3; // mean to create obj.d but created global } obj.d // undefined d; // 3 — oh no created global S C O P E - C H E AT L E X I C A L S C O P E
35. var a = 10; (function () { var a = 5 })(); S C O P E - F U N C T I O N S C O P E - I I F E
36. New Keyword coming called let You can define block level scope S C O P E - E S 6
37. Hoisting ‘this’ Keyword closures N E X T T O P I C