• Like
  • Save
Understanding JavaScript
Upcoming SlideShare
Loading in...5
×
 

Understanding JavaScript

on

  • 633 views

Topics ...

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

Statistics

Views

Total Views
633
Views on SlideShare
633
Embed Views
0

Actions

Likes
1
Downloads
12
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Understanding JavaScript Understanding JavaScript Presentation Transcript

    • Understanding JavaScriptThursday, September 20, 12
    • Why JavaScript? Simple Multi paradigm Works on the server and the browser Lots of libraries JSONThursday, September 20, 12
    • I heard it sucks, its broken Implicit globals Confusing this keyword Confusing OO features, lack of class syntax Type coercionThursday, September 20, 12
    • The good partsThursday, September 20, 12
    • 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
    • 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
    • Type system: Falsy values 0 null undefined false "" NaNThursday, September 20, 12
    • Type system: Coercion undefined == undefined ",,," == new Array(4) NaN != NaN "wat" - 1 == NaN {} + {} == NaN [] + [] == “” [] + {} == “[object Object]”Thursday, September 20, 12
    • Type systemThursday, September 20, 12
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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