Understanding                                JavaScriptThursday, September 20, 12
Why JavaScript?                     Simple                     Multi paradigm                     Works on the server and ...
I heard it sucks, its broken                     Implicit globals                     Confusing this keyword              ...
The good partsThursday, September 20, 12
Type system                     Weak typing means that a language                     implicitly converts types when used....
Type system                     Constructors              Literals            typeof                Object()              ...
Type system: Falsy values                 0                 null                 undefined                 false           ...
Type system: Coercion                 undefined == undefined                 ",,," == new Array(4)                 NaN != ...
Type systemThursday, September 20, 12
Type system                 Avoid coercion                 Define API’s with clear types                 Use the === operat...
Type system           /**             * Adds two numbers             *             * @param {Number} a             * @para...
Type system: Casting                 Use the constructors       Number(‘3’) === 3                 Use the prefix + operator...
Variables                 Variables are function scoped                 The var operator is evaluated statically          ...
Variables         // Hoisting: Cannot read property name of undefined         var name = user.name           , user = {nam...
Functions: Declaration vs Expression         // Function declaration (static)         function add(a, b) {           retur...
Functions: Higher order                 Functions can accept functions as a                 parameters and can return func...
Functions: Closures                 Closures are function that “remember”                 the variables on their scope    ...
OOP: Prototypes                 Each object can have a pointer to another                 object called prototype         ...
OOP: Prototypes         // Using non-standard __proto__         var animal = {eat: true}           , rabbit = {jump: true}...
OOP: Constructors                 Calling a function with the new operator                 makes it behave like a construc...
OOP: Constructors         var animal = {eats: true};         function Rabbit(name) {           this.name = name;          ...
OOP: The `this` keyword                 The global object if its on the main scope                 The parent object of a ...
OOP: Constructors         // global         this.Boolean = function () {return false;};         Boolean(2) === false      ...
OOP: Constructors         // Constructors         function Rabbit(name) {           this.name = name;         }         va...
Semicolons                 Use them all the time                 If a cool kid trolls you for using them,                 ...
Upcoming SlideShare
Loading in...5
×

Understanding JavaScript

480

Published on

Topics
functions declarations, functions expressions, named functions
Closures, curry, application
vars, scopes, hoisting
this, constructors and literals
semicolons and other shite

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
480
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Understanding JavaScript

  1. 1. Understanding JavaScriptThursday, September 20, 12
  2. 2. Why JavaScript? Simple Multi paradigm Works on the server and the browser Lots of libraries JSONThursday, September 20, 12
  3. 3. I heard it sucks, its broken Implicit globals Confusing this keyword Confusing OO features, lack of class syntax Type coercionThursday, September 20, 12
  4. 4. The good partsThursday, September 20, 12
  5. 5. Type system Weak typing means that a language implicitly converts types when used. A programming language is said to use dynamic typing when type checking is performed during run-time as opposed to compile-time.Thursday, September 20, 12
  6. 6. Type system Constructors Literals typeof Object() {a: ‘b’} ‘object’ Array() [0, 1, ‘foo’, 3] ‘object’ RegExp() /foo.*/ ‘object’ Date() - ‘object’ - null ‘object’ Boolean() true false ‘boolean’ String() “foo” ‘bar’ string’ Number() 30 0.5 Infinity NaN ‘number’ Function() function foo() {} ‘function’ - undefined ‘undefined’Thursday, September 20, 12
  7. 7. Type system: Falsy values 0 null undefined false "" NaNThursday, September 20, 12
  8. 8. Type system: Coercion undefined == undefined ",,," == new Array(4) NaN != NaN "wat" - 1 == NaN {} + {} == NaN [] + [] == “” [] + {} == “[object Object]”Thursday, September 20, 12
  9. 9. Type systemThursday, September 20, 12
  10. 10. Type system Avoid coercion Define API’s with clear types Use the === operator Read the spec or this article http:// webreflection.blogspot.com.es/2010/10/ javascript-coercion-demystified.htmlThursday, September 20, 12
  11. 11. Type system /** * Adds two numbers * * @param {Number} a * @param {Number} b * @return {Number} */ function add(a, b) { return a + b; } /** * Returns the sumatory of a list of numbers * * @param {Array<Number>} list * @return {Number} */ function sum(list) { return list.reduce(add, 0); }Thursday, September 20, 12
  12. 12. Type system: Casting Use the constructors Number(‘3’) === 3 Use the prefix + operator +‘3’ === 3 Use the infix + operator 3 + ‘0’ === ’30’ Use the prefix ! operator !!1 === trueThursday, September 20, 12
  13. 13. Variables Variables are function scoped The var operator is evaluated statically It instantiates all the variables on the current scope It assigns them the undefined value Assignment on variables that have not been instantiated create a globalThursday, September 20, 12
  14. 14. Variables // Hoisting: Cannot read property name of undefined var name = user.name , user = {name: John}; // This creates a global! foo = ‘bar’; // Function scope var a = 10; if (true) { var a = 20; } (function () { var a = 30; }()); a == 20;Thursday, September 20, 12
  15. 15. Functions: Declaration vs Expression // Function declaration (static) function add(a, b) { return a + b; } // Function expression (runtime) var add = function (a, b) { return a + b; } // Function named expression (runtime) var recursiveAdd = function inc(a, b) { if (a > 100) return a; return inc(a + b, b); }Thursday, September 20, 12
  16. 16. Functions: Higher order Functions can accept functions as a parameters and can return functions Functions are objects after all, they can even have attributes! // Returns a function that will have a delay function delayFunction(fn, delay) { fn.delayed = true; return function () { setTimeout(fn, delay); }; });Thursday, September 20, 12
  17. 17. Functions: Closures Closures are function that “remember” the variables on their scope // Gets a function to inspect the given object function getInspector(obj) { return function (attr) { return obj[attr]; }; }; var inspect = getInspector({name: ‘john’, age: 21}); [‘name’, ‘age’].map(inspect) == [‘john’, 21];Thursday, September 20, 12
  18. 18. OOP: Prototypes Each object can have a pointer to another object called prototype When we read an attribute from an object but its not present, it will try to find it through the prototype chain Prototypes are powerful but can be confusing. Delegation is easy.Thursday, September 20, 12
  19. 19. OOP: Prototypes // Using non-standard __proto__ var animal = {eat: true} , rabbit = {jump: true}; rabbit.__proto__ = animal; rabbit.jump === true rabbit.eat === true // Using Object.create var animal = {eat: true} , rabbit; rabbit = Object.create(animal); rabbit.jump = true; rabbit.eat === true rabbit.jump === trueThursday, September 20, 12
  20. 20. OOP: Constructors Calling a function with the new operator makes it behave like a constructor The keyword this will point to the newl object The constructor will have an implicit return of the new object The pointer to the prototype is assigned to the new objectThursday, September 20, 12
  21. 21. OOP: Constructors var animal = {eats: true}; function Rabbit(name) { this.name = name; this.jumps = true; } Rabbit.prototype = animal; var rabbit = new Rabbit(John) rabbit.eats === true rabbit.jumps === true rabbit.name === ‘John’Thursday, September 20, 12
  22. 22. OOP: The `this` keyword The global object if its on the main scope The parent object of a method if the function is called as a method The newly created object from a constructor called with the new operator The first argument passed to call or apply inside function codeThursday, September 20, 12
  23. 23. OOP: Constructors // global this.Boolean = function () {return false;}; Boolean(2) === false // method invocation var button = { toggle: function () { this.enabled = !!this.enabled; } }; button.toggle(); button.enabled === true; var toggle = button.toggle; toggle(); button.enabled === true;Thursday, September 20, 12
  24. 24. OOP: Constructors // Constructors function Rabbit(name) { this.name = name; } var rabbit = new Rabbit(John) rabbit.name === ‘John’; var rabbit = Rabbit(‘John’); rabbit.name === undefined; window.name === ‘John’; // call or apply [].reduce.call( "Javascript is cool!" , function (memo, a) { return a + memo; } );Thursday, September 20, 12
  25. 25. Semicolons Use them all the time If a cool kid trolls you for using them, send them this link http://asi.qfox.nl/Thursday, September 20, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×