JS Training Session 1: Variables, Functions, Arguments, Primitives, Objects, Properties, and References.

jstraining.js

/****************   
 * Variables    *
 ****************/
var foo = 99;
//"var" is the syntax used for declaring a variable. It doesn't matter what
//type of value you want to store in the variable, JavaScript doesn't care.

bar = 'banana';
//omitting the "var" keyword will still create a variable (if it doesn't 
//already exist in the scope), but it will be implicitly global.
//There is almost never a good reason to do this. 
 

/****************   
 * Primitives   *
 ****************/
//* Number: 
0, 
-99, 
1.1, 
1e3,        /* Scientific notation */
0xABC,      /* Hexadecimal */ 
01234567,   /* Octal (0-7), must have leading 0. */
Infinity    /* Technically a reserved word. Infinity > everything, and 
             * -Infinity < everything. This is useful for Min/Max operations */

//* String: 
'foo', 
"bar", 
"a 'foo' is cool", 
'so is a "bar", right?', 
"Or I can \"escape\" quotes"

//* Boolean: 
true, false

//* Other: 
null, undefined, NaN

/****************   
 * Objects      *
 ****************/
var foo = {
    bar: 0,
    baz: true,
    banana: 'fancy',
    monkey: { lorem: 99, ipsum: undefined }
};
//We create an variable named "foo" that stores an object with several properties. 
//A property can be assigned any primitive value, object reference, or inline 
//object. To be more specific, we can use any expression on the right-hand side
//of the colon to assign the value of the property. We'll cover expressions later. 

var bar = new XMLHttpRequest();
//The "new" operator is important here.
//We create a new instance of the XMLHttpRequest object, and assign it to the
//variable named "bar". We'll cover classes in more detail a bit later. 

/****************   
 * Functions    *
 ****************/
function foo(){
    //do stuff
}
//This is a "Function Statement"
 
var bar = function(){
    //do some other stuff
};
//This is a "Function Expression", being assigned to the variable "bar".
//Function expressions can have a name. This allows you to reference the 
//function from within itself:
var baz = function lorem(n){
    //Now I can call lorem inside of lorem. This is called "Recursion"
    if (n > 0) lorem(n-1);
    //Make sure you have an exit condition when writing a recursive function.
};
//lorem will be undefined outside of its own scope. More on scope later.

(function(){
    // do some stuff
})();
//This is referred to as an Immediately Invoked Function Expression (IIFE)
//and sometimes Self-Invoking Function Expression (but this is somewhat of a misnomer)
//IIFEs are useful when you need to isolate a scope in-line. A common example is
//a loop that sets up an asynchronous callback:
for(var i = 0; i < 10; i++){
    (function(index){
        setTimeout(function(){
            //"i" will always be 10 here.
            //"index" will be the expected value
        }, 1000);
    })(i);
}
 
/****************************   
 * Parameters & "arguments" *
 ****************************/
function foo(a, b, c){
    if(a === 1) // do one thing
    
    if(b === 2){
        if (c === 3){
            // do another thing
        } else {
            // what you say?
        }
    }
}
//The function "foo" is written to expect 3 parameters, "a", "b", and "c".
//This should look familiar. This is how most functions/methods are written.

function min(){
    var lowest = Infinity,
        i, len = arguments.length, cur;
    
    for(i = 0; i < len; i++){
        cur = arguments[i];
        if(cur < lowest){
            cur = lowest;
        }
    }
    return lowest;
}
//"arguments" is a context-sensitive array-like keyword that contains everything 
//that the function was called with. It also has some meta information like a 
//reference to the function itself (arguments.callee) the function that called 
//it (arguments.caller), and the number of arguments passed in (arguments.length)
//"arguments" is useful for allowing a function to take any number of parameters.

/****************************   
 * Classes and "prototype"  *
 ****************************/
function Person(name, birthday){
    this.name = name;
        
    if (birthday instanceof Date){
        this.birthday = birthday;
    } else {
        this.birthday = new Date(birthday);
    }
}
//Here we create a generic "Person" class. Note the use of "this". "this" is
//referring to the instance of the "Person" being created when you create a
//"new Person(...)". We can create a new person like so:
var jfk = new Person("John", "1917-05-29T12:00:00-05:00");
console.log(jfk.name, jfk.birthday); 
//logged: John Tue May 29 1917 11:00:00 GMT-0600 (Mountain Daylight Time)

//If we want to add some utility to this class, like finding out the Person's age,
//for example, we could add it to the "constructor" of the function like so:
function Person(name, birthday){
    //...
    
    this.getAge = function(){
        var today = new Date();
    
        return today.getFullYear() - this.birthday.getFullYear();
    };
}
//But this is not ideal. If done this way, each instance of "Person" will have
//a separate copy of the "getAge" function. This means that each instance will
//have a larger memory signature. Thankfully, there is an easy way to avoid this:
Person.prototype.getAge = function(){
    var today = new Date();
    
    return today.getFullYear() - this.birthday.getFullYear();
};
//By adding the "getAge" method to the "prototype" of "Person", each instance of
//"Person" will share the same "getAge" reference. This means that it will be in
//memory only once. "this" will be a reference to the instance of "Person" that
//"getAge" is being called on. 
var jfk = new Person("John", "1917-05-29T12:00:00-05:00"),
    fdr = new Person("Franklin", "1882-01-30T12:00:00-05:00");
    
jfk.getAge(); // 96  (as of 12/30/2013)
fdr.getAge(); // 131 (as of 12/30/2013)