Hoisting!?

Setup memory space for Variables / functions

Moving declarations to the top of a SCOPE

You are able to use functions / variables before it has been declared

Hoisting ~ elevate, raise, take up

Hoisting!?

var poco;
poco = 1;

eco = 1;
var eco;

function displayVariables() {
    console.log(pocoeco);
    var pocoeco = 'much example';
}

Hoisting!?

var poco;
poco = 1;

eco = 1;
var eco;

function displayVariables() {
    console.log(pocoeco);
    var pocoeco = 'much example';
}

var poco;
var eco;

poco = 1;
eco = 1;

function displayVariables() {
    var pocoeco;

    console.log(pocoeco);
    pocoeco = 'much example';
}

Hoisting!?

function movePoco() {

	if (false) {
		var x = 1;
	}

	return;
	var y = 1;
}

movePoco();

Hoisting!?

function movePoco() {

	if (false) {
		var x = 1;
	}

	return;
	var y = 1;
}

movePoco();

function movePoco() {
    var x;
    var y;

    if (false) {
        x = 1;
    }

    return;
    y = 1;
}

movePoco();

Hoisting functions/vars

function playWithFunctions() {
	dog();
	cat();
	carp();

	var dog = function () {
		console.log('ufuf');
	};

	function cat() {
		console.log('miauu');
	}

	var carp = function fish() {
		console.log('I am THE carp');
	}

}

Hoisting functions/vars

function playWithFunctions() {
	var dog = function () {
	};

	function cat() {
	}

	var carp = function fish() {
	}

}

function playWithFunctions() {
        var dog;
        function cat() {}
        var carp

        //dog, carp undefined!

        dog = function () {
	};


        carp = function fish() {
	}

}

Hoisting let, Class

Coercion

Coercion

Implicit coercion VS Explicit coercion

var a = "42";
var b = a * 2;        //Implicit (BAD)


var c = Number(a) * 2;    //Explicit (GOOD)
c = parseInt(a, 10) * 2;
c = parseFloat(a, 10) * 2;

Coercion

NaN

var a = "42f";
var b = a * 2;      

Coercion

NaN

var a = "42f";
var b = a * 2;      

b - NaN!!! (Number("42f") - NaN)

parseInt("42f") === 42;

NaN

NaN === NaN     

isNaN(a)

Operators

Associativity, Operator precedence

Which operator function get called first

(higher wins)

What order operator functions get called: 

Left-to-right or right-to-left

(same precedence)

Operator precedence

Associativity

var a = 1, b = 2; c = 3;

a = b = c;

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

Operator precedence on MDN

console.log(1 < 2 < 3)

console.log(3 < 2 < 1)

console.log(3 < 2 < 1)

3 < 2 < 1

false < 1

Number(false) < 1

console.log(3 < 2 < 1)

3 < 2 < 1

false < 1

Number(false) < 1

// Number(false) === 0

0 < 1

true!!!

Number(true);  

Number(false);

Number(null);

Number(undefined);

If...else

var a;

if(a !== null && a !== undefined && a !== false) {
     // Do something with a   
}

If...else

var a;

if(a !== null && a !== undefined && a !== false && a !== 0) {
     // Do something with a   
}

Boolean(null);
Boolean(undefined);
Boolean(false);
Boolean(0)

if(a) {
// Do something with a   
}

If...else

var a;
a = 0;

if(a || a === 0) {
    console.log('Do something with a');
}

If...else

var a;
a = 0;

if(false || true) {
    console.log('Do something with a');
}

By Value

vs

By Reference

//BY value
var a = 42;
var b;

b = a;
a = 88;

//By reference
var poco = { saysomething: 'ola'}
var eco;

poco = eco;

//By reference function parameter also!
var poco = { saysomething: 'ola'}
var eco;

function doThis(arg) {
    arg.saysomething = ketal;
}


eco = poco;

doThis(poco);

console.log(poco);
console.log(eco);

Functions

Functions

Declarations / expressions

function functionDeclaration() {
    
};

var functionExpressionVar = function() {

};

Functions

named expressions

var functionExpressionVar = function ihaveaname() {

};

ihaveaname();

Functions

named expressions

var functionExpressionVar = function ihaveaname() {
    typeof ihaveaname;  //function - i have this in my scope
};

ihaveaname();    //ERROR! there is no ihaveaname in this scope!

Functions

statements inside block

if (true) {
	function foo() {
		return 1;
	}
} else {
	function foo() {
		return 2;
	}
}

console.log('foo:' + foo());

Functions

statements inside block

if (true) {
	function foo() {
		return 1;
	}
} else {
	function foo() {
		return 2;
	}
}

console.log('foo:' + foo());    // chrome - 2, firefox - 1  :)

Functions

statements inside block

var foo;    //GOOD!

if (true) {
	foo = function foo() {
		return 1;
	}
} else {
	foo = function foo() {
		return 2;
	}
}

console.log('foo:' + foo());

Functions

More http://kangax.github.io/nfe/

Closure

Closure

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
};

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

add5, add10 closure! stores same body def, but different environments