Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
// Functions:

// A function is a procedure- a set of statements that perform a task or
// calculate a value.

// First, we must decalre the function within the scope we plan to
// call it. The proper way to set up a function is:

//   1. Use the function keyword and name your function.
//   2. List your parameters to the function in parentheses and seperated
//       by commas.
//   3. The statements that define the function will be inside curly brackets {}.

// The proper syntax for a function is:

function double(number){
   return (number + number);

}
double(5); // returns 10
//When you call or invoke this function, you will pass an arguemet to the parameter that you want
//to use for number. This function double will return that number + the same number,
//doubling the number.

//The parameters will be the places where the arguements will be passed when
// the function is invoked. These will not change in the function and are used
//like variables. The argeuments can be any value and can change, as long
//as it works with the statements inside of the function.

// You can also assign a function to a variable by declaring the variable and
// assigning it to the function.
// ex.

var add = function(number) {
  return number + number;
}
add(2);
//returns 4

//You can also call the function down the line anywhere in your code. Below,
//the function 'add' was called and added to the above function 'double. This
//comes in handy so you can join results. Functions are convenient because you
//can pass multiple values to the function and get various results without
//having to retype the function.

console.log(add(5) + double(10));
//returns 30
console.log(add(5) + 3);
//returns 13
console.log("I want to buy " + double(10) + " apples!");
//returns: "I want to buy 20 apples!"

//There are 5 primitive values that can be passed in to a function by
//the means above. These are 'undefined', 'null', 'boolean', 'string' and 'number'.
//Non-primitive values will be passed by reference. Passing by reference
//means that the underlying objects have the same memory location, they are referring
// to or referencing the same value. Inside the function, you can change the value and it
// will change the value inside the memory location and print a new value.
//ex.

var myObject = {score1:100, score2:47};
console.log(myObject);
//returns
// [object Object] {
//   score1: 100,
//   score2: 47
// }

function changingValues(obj) {
  obj.score2 = 93;
  console.log(obj);
}
changingValues(myObject);
// returns the object with the new value inside.//
// [object Object] {
//   score1: 100,
//   score2: 93
// }


// Now,if you console 'myObject' again, like we did
// before changing the value. It will return with the new value
// assigned from inside the function. This is because the value
// was changed by memory location. It has been permanently changed.

console.log(myObject);
//returns//
// [object Object] {
//   score1: 100,
//   score2: 93        <--New Value
// }


// Function Scopes:

// Scopes are essentially boundaries that you are working within
// inside of your code. There are local scopes and global scopes.
// When working inside of a function, anything between the curly brackets
// of your function is it's local scope. Anything outside of those brackets
// (and not inside another local scope) is in the global scope.
// Any variable declared inside of a functions local scope cannot
// be accessed from outside the local scope. HOWEVER, a function can access
// any variables that are inside of its parent scope. So, if a function is
// declared globally, it can access all of the variables that are avaiable globally,
// but if it is declared inside of another function, it can only access it's own
// variables AND the variables of the function it's declared inside of.
//ex.

// The following variables are defined in the global scope
var myScore = 100,
    myScore1 = 57,
    name = 'Lindsey';

// This function is defined in the global scope (not inside another function)
function plus() {
  return myScore + myScore1;
}

plus(); // Returns 157

// A local scope example
function getScore() {
  var scoresA = 71,
      scoresB = 20;

  function sum() {
    return name + ' scored ' + (scoresA + scoresB);
  }

  return sum();
}

console.log(getScore()); // Returns "Lindsey scored 91"

//Above, the function sum can access the name because the variable 'name'
//is delcared globally and therefore can be accessed. Conversely
// the function plus() cannot use the variables scoresA, scoresB
// because they are inside of a local scope of function getScore().
//ex.

function plus() {
  return myScore + myScore1 /*+ scoresA*/; //<-- cannot access this
}

console.log(plus());
//returns:
//"ReferenceError: scoresA is not defined

//Closures:
/*Closures are very important in JavaScript. As stated above, functions
can be nested inside of other functions. This gives the nested function
access to all of the variables and functions inside of the outter function.
However, the outter function does not have access to the variables and functions
defined inside the inner function. These boundaries are a security of sorts for
the variables of the inner function. A CLOSURE is created when the inner
function is somehow made available to any scope outside the outer function.
*/
//ex.
var dog = function(name) {   // The outer function defines a variable called "name"
  var getName = function() {
    return name;   // The inner function has access to the "name" variable of the outer function
  }
  return getName;            // Return the inner function, thereby exposing it to outer scopes
}
myDog = dog('Sandy');

console.log(myDog());       // Returns "Sandy"

//For this example you are referring to variables insde the function
//in a chain type of reaction.

// Calling myDog accesss dog('Sandy'). 'Sandy' is the arguement
// passed into the dog function which accesses the getName function.
// This function returns the dogs name. // "Sandy"
</script>


