Your SlideShare is downloading. ×
Java script good_bad_awful
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Java script good_bad_awful

277
views

Published on

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
277
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References JavaScript The good, bad and awful parts Moamen Mokhtar Usama Elnily September 17, 2013 Moamen Mokhtar, Usama Elnily JavaScript
  • 2. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Outline 1 Intro 2 Functions 3 Arrays 4 Asyncrounus Javascript 5 Awful and bad parts 6 References Moamen Mokhtar, Usama Elnily JavaScript
  • 3. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Brief History Facts about JS Outline 1 Intro 2 Functions 3 Arrays 4 Asyncrounus Javascript 5 Awful and bad parts 6 References Moamen Mokhtar, Usama Elnily JavaScript
  • 4. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Brief History Facts about JS What is Javascript The world most missunderstood programming language (Neither Java nor Script!) Lots of design errors. Moamen Mokhtar, Usama Elnily JavaScript
  • 5. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Brief History Facts about JS History In 1992, James Gosling and java. Netscape (Berndan Eich) and LiveScript. Sun, Netscape and JavaScript. Moamen Mokhtar, Usama Elnily JavaScript
  • 6. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Brief History Facts about JS Javascript the language Load and go delivery. Loose typing. Objects as general containers. Prototypal inheritance. Lambda. Linkage through global variables. Moamen Mokhtar, Usama Elnily JavaScript
  • 7. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Brief History Facts about JS Facts about JS NaN NaN === NaN == ’1’ == 1 ” == false typeof typeof ”help”.toString; for .. in obj. obj[’ ’] Moamen Mokhtar, Usama Elnily JavaScript
  • 8. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Outline 1 Intro 2 Functions 3 Arrays 4 Asyncrounus Javascript 5 Awful and bad parts 6 References Moamen Mokhtar, Usama Elnily JavaScript
  • 9. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Function definition var foo = function(); function foo (); Moamen Mokhtar, Usama Elnily JavaScript
  • 10. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Augmenting Function.prototype.method = function(name , func) { this.prototype[name] = func; return this; }; Moamen Mokhtar, Usama Elnily JavaScript
  • 11. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Scope I No block Scope. Hoisting. foo (); // not visible bar (); // visible var foo = function (){ ... }; function bar (){ ... }; Moamen Mokhtar, Usama Elnily JavaScript
  • 12. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Scope II function foo (){ function bar() { return 3; } return bar (); function bar() { return 8; } } alert(foo ()); Moamen Mokhtar, Usama Elnily JavaScript
  • 13. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Scope III function foo (){ var bar = function () { return 3; }; return bar (); var bar = function () { return 8; }; } alert(foo ()); Moamen Mokhtar, Usama Elnily JavaScript
  • 14. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Scope IV alert(foo ()); function foo (){ var bar = function () { return 3; }; return bar (); var bar = function () { return 8; }; } Moamen Mokhtar, Usama Elnily JavaScript
  • 15. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Scope V function foo (){ return bar (); var bar = function () { return 3; }; var bar = function () { return 8; }; } alert(foo ()); Moamen Mokhtar, Usama Elnily JavaScript
  • 16. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Scope VI var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar (); Moamen Mokhtar, Usama Elnily JavaScript
  • 17. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Arguments An array-like variable. Contains all of the arguments of the functions. Doesn’t have all the functions of arrays except length(). Moamen Mokhtar, Usama Elnily JavaScript
  • 18. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Apply and Call function invocation Difference between apply and call. theFunction.apply(valueForThis , arrayOfArgs) theFunction.call(valueForThis , arg1 , arg2 , ...) Moamen Mokhtar, Usama Elnily JavaScript
  • 19. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Closure var myObject = function ( ) { var value = 0; return { increment: function (inc) { value += typeof inc === ’number ’ ? inc : 1; }, getValue: function ( ) { return value; } } }( ); Moamen Mokhtar, Usama Elnily JavaScript
  • 20. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Curry Function.method(’curry ’, function ( ) { var slice = Array.prototype.slice , args = slice.apply(arguments), that = this; return function ( ) { return that.apply(null , args.concat(slice.apply(arguments ))); }; }); Creates closure to hold arguments of the outer function to be used in the inner function. Moamen Mokhtar, Usama Elnily JavaScript
  • 21. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Memoization I var memoizer = function (memo , fundamental) { var shell = function (n) { var result = memo[n]; if (typeof result !== ’number ’) { result = fundamental(shell , n); memo[n] = result; } return result; }; return shell; }; Moamen Mokhtar, Usama Elnily JavaScript
  • 22. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Memoization II var fibonacci = memoizer ([0, 1], function (shell , n) { return shell(n - 1) + shell(n - 2); }); var factorial = memoizer ([1, 1], function (shell , n) { return n * shell(n - 1); }); Moamen Mokhtar, Usama Elnily JavaScript
  • 23. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Important methods Outline 1 Intro 2 Functions 3 Arrays 4 Asyncrounus Javascript 5 Awful and bad parts 6 References Moamen Mokhtar, Usama Elnily JavaScript
  • 24. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Important methods Important methods array.slice(start, end ) It makes a copy of a portion of the array starting from start to end. array.splice(start, deleteCount, item...) The splice method removes elements from an array, replacing them with new items. It is different than delete as delete will replace the deleted value with undefined array.sort(comparefn ) The default sort function converts the array entries into strings and sort lexicographically!. It is provided with the sorting function (like comparable objects in java). Moamen Mokhtar, Usama Elnily JavaScript
  • 25. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Why using async. functions Sometimes-async functions Throwing errors from callbacks Outline 1 Intro 2 Functions 3 Arrays 4 Asyncrounus Javascript 5 Awful and bad parts 6 References Moamen Mokhtar, Usama Elnily JavaScript
  • 26. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Why using async. functions Sometimes-async functions Throwing errors from callbacks Using async. functions Prefered with discontinous events to prevent frozen clients. What is a callback? Moamen Mokhtar, Usama Elnily JavaScript
  • 27. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Why using async. functions Sometimes-async functions Throwing errors from callbacks for(vari =1;i <=3;i++){ setTimeout(function (){ console.log(i);} ,0); }; Moamen Mokhtar, Usama Elnily JavaScript
  • 28. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Why using async. functions Sometimes-async functions Throwing errors from callbacks The devil is in the details Javascript is single threaded. Meet the queue. Moamen Mokhtar, Usama Elnily JavaScript
  • 29. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Why using async. functions Sometimes-async functions Throwing errors from callbacks Sometimes-async functions I Functions that are async sometimes, but not at other times. Example: Async functions with caching. var socketsCache ={}; function openWebSocket(serverAddress ,callback ){ var socket; if(serverAddress in webSocketCache ){ socket=webSocketCache [serverAddress ]; if(socket.readyState === WebSocket.OPEN ){ callback (); } .... Moamen Mokhtar, Usama Elnily JavaScript
  • 30. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Why using async. functions Sometimes-async functions Throwing errors from callbacks Sometimes-async functions II }else{ socket=newWebSocket(serverAddress ); webSocketCache [serverAddress ]= socket; .... }; return socket; }; var socket=openWebSocket(url ,function (){ .... }); .... Moamen Mokhtar, Usama Elnily JavaScript
  • 31. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Why using async. functions Sometimes-async functions Throwing errors from callbacks Throwing errors from callbacks Can we catch error thrown from a callabck ? try{ setTimeout(function (){ throw new Error(’Catch_me_if_you_can !’); },0); }catch(e){ console.error(e); } Moamen Mokhtar, Usama Elnily JavaScript
  • 32. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Outline 1 Intro 2 Functions 3 Arrays 4 Asyncrounus Javascript 5 Awful and bad parts 6 References Moamen Mokhtar, Usama Elnily JavaScript
  • 33. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Awful and bad parts I global variables A non-declared variable is considered global. Semicolon insertion return { status: true }; Moamen Mokhtar, Usama Elnily JavaScript
  • 34. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Awful and bad parts II Reserved Words Use them within quotes. Access with subscript object = {case: value }; // illegal object = {’case ’: value }; // ok object.case = value; // illegal object[’case ’] = value; // ok Bitwise Operators Very slow! Moamen Mokhtar, Usama Elnily JavaScript
  • 35. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References References Outline 1 Intro 2 Functions 3 Arrays 4 Asyncrounus Javascript 5 Awful and bad parts 6 References Moamen Mokhtar, Usama Elnily JavaScript
  • 36. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References References References Douglas Crockford. JavaScript: The Good Parts. O’Reilly, 2008. Trevor Burnham. Async JavaScript. The Pragmatic Programmers, 2012. Moamen Mokhtar, Usama Elnily JavaScript