You Don't Know Javascript
- 3. 3
- 6. 6 HISTORY
- 7. 7
- 8. 8
- 11. WHAT IS JAVASCRIPT 11
- 12. IT HAS A CALL STACK AND EVENT LOOP A CALLBACK QUEUE & SOME OTHER APIS WHAT IS JAVASCRIPT 12
- 13. WHAT IS JAVASCRIPT 13
- 14. WHAT IS JAVASCRIPT CALL STACK main() console.log(sp eak()) speak() getsound() bow bow! OUTPUT CODE 14
- 15. WHAT IS JAVASCRIPT 15
- 16. WHAT IS JAVASCRIPT 16
- 17. YA ..I DON’T BELIEVE YOU.. SHOW PROOF! Vee r WHAT IS JAVASCRIPT 17
- 19. “PASS BY REFERENCE / VALUE” Ofcourse its value..isn’t it 19
- 20. PASS BY REFERENCE OR VALUE REFERENCE / VALUE 20
- 21. PASS BY REFERENCE OR VALUE WHATS THE OUTPUT? 21
- 22. PASS BY REFERENCE OR VALUE WHATS THE OUTPUT? 22
- 23. PASS BY REFERENCE OR VALUE WHATS THE OUTPUT? 23
- 24. PASS BY REFERENCE OR VALUE BY VALUE STRING NUMBER BOOLEAN 24
- 25. PASS BY REFERENCE OR VALUE BY REFERENCE ARRAY OBJECT 25
- 26. PASS BY REFERENCE OR VALUE W TO PASS ARRAY BY VAL It’s a shallow copy Works only for generics i.e string etc, but not for array of object 26
- 27. PASS BY REFERENCE OR VALUE SHALLOW COPY 27
- 28. PASS BY REFERENCE OR VALUE W TO PASS OBJECT BY VAL 28
- 29. PASS BY REFERENCE OR VALUE W TO PASS OBJECT BY VAL Object.assign() is useful for merging objects or cloning them shallowly. 29
- 31. THIS HE SAYS MYSELF HE REALLY MEAN 31
- 32. A VARIABLE WITH THE VALUE OF THE OBJECT THAT INVOKES THE FUNCTION THIS 32
- 33. THE VALUE OF THIS IS BASED ON THE CONTEXT IN WHICH THE FUNCTION IS CALLED AT RUNTIME THIS 33
- 37. THIS 37
- 38. “CLOSURE” Love this song by chainsmokers ..Ehh? 38
- 39. CLOSURE 39
- 40. A LOCAL VARIABLE OF THE FUNCTION - KEPT ALIVE AFTER THE FUNCTION IS RETURNED CLOSURE 40
- 41. THE RETURNED FUNCTION HAS ACCESS TO THE PARENT SCOPE EVEN IF THE PARENT FUNCTION HAS ENDED CLOSURE 41
- 42. GRRRRR…. NO CLOSURE TO THIS… :( Vee r CLOSURE 42
- 45. “PROTOTY PE” i won’t say a word ! 45
- 46. A PROTOTYPE IS A COLLECTION OF PROPERTIES AND METHODS THAT CAN BE AUTOMATICALLY ATTACHED TO A OBJECT WHEN CREATED PROTOTYPE 46
- 47. EVERY JAVASCRIPT FUNCTION HAS A PROTOTYPE PROPERTY PROTOTYPE 47
- 49. GRRRRR…. NOT ABLE TO INHERIT… :( Vee r PROTOTYPE 49
- 51. YOU CAN ADD PROPERTIES TO PROTOTYPE ANY TIME PROTOTYPE THE PROTOTYPE CHAIN WILL FIND THE NEW PROPERTY 51
- 53. YOU CAN EXTEND NATIVE OBJECTS PROTOTYPE 53
- 54. PROTOTYPE 54
- 57. MODULE PATTERN IMMEDIATELY INVOKING FUNCTION 57
- 58. MODULE PATTERN GLOBAL VARIABLE IMPORT 58
- 60. MODULE PATTERN COMMONJS MODULE (NODE JS) Explicit dependencies Loads module synchronously 60
- 62. MODULE PATTERN AMD YNCHRONOUS MODULE DEFINITION Explicit dependencies Loads module asynchronously 62
- 63. WAKE HIM UP! 63
- 64. “FUNCTIONS” Ahh! I know this Dont’t I? 64
- 66. FUNCTIONS FUNCTION CONSTRUCTOR Can be used instead of eval. Jquery Uses to covert JSON String to Object 66
- 67. FUNCTIONS BIND When called, has its ‘this’ keyword set to the provided value It explicitly lets you define the value of ‘this’ 67
- 68. FUNCTIONS CALL / APPLY call() method calls the function with a given this value and arguments provid apply() method calls the function with a given this value and an array of all a 68
- 69. FUNCTIONS DIFFERENCE BIND & CALL/APPLY Call accepts additional parameters Call executes the function right away Call does not make a copy of the function it is being called on 69
- 70. 70
- 72. 72
- 73. 73 WEB DEVELOPER WITH A JOB WEB DEVELOPER WITHOUT A JOB
- 74. 74 BIG CLAP FOR PAKYA.. THANKS FOR BEING A SPORT BUS KARO YAARO OUR KITNI MAROGE
- 75. “EVAL” I Heard its Evil.. 75
- 76. EVAL CHECK THIS FOR MORE INFO Click 76
- 78. CLEAN CODE 78
- 79. CLEAN CODE RETHINK LOOP Lets forget for loop 79
- 84. CLEAN CODE RETHINK LOOP - SUMMARY 84
- 85. CLEAN CODE RETHINK LOOP - TASKS Get people with gender male & scientist Sort by last name Get total count of male & female 85
- 86. CLEAN CODE RETHINK IF - TERNARY 86 condition ? expr1 : expr2 if else pattern
- 87. CLEAN CODE RETHINK IF - TERNARY 87 What about else if
- 89. “DEBUG” Its not a bug..its a feature 89
- 90. DEBUG 90
- 91. DEBUG DD ALERT AT EACH LIN 91 HOW WILL YOU FIX IT
- 92. DEBUG 92
- 93. DEBUG 93
- 94. DEBUG 94
- 95. DEBUG 95
- 96. DEBUG 96 LETS GO TO CHROME DEVELOPER TOOLS
- 98. CALLBACK HELL 98
- 99. CALLBACK HELL 99
- 100. CALLBACK HELL 100
- 101. CALLBACK HELL 101
- 102. CALLBACK HELL WHAT IS A PROMISE? A OBJECT THAT MAY PRODUCE A SINGLE VALUE IN THE FUTURE A PROMISE IS AN ASYNCHRONOUS VALUE 102
- 103. CALLBACK HELL PROMISE HAS 3 STATES FULFILLED REJECTED PENDING 103
- 104. CALLBACK HELL 104
- 110. “ES6” WOW! 110
- 111. ES6 ARROW FUNCTION 111 No need to specify function keyword Implicit return at last line Brings clarity & code reduction
- 112. ES6 TEMPLATE LITERALS 112 Use the tilde sign to enclose the string No more + sign or “ for concatenation All scope variables can be accessed
- 115. ES6 MODULES 115
- 116. “BACKBONE JS” 118
- 117. BACKBONEJS 119
- 118. BACKBONEJS 120 WHAT IT IS? Provides client side app structure It contains Models to represent data It contains Views to hook up Models to the DOM Synchronises data to/from server
- 120. BACKBONEJS 122 MOD EL Application data and business rules It also contains events which notifies any change in data Views are updated using these event notifications his gives you one source of truth, which is not the user interfac
- 121. BACKBONEJS 123 VIE W User interacts with View It observes any data change event in model It reads and edits Model
- 122. BACKBONEJS 124 ROU TER Everything after the hashtag is considered as router Manages application state like bookmarking a particular view Maps your URL to function
- 123. BACKBONEJS 125
- 124. BACKBONEJS 126 HTTP REQUEST/RESPONSE LIFECYCLE FOR SERVER- SIDE MVC
- 125. BACKBONEJS 127 MVC AS IMPLEMENTED BY BACKBONEJS
- 127. BACKBONEJS 129
- 128. BACKBONEJS 130
- 129. 131
- 130. 132