javascript

Basics and more...




History

Key ideas

  • Load and go delivery
  • Loose typing
  • Objects as general containers
  • Prototypal inheritance
  • Lambda
  • Linkage through global variables

Data Types

NUMBERS

  • 64 bit floating point (Double) 
  • NAN 

  • String to Number

Quirks

parseInt('06'); //6
parseInt('08'); //0


typeof NaN === 'number'  //true
NaN === NaN //false


0.1 + 0.2 === 0.3 // false

3.toString();

parseFloat( 'Infinity' ) // returns Infinity
Number( 'Infinity' ) // returns Infinity
parseInt( 'Infinity' ) // returns NaN

Data Types

STRINGS
  • UTF-16 (not even that)
  • Immutable
  • Compare with ==
  • '' or ""
  • "hello".length

Bugs


Data Types

BOOLEAN
  • true or false
  • Falsy: false, 0, "", null, undefined, NAN
  • Boolean(value) or !!

Bugs

Number(true); // 1
Number(false); // 0
Boolean(null); // false
null == false; // false

Data Types



NULL
A value that isn't anything


UNDEFINED
A value that isn't even that

bugs

typeof null // "object"
null instanceof Object // false

undefined = "a"; // possible




Everything else is objects

Duck Typing





When I see a bird that walks like a duck and swims like a duck and quacks like a duck, I call that bird a duck
- James Whitcomb Riley


functions

4 ways to call
  • myFunc(1, 2)
  • obj.myFunc(1, 2)
  • myFunc.call(this, 1, 2)    |     myFunc.apply(this, [1, 2])
  • var obj = new myFunc()

this object

As a method
var foo = {};
foo.someMethod = function(){alert(this);}

As a function

var foo = function(){alert(this);}
foo();

As a constructor

function Foo(){
    this.confusing = 'hell yeah';
}
var myObject = new Foo();

With Apply or Call methods

function foo(a,b){alert(this);}
foo.apply('omg',['ah','be']);

closures

    function makeFunc(name) {
      return function() {
        alert(name);
      }
    }
    var myFunc1 = makeFunc("Aconex");
    myFunc1();
    var myFunc2 = makeFunc("SWAT");
    myFunc2();


Use cases

Binding: http://jsfiddle.net/DNH3k/
setTimeout & setInterval: http://jsfiddle.net/nsGNy/4/
Memoization(Caching): http://jsfiddle.net/bFnHc/2/
Currying: http://jsfiddle.net/xYrqh/ (JSPref)

design patterns

Nice list: http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Constructor pattern

Object creation
var newObject = {}; 
var newObject = Object.create( null ); 
var newObject = new Object();

Dynamically adding properties

newObject.key = "value";
newObject["key"] = "value";

Constructors: http://jsfiddle.net/c4dBW/

Constructors with prototypes

Module Pattern

using Object Literals

Basic: http://jsfiddle.net/7qDEL/
Import Mixins: http://jsfiddle.net/7qDEL/1/

Disadvantages:
  • Headache to change private to public
  • New public functions don't have access to private fns 
http://jsfiddle.net/7qDEL/2/

singleton pattern

var mySingleton = (function () {
  var instance;
  function init() {
    var privateRandomNumber = Math.random();
    return {
      getRandomNumber: function() {
        return privateRandomNumber;
      }
    };
  };

  return {
    getInstance: function () {
      if ( !instance ) {
        instance = init();
      }
      return instance;
    }
  };
})();

// Usage:
var singleA = mySingleton.getInstance();
var singleB = mySingleton.getInstance();
console.log( singleA.getRandomNumber() === singleB.getRandomNumber() ); // true

To note

var a = 1
    b = 1;

(function(){
    var a = 2
        b = 2;
}())

console.log(a);
console.log(b);


function func()
{
    return
    {
        foo: "bar"
    };
}
func();

More

var1 == var2
var1 === var2


"1" == true
"b" == true


'true' == true
!!'true'

Hoisting

function func() {
    var a = "String";
    function test(){
        alert(a);
        var a = "Another String";
    }
    test();
}
func();
function func() {
    var a = "String";
    function test(){
        alert(a);
        function a(){alert("test")}
    }
    test();
}
func();
Made with Slides.com