Skip to content

Instantly share code, notes, and snippets.

@ryan-w-moore
Created November 11, 2014 10:28
Show Gist options
  • Save ryan-w-moore/ab5f220b87c2a12a408f to your computer and use it in GitHub Desktop.
Save ryan-w-moore/ab5f220b87c2a12a408f to your computer and use it in GitHub Desktop.
JavaScript Core Syntax, Cont'd...
/*
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...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment