Section 1 - Getting Started

First program

var a = 'hello world';

function b() {

}

• a is global

• accessible in the console 'a'

• 'this' is a global object automatically created = window object

• window.a = same thing

  • Here we access the window global object, that contains variable a.

• Global variables are built in with the global wrappers.

var a = 'hello world';

function b() {
    console.log('calling b');
}

b();
console.log(a);

• console log ~ print statement

• Process:

  • print calling b, and then hello world

How stuff gets executed

b();
console.log(a);

var a = 'hello world';

function b() {
    console.log('calling b');
}

• unlike other programming languages, which will execute line by line - javascript works differently. Even though b gets called before its definition, it still works.

  • This is however, not true with variables - and 'a' will be 'undefined'

  • Its not that is does not recognize the variable, when your code is parsed memory is set aside for both variables and functions. But how it does this works differently for functions and variables.

  • A function is placed into memory entirely. A variable assigment is evaluated during execution, but the assignment operator is executable.

  • So through the first phase, a variable is identified along with a function are stored into memory. And then b is called, a is undefined, because its line has not been executed yet.

b();

function b() {
    console.log(c);
}

var c = 'hello world2';

• Here, as we might expect, b gets called, which prints c, which is undefined for the same reasons.

• All variables are defined undefined within the first phase of (setting up memory space), before execution. Its like a placeholder. Or declaring it like this. A prototype.

  var a; console.log(a);

• We can prove this further.

var a;
console.log(a);

if (a === undefined) {
    console.log('a is undefined')

}

else {
    console.log('a is defined')
}

Undefined

• undefine is a special recongnizable keyword

• We can prove this:

var a = 'jello'
console.log(a);

a = undefined;

if (a === undefined) {
    console.log('a is undefined')

}

else {
    console.log('a is defined')
}

• This is dangerous, and shouldnt be done - but it demonstrates 'undefed' as an important keyword.

• Although - we should let the compiler handle this 'undefined's for us - so differentiate our own mistakes in debugging.

• Now that we know it works, I find it best practice to write things organized:

var a = 'jello'
console.log(a);

function b() {
    console.log('b');
}

b();

*Javascript is synchronous, single threaded execution, meaning that it handles only one thing at a time, line but line.

Execution as a stack

• Lets analyze what is happening here:

function a() {
    b();
    var c;
}

function b() {
    var d;
}

a();
var d; 

• Here we go through whats known as an execution stack. The stack order is as follows:

• a();

• b();

• a();

• a();

• And finish. Functions get put onto a stack, similiar to recursion. It gets popped off the stack once the function execution finished FOR that execution stack.

• Each function has their own 'this'

Scope

function b() {
    var c;
    console.log(c);
}

function a() {
    b();
    var c = 2;
    console.log(c);
}


var c = 1;
console.log(c);
a();

• Here, each a is unique - because they each identify with a unique scope.

Scope Chain

function b() {
    console.log(myvar);
}

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

var myvar = 1;
a();

• Here, b() prints 1, because it is lexically closer to the global declaration myVar = 1.

function a() {

    function b() {
        console.log(myvar);
    }

    var myvar = 2;
    b();
}

var myvar = 1;
a();

• Here, b() prints 2, because it is sitting lexically closer to myVar = 2. Otherwise, it would print 1 (that is if myvar was not defined within the particular scope of a().

• This is known as the outer enviroment reference.

Async and Event Handling

• click elements on the browser are actually managed async. (more than one at a time), because there are more than one engines running at a time. For example, the rendering enginer or http request. The javascript engine, itself - however is run async.

• Events handled are placed into a queue. This ensure that all events become processed - even if there happens to be some delay between them.

• This next bit is interesting:

function waitThreeSec() {
    var ms = 3000 + new Date().getTime();
    while (new Date() < ms ) {};
    console.log('finished function');
}

function clickHandle() {
    console.log('clicked');
}

document.addEventListener('click', clickHandle);

waitThreeSec();
console.log('finished execution'); 

• This code demonstrates how functions are looked at as running Async.

• waitTheeSec() is handled first, and thing can happen until this function actually finished execution. But. At the same time, we have other functions listening to other events, and placing them into a queue.

• It is also important to note the engine ran -> 'finished function' -> 'finished execution' -> and then reading from the queue -> the event listener.