JavaScript Core Syntax, Cont'd...

Functions in JavaScript

/*
    get window height
    get window width
    calculate area
    store area
    do calculation
    check value
    output message
    get image position
    calculate new value
    set image position
    change text color
    if position correct
        output message
*/

//  So that programs like the set of steps written above don't steadily start to overwhelm our programs we chunk of program's logic
// ...into smaller sets of modular, reusable pieces:

/*
                get window height
                get window width
calculateArea:  calculate area
                store area

*/

/*
                do calculation
createMessage:  check value
                output message
*/

/*
                get image position
                calculate new value
                set image position
animateImage    change text color
                if position correct
                    output message
*/



// These are functions:

function createMessage () {
    console.log("We're in the function");
    // loops, if statements, anything!
    // ...
}

//  Sometime Later, we can call our function by name(); 
//  These are function calls or invocations, to 'invoke' a function...

createMessage();
createMessage();
createMessage();

// NOTE! - if it's in a function, it won't run unless you call it. 

// II. WHERE TO DECLARE FUNCTIONS:

// While there is no rule regarding where you put your functions there are certain best-practices to adhere to. . . 

// Best Practices:

// Always declare your functions before you call them, the browser's javascript engine (webkit, v8) always parse javascript the
// ...same way, top down. Therefor, if one declares their functions at the beginning, the function call will be waiting already read
// ...by the javascript engine, stored in memory and ready for launch when the function name is called: functionName();

// What NOT TO DO:

// Call your function
myFunction();

// THEN define the function, and if that function calls an inner function, define that inner function outside myFunction, YIKES!
function myFunction() {
    // lots of code
    myOtherFunction();
}

function myOtherFunction() {
    // lots of code
}

//  DECLARE YOUR FUNCTIONS BEFORE YOU CALL THEM:
//  USE BEST-PRACTICES, 
//  to make the code run at optimized levels and to make your code easier to read...

//Declare the most embedded function
function myOtherFunction() {
    // lots of code
}

//  Lastly declare the outter-most function
function myFunction() {
    // lots of code 
    myOtherFunction();
}

// And THEN, call the function!
myFunction();

// III. FUNCTIONS WITH PARAMETERS:

function myFunction( x ) {
    // do stuff
}

// or mutliple params

function myFunction(x,y,z,x2,y2,z2, ...) {
    // do stuff
}

//  Defining a function with params means instant creation of these params as variables available to that function. 

function myFunction ( x,y ) {
    var myVar = x * y;
    console.log(myVar);
    // we can return values also!
    return myVar;
}

// Calling myFunction:

myFunction(754,346);

myFunction(123,-732);

alert("Hello, world!"); // built-in javascript function

// We can also pass functions to variables...
// So later on we could use this function to create a result
var myresult = myFunction(6,9);

// now if you call a function and nothing is returned by a function, nothing will happen, the call will just be ignored.

// III. PARAMETER MISMATCH:

function calculateLoan(amount, months, interest, name) {
    // lots of code
}

myFunction(1000,60,7,"Sam Jones");
myFunction(1000,60,7,"Sam Jones","Something Extra"); // "Something Extra" will simply be ignored.
myFunction(1000,60,7); // Thus Interest, and Name will be UNDEFINED Variables.

// V. VARIABLE SCOPE:

function simpleFunction() {
    // lots of code
    var foo = 500;
    // lots of code
    console.log(foo); // 500
}

// And if we call this function?:
simpleFunction(); // 500

// But, lets say that right after we've called simpleFunction and have been given the return of 500 from the
//  ...function's inner console.log(foo);
// What if we than write:
console.log(foo); // UNDEFINED 

// HUH?! <-- Wait but we defined foo as being equal to 500. 
// B/c Foo is a LOCAL FUNCTION in the above example. 
// This is because of variable scope within javascript functions. 

// You see, outside the simpleFunction(); - as far as javascript's concerned, the 'foo' variable DOES NOT EXIST.
// THUS, the variables defined within a function only exist within that function, and then are erased. 

// IF WE NEEDED the foo variable to be available to us inside and outside our function scope, we would define the variable outside
// ...of any specific function. What is known as the dreaded GLOBAL VARIABLE. One of JavaScripts Unfortunate bad parts. 

var foo; // Global Variable

funtion simpleFunction() {
    //lots of code
    var foo = 500; 
    //lots of code
    console.log(foo);   //  500
}

// So now we can access foo inside the function and outside the function also.
simpleFunction();   //  500
console.log(foo);   //  500

// And Everything's ok. Untill you realize that you now have a Global Variable Able to be changed outside a function scope and capable of 
// sinking your digital rubber ducky! idk...