Vanilla Javascrip Basics

functions.js

// Function declaration 

foo(); // It works! :D

function foo() { 
    console.log('I got hoisted, so basically you can call me wherever you want to. Even before my declaration.');
}

// Function Expression

bar // I'm undefined, but I exist since i got hoisted (i'm a declaration, see var statement). Saddly, assignments only occur
// during runtime, so calling bar(); will result in a type error.

var bar = function() {
    console.log('I\'m just an anonym function assigned to bar.');
};

bar(); // YAY! This works. 

inheritance.js

function Animal() {
    this.value = 'Animal';
    this.sound = 'undefined, dunno which animal am I';
};

Animal.prototype = {
    shout: function() {
        console.log(this.sound);
    }
};

function Dog() {
    this.value = 'Dog';
    this.sound = 'Woof!';
}

function Cat() {
    this.sound = 'Meoooow!';
}

Cat.prototype = new Animal();
Dog.prototype = new Animal();

Cat.prototype.constructor = Cat;
Dog.prototype.constructor = Dog;

keyconcepts.js

// Late binding

var obj = {
    testFunction: function() {
        console.log('Context: ',this);
    }
}

obj.testFunction();

var test = obj.testFunction;

test();


// Closures and references

function User(pname, ppassword) {
    var name = pname,
        password = ppassword;
        
    return {
        getName: function() {
            return name;
        }
    }
}

// getName keeps a reference to the original context in which name and password are defined.
// In JS every function acts as a closure


// Scoping

var a = 'i am the coolest var evar!';
console.log('a:', a);
function nope() {
    a = 'I don\'t think so.'
    
    console.log('inner a:', a);
    
    return function() {
        var a = 'FUUUUU! Stop this madness!';
        console.log('inner inner a:', a);
    }
}
nope()();
console.log('a:', a);

// Hoisting

hoistedFunction(); 
// wait, why is this working if there's no hoistedFunction defined up there? - Because hoisting, that's why.

/* -----------------------------------------  */

function hoistedFunction() {
    console.log('I work, even if they call me before my definition.');
}

objects.js

var obj = {
    foo: 'foo',
    bar: 'bar'
};

obj.foo = 'foofoo';

console.log(obj.foo);
console.log(obj.bar);

console.log(obj.baz);

obj.baz = 25; 

console.log(obj.baz);

//We can use the square bracket notation

obj['baz'] = 27;

console.log(obj.baz);
console.log(obj['baz']);

delete obj['baz'];

for(var i in obj){
    console.log('Key:' + i, ', Value:' + obj[i]);
}

obj.1 = '23'; // Whooops! Don't do this, instead 

obj[1] = '23';
console.log(obj[1]);

this.js

console.log('Context: ',this); //This expression basically refers to the global context, in this case the window object.

function foo(param, param2) {
    console.log('Context: ',this);
    console.log('Param: ', param);
    console.log('Param: ', param2);
}

foo(); // In this case, this will also refer to the global context.

var test = {
    bar: function() {
        console.log('Context: ',this); 
    }
}

test.bar(); // In this case, this will refer to the test variable. -Wait wuuut? -Yup, test variable.

//Ok, so lets use the foo function we've already defined

new foo(); //It should refer to the window object, right?

// Nope, when used in conjunction with new, this will refer to the newly created object.

//So, is there a way to stop this madness? 

var obj = {};

foo.apply(obj, [1, 2]); 
foo.call(obj, 1, 2); 

// Look at this crazy mofo 

obj.test = function() {
    var that = this;
    function testInner() {
        console.log('Context(this): ',this);
        console.log('Context(that): ',that); 
    }
    testInner();
    // One would expect this to refer to obj, but it refers to the global scope :D crazy, huh? 
}