Functions pt2

Overview

Functions Review

Storing function evaluations

Functions within functions

Intro to Scope

Review

1  var add = function(a, b) {
2  
3    return a + b;
4
5  };
6
7  add(1, 2);

declaration / definition

invocation / call time

< Note 'function'        keyword

< Note invocation

operator ()

Review

1  var add = function (a, b) {
2
3    return a + b;
4
5  };
6
7  add(1, 2);

parameters

body

parameters

why functions?

DRY: Do not repeat your code!

Expression: More expressive code!

User Input: We can create actions

without knowing the user input.

Storing INvocations

The value of a function is what is placed after its return statement.

1  var add = function(a, b){
2    return a + b;
3  };
4
5  add(4, 5);

^ When this line is run it would return 9, but we are not saving or displaying that return anywhere

Storing INvocations

How do we save function evaluations?

We can assign that value to a variable.

1  var add = function(a, b){
2      return a + b;
3  };
4 
5  var sumOf4and5 = add(4, 5);
6
7  console.log(sumOf4and5); // => 9

^ Now our console would show 9

Storing INvocations

1  var add = function(a, b){
2      return a + b;
3  };
4  var sumOf4and5 = add(4, 5);
5  console.log(sumOf4and5); // => 9
6
7  var square = function(a){
8    return a * a;
9  };
10 
11 var simpleSqVal = square(9);
12
13
14 console.log(simpleSqVal); // => 81

We can use the variable interchangeably with the value it stores

1  var add = function(a, b){
2      return a + b;
3  };
4  var sumOf4and5 = add(4, 5);
5  console.log(sumOf4and5); // => 9
6
7 
8  
9  
10 
11 
12
13 
14 
1  var add = function(a, b){
2      return a + b;
3  };
4  var sumOf4and5 = add(4, 5);
5  console.log(sumOf4and5); // => 9
6
7  var square = function(a){
8    return a * a;
9  };
10 var ourSqVal = square(sumOf4and5);
11 var simpleSqVal = square(9);
12
13 console.log(ourSqVal); // => 81
14 console.log(simpleSqVal); // => 81

Function INception

More complex functionality...

1  var addAndSquare = function(a, b){
2      var sum = a + b;
3      var square = sum * sum;
4      return square;
5  };
6
7  // This technique is called `imperative` 
8  // programming. We are building out each
9  // step bit by bit.

Two types of scope

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

Intro To Scope

var red = 'red';

var yellow = 'yellow';

var blue =

'blue';

console.log(red); // => 'red'

console.log(red); // => 'red'

A variable

can be called

from anywhere

within the scope

it is defined

console.log(red); // => 'red'

console.log(blue);                   

console.log(blue);                   

console.log(blue);                   

console.log(blue); // => undefined

console.log(blue); // => undefined

console.log(blue); // => 'blue'

Intro To Scope

1  var red = 'red';
2
3 
4      
5 
6      
7      
8
9  
10  
1  var red = 'red';
2
3  var yellowScope = function() {
4     var yellow = 'yellow';
5 
6     
7      
8
9     
10  };
1  var red = 'red';
2
3  var yellowScope = function() {
4      var yellow = 'yellow';
5 
6      var blueScope = function(){
7          var blue = 'blue';
8
9      };
10  };
1  var red = 'red';
2  console.log(red) // => 'red'
3  var yellowScope = function() {
4      var yellow = 'yellow';
5      console.log(red) // => 'red'
6      var blueScope = function(){
7          var blue = 'blue';
8          console.log(red) // => 'red'
9      };
10  };
1  var red = 'red';
2  console.log(blue) // => undefined
3  var yellowScope = function() {
4      var yellow = 'yellow';
5      console.log(blue) // => undefined
6      var blueScope = function(){
7          var blue = 'blue';
8          console.log(blue) // => 'blue'
9      };
10  };

Intro To Scope

Scope is the parent scope to the 

`addAndSquare` function

Scope is child scope to the global object.

1  var globalScope = true;
2
3  var addAndSquare = function(a, b) {
4      var sum = add(a, b);
5      var squareSum = square(sum);
6      return squareSum;
7  };

Function INception

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)

EDITED Functions + Intro To Scope

By telegraphprep

Made with Slides.com

EDITED Functions + Intro To Scope

An introduction to functional programming

  • 664

More from telegraphprep