Functions pt2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362520/images/1635394/stucked.png)
Overview
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362520/images/1635394/stucked.png)
Functions Review
Storing function evaluations
Functions within functions
Intro to Scope
Review
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362520/images/1635394/stucked.png)
var add = function (a, b) {
return a + b;
};
add(1, 2);
declaration / definition
invocation / call time
< Note 'function' keyword
< Note invocation operator ()
Review
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362520/images/1635394/stucked.png)
var add = function (a, b) {
return a + b;
};
add(1, 2);
parameters
body
parameters
why functions?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362520/images/1635394/stucked.png)
DRY: Do not repeat your code!
Expression: More expressive code!
User Input: We can create actions
without knowing the user input.
Storing INvocations
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362520/images/1635394/stucked.png)
The value of a function is what is placed after its return statement.
var add = function(a, b){
return a + b;
};
add(4, 5); // => 9
Storing INvocations
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362520/images/1635394/stucked.png)
Like anything else, we can assign that value to a variable.
var add = function(a, b){
return a + b;
};
var nine = add(4, 5);
console.log(nine); // => 9
Storing INvocations
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362520/images/1635394/stucked.png)
Why would we do this?
var add = function(a, b){
return a + b;
};
var nine = add(4, 5);
console.log(nine); // => 9
Storing INvocations
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362520/images/1635394/stucked.png)
Why save function evaluations?
var nine = add(4, 5);
var square = function(a){
return a * a;
};
var eightyOne = square(nine);
console.log(eightyOne); // => 81
Storing INvocations
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362520/images/1635394/stucked.png)
Allows us to separate functionality.
// `add` will get us the number that we want.
var nine = add(4, 5);
var square = function(a){
return a * a;
};
// `square` will square what we want
var eightyOne = square(nine);
console.log(eightyOne); // => 81
Function INception
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362520/images/1635394/stucked.png)
More complex functionality...
var addAndSquare = function(a, b){
var sum = a + b;
var square = sum * sum;
return square;
};
// This technique is called `imperative`
// programming. We are building out each step bit
// by bit.
var addAndSquare = function(a, b){
var sum = add(a, b);
var squareSum = sum * sum;
return squareSum;
};
// We have replaced our a + b with
// our add function invoked with our
// parameters.
var addAndSquare = function(a, b){
var sum = add(a, b);
var squareSum = square(sum);
return squareSum;
};
// We have replaced sum * sum with
// our square function invoked with our
//sum variable.
Two types of scope
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362520/images/1635394/stucked.png)
Global Scope
Local Scope
VS
Variables in the global scope can be accessed anywhere, and by anything in your function.
Variables in the local scope can only be accessed in that scope, or in 'child' scopes relative to that function.
Intro To Scope
- Separate and modularize data and functionality.
- Makes sure we avoid polluting the global namespace.
- CLOSURES. We'll get to this later in the week. It's pretty cool.
WHy is scope important?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362520/images/1635394/stucked.png)
Intro To Scope
Intro To Scope
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362520/images/1635394/stucked.png)
Intro to Scope
var globalScope = true;
var addAndSquare = function(a, b){
var sum = add(a, b);
var squareSum = square(sum);
return square;
};
Scope is local to the `addAndSquare function`
Scope is global to the `addAndSquare` function
Scope is the parent scope to the
`addAndSquare` function
Scope is child scope to the global object.
Function INception
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362520/images/1635394/stucked.png)
Let's dive deeper into addAndSquare
var addAndSquare = function(a, b){
var sum = add(a, b)
var square = square(sum)
return square;
};
var eightyOne = addAndSquare(4, 5)
// inside of the local scope addAndSquare
// passing the arguments into `add` child scope
var sum = add(4, 5)
// inside local scope of `add` function
return 4 + 5
// inside of the local scope addAndSquare
var sum = add(4, 5)
// passing our sum into the square function
var square = square(sum)
return square;
// inside local scope of `square` function
return sum * sum
// back inside local scope of addAndSquare function
var sum = add(4, 5)
var square = square(sum)
// returning the square variable
return square;
// back in the global scope of the program
var addAndSquare = function(a, b){
var sum = add(a, b)
var square = square(sum)
return square;
};
// saving the returned results to the variable eightyOne
var eightyOne = addAndSquare(4, 5)
var addAndSquare = function(a, b){
var sum = add(a, b) // currently here
var square = square(sum)
return square;
};
var add = function(a, b){
return a + b // currently here
};
var addAndSquare = function(a, b){
var sum = add(a, b)
// currently here
var square = square(sum)
return square;
};
var square = function(num) {
return num * num // currently here
}
var addAndSquare = function(a, b){
var sum = add(a, b)
var square = square(sum)
// currently here
return square;
};
var eightyOne = addAndSquare(4, 5)
// currently here
var globalScope = true
var addAndSquare = function(a, b){
var sum = add(a, b)
var square = square(sum)
return square;
};
var eightyOne = addAndSquare(4, 5)
Exercise Time!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362520/images/1635394/stucked.png)
https://github.com/TelegraphPrep/06-2016-calculator
Prep+ Week 2: Functions + Intro To Scope
By telegraphprep
Prep+ Week 2: Functions + Intro To Scope
An introduction to functional programming
- 1,005