<script id="jsbin-source-javascript" type="text/javascript">// Functions:

// A function is a procedure- a set of statements that perform a task or
// calculate a value.

// First, we must decalre the function within the scope we plan to
// call it. The proper way to set up a function is:

//   1. Use the function keyword and name your function.
//   2. List your parameters to the function in parentheses and seperated
//       by commas.
//   3. The statements that define the function will be inside curly brackets {}.

// The proper syntax for a function is:

function double(number){
   return (number + number);

}
double(5); // returns 10
//When you call or invoke this function, you will pass an arguemet to the parameter that you want
//to use for number. This function double will return that number + the same number,
//doubling the number.

//The parameters will be the places where the arguements will be passed when
// the function is invoked. These will not change in the function and are used
//like variables. The argeuments can be any value and can change, as long
//as it works with the statements inside of the function.

// You can also assign a function to a variable by declaring the variable and
// assigning it to the function.
// ex.

var add = function(number) {
  return number + number;
}
add(2);
//returns 4

//You can also call the function down the line anywhere in your code. Below,
//the function 'add' was called and added to the above function 'double. This
//comes in handy so you can join results. Functions are convenient because you
//can pass multiple values to the function and get various results without
//having to retype the function.

console.log(add(5) + double(10));
//returns 30
console.log(add(5) + 3);
//returns 13
console.log("I want to buy " + double(10) + " apples!");
//returns: "I want to buy 20 apples!"

//There are 5 primitive values that can be passed in to a function by
//the means above. These are 'undefined', 'null', 'boolean', 'string' and 'number'.
//Non-primitive values will be passed by reference. Passing by reference
//means that the underlying objects have the same memory location, they are referring
// to or referencing the same value. Inside the function, you can change the value and it
// will change the value inside the memory location and print a new value.
//ex.

var myObject = {score1:100, score2:47};
console.log(myObject);
//returns
// [object Object] {
//   score1: 100,
//   score2: 47
// }

function changingValues(obj) {
  obj.score2 = 93;
  console.log(obj);
}
changingValues(myObject);
// returns the object with the new value inside.//
// [object Object] {
//   score1: 100,
//   score2: 93
// }


// Now,if you console 'myObject' again, like we did
// before changing the value. It will return with the new value
// assigned from inside the function. This is because the value
// was changed by memory location. It has been permanently changed.

console.log(myObject);
//returns//
// [object Object] {
//   score1: 100,
//   score2: 93        <--New Value
// }


// Function Scopes:

// Scopes are essentially boundaries that you are working within
// inside of your code. There are local scopes and global scopes.
// When working inside of a function, anything between the curly brackets
// of your function is it's local scope. Anything outside of those brackets
// (and not inside another local scope) is in the global scope.
// Any variable declared inside of a functions local scope cannot
// be accessed from outside the local scope. HOWEVER, a function can access
// any variables that are inside of its parent scope. So, if a function is
// declared globally, it can access all of the variables that are avaiable globally,
// but if it is declared inside of another function, it can only access it's own
// variables AND the variables of the function it's declared inside of.
//ex.

// The following variables are defined in the global scope
var myScore = 100,
    myScore1 = 57,
    name = 'Lindsey';

// This function is defined in the global scope (not inside another function)
function plus() {
  return myScore + myScore1;
}

plus(); // Returns 157

// A local scope example
function getScore() {
  var scoresA = 71,
      scoresB = 20;

  function sum() {
    return name + ' scored ' + (scoresA + scoresB);
  }

  return sum();
}

console.log(getScore()); // Returns "Lindsey scored 91"

//Above, the function sum can access the name because the variable 'name'
//is delcared globally and therefore can be accessed. Conversely
// the function plus() cannot use the variables scoresA, scoresB
// because they are inside of a local scope of function getScore().
//ex.

function plus() {
  return myScore + myScore1 /*+ scoresA*/; //<-- cannot access this
}

console.log(plus());
//returns:
//"ReferenceError: scoresA is not defined

//Closures:
/*Closures are very important in JavaScript. As stated above, functions
can be nested inside of other functions. This gives the nested function
access to all of the variables and functions inside of the outter function.
However, the outter function does not have access to the variables and functions
defined inside the inner function. These boundaries are a security of sorts for
the variables of the inner function. A CLOSURE is created when the inner
function is somehow made available to any scope outside the outer function.
*/
//ex.
var dog = function(name) {   // The outer function defines a variable called "name"
  var getName = function() {
    return name;   // The inner function has access to the "name" variable of the outer function
  }
  return getName;            // Return the inner function, thereby exposing it to outer scopes
}
myDog = dog('Sandy');

console.log(myDog());       // Returns "Sandy"

//For this example you are referring to variables insde the function
//in a chain type of reaction.

// Calling myDog accesss dog('Sandy'). 'Sandy' is the arguement
// passed into the dog function which accesses the getName function.
// This function returns the dogs name. // "Sandy"


</script></body>
</html>