JavaScript Fundamentals:

Functional

Slides:
https://slides.com/telegraphprep/

telegraphPrepWeek3

Variables as References

Scope

Closures

Callbacks

Higher-Order Functions

Who are you?

• Have a good understanding of
  JS arrays, objects, and loops.
• Have a basic understanding of
  JS functions.
• Want to solidify fundamentals
• Seek more practice

Review:

Basics of Functions

context

Why are Functions important?

Overview

• Anatomy
• Definition vs Invocation
• Named Functions vs Anonymous
• Parameters vs Arguments
• Return Values and Side Effects

What is a function?

A set of instructions that we create. 

A block of code that we write that gets executed at some other point.

We use them to control the flow of our program.

Anatomy

var add = function (a, b) {

  return a + b;

};

add(1, 2);

declaration / definition

invocation / call time

< Note 'function'        keyword

< Note  invocation 

operator ()

Anatomy

var add = function (a, b) {

  return a + b;

};

add(1, 2);

body

Anatomy

var add = function (a, b) {

  return a + b;

};

add(1, 2);

arguments

parameters

anonymous function

function(item) {
  return item * 3;
}

An anonymous function has no name after the 'function' keyword

Often used as arguments to higher order functions

(we'll use these often in this class)

Named vs Anonymous

//Anonymous function saved into a variable
var nameImprover = function (name, adj) {
  return 'Col ' + name + ' Mc' + adj + ' pants';
};

//named function
function nameImprover(name, adj) {
  return 'Col ' + name + ' Mc' + adj + ' pants';
}

//both work!

Invocation/Call-time

Declaring a function is like creating a recipe: you decide what the steps are, but nothing actually gets made.

Invoking a function is like baking that recipe: now that you know what the steps are, you get to actually do them!

The cool part about this is that you can pass in different ingredients to that recipe each time! And each one is run totally independently of all other times that recipe has been created. 

Invocation/Call-time

//Definition/Declaration:
var breadMaker = function(ingredient) {
  return 'fresh baked ' + ingredient + 'bread';
}

//Invocation:
breadMaker('banana nut');
breadMaker('guacamole');
//Putting () next to a function name means
  //that you are invoking it right then.

Arguments/Parameters

//When we define a function, what that function
//  takes in (it's signature) are called parameters
var nameImprover = function (name, adj) {
  return 'Col ' + name + ' Mc' + adj + ' pants';
};

//When we invoke a function, what we pass in to 
//that particular invocation are called arguments
nameImprover('preston','purple');

Arguments/Parameters

Note:  the number of parameters and arguments don't have to match

Variables- values & references

context

Why do we care about the difference between a value and a reference?

Let's talk about links and webpages

Let's talk about links and webpages

Let's create a link to my favorite webpage:

the San Francisco Bike Coalition

In fact, I like them so much, let's create several links to that same page.

Let's talk about links and webpages

Let's create a link to my favorite webpage:

the San Francisco Bike Coalition

In fact, I like them so much, let's create several links to that same page.

Let's talk about links and webpages

Let's create a link to my favorite webpage:

the San Francisco Bike Coalition

In fact, I like them so much, let's create several links to that same page.

Let's talk about links and webpages

Let's create a link to my favorite webpage:

the San Francisco Bike Coalition

In fact, I like them so much, let's create several links to that same page.

Let's talk about links and webpages

"This is obvious. Why do we need so many slides on something we all know so well already?"

Let's talk about links and webpages

Let's go through and turn our SF Bike Coalition example into code so you can see just how effective this analogy is. 

Let's talk about links and webpages

Let's talk about links and webpages

Let's create a link to my favorite webpage:

the San Francisco Bike Coalition

In fact, I like them so much, let's create several links to that same page.

var sfbc = {members: 12000};

var them = sfbc;
var several = sfbc;
var samePage = sfbc;

Let's talk about links and webpages

Let's create a link to my favorite webpage:

the San Francisco Bike Coalition

In fact, I like them so much, let's create several links to that same page.

var sfbc = {members: 12000};

var them = sfbc;
var several = sfbc;
var samePage = sfbc;

Let's talk about links and webpages

Let's create a link to my favorite webpage:

the San Francisco Bike Coalition

In fact, I like them so much, let's create several links to that same page.

var sfbc = {members: 12000};

var them = sfbc;
var several = sfbc;
var samePage = sfbc;

Let's talk about links and webpages

Let's create a link to my favorite webpage:

the San Francisco Bike Coalition

In fact, I like them so much, let's create several links to that same page.

var sfbc = {members: 12000};

var them = sfbc;
var several = sfbc;
var samePage = sfbc;

Let's talk about links and webpages

"This is obvious. Why do we need so many slides on something we all know so well already?"

Values work as you have expected all along

• Note that variables that are equal to a "Primitive" value (number, boolean, string, etc.) work as you expect them to.
• You get that actual value itself, not a reference to something. 
• If you have two variables equal to 8, and you change one of those variables, it will not have any effect on the other variable. 

Only objects and arrays are passed by reference

• Technically, functions are passed by reference too, since arrays and functions are implemented as objects by the JavaScript internals. 
  • I say this mostly as a warmup for later in the week when it's useful to know that functions are just fancy objects.

Key Takeaways

Store values

Primitives

var num = 1

var foo = "bar"

var bool = true

var nothing = null

var notDef = undefined

Store References

Objects

var obj = { foo: 'bar' }

var arr = [0, 1, 2, 3]

var func = function(x) { ... }

Exercise time!!

Pair Programming

http://slides.com/telegraphprep/

pair-programming#/

Repo

https://github.com/telegraphPrep/week3

Scope

It's all about variable access...

Scope determines what variables are available for you to use at any given point in your program.

What is scope and why does it matter?

You can 'hide' variables in functions (local scopes)

-OR-

make variables available everywhere (global scope). 

1. To have multiple for loops all using i as their iterator
2. Avoid polluting the global namespace
   • Say you're Facebook, and you have millions of lines of code. You're probably going to use the variable 'likes' to mean different things in different parts of your code. 
3. Closures!! We'll get to this shortly. It's pretty cool.

Why would we want to hide something in local scope?

• There's only one way to create local scope: inside a function body.
• Each function body has it's own local scope.
  • This is the only way to create local scope. 
  • Nothing else creates local scope. Only function bodies. 

How do we create local scope where we can hide a variable?

• Local
• Global
• Nested Scopes
  • Precedence

SCOPE-RELATED CONCEPTS

Local Scope

var func = function(){
  var local = true;
};
func();

console.log(local);
  ReferenceError: local is not defined

• What does local scope mean? 
• It simply means that variables declared in a function are 'hidden' from the rest of the program. 
• That is, they only exist in this scope. 

Local Scope

var global;
var func = function(){
  var local = true;
};
func();
console.log(local);


console.log(global); //undefined

• A variable will be undefined if it exists (was declared) in that scope but hasn't been defined yet.
• A variable will throw this breaking ReferenceError if it does not exist in that scope. 

Global scope

• Global scope is for variables you want to be broadly accessible.
• Avoid putting things here unless you have to.

var x = 'global!';

Global Scope

• Using the keyword var creates a variable and assigns it to the current scope. 
• Not using the var keyword puts it in the global scope, no matter where it is in your program. 

var x = 'global!';

Global Scope

What gets print to the console?

Let's walk through the code as the JS interpreter...

var x = 'global!';

Global Scope

Global vs. Local Scope

The var keyword is important!

It creates a variable and then assigns it to the current scope. 

Keyword Var

• Always use the var keyword to create new variables. Funky, unexpected things happen when you don't. 
• Plus, it just makes your code easier to read. 
• This is one of those areas of engineering where just following a simple rule (always use the var keyword when declaring a new variable) will save you a lot of effort and future pain. 
• You can spend time learning more if you want, or you can just always use the keyword var.

security clearance Example

Top secret security clearance review

• When you have no security clearance, you're stuck looking at only public information.
• When you have Secret clearance, you check that information first before checking the public info.
• And when you have Super Top Secret clearance, you check Super Top Secret info first before checking Secret, before checking public. 

Ingredient of the day example

creating scopes

var nameMaker = function(name) {
    return {name: name};

};

var albreyObject = nameMaker('Albrey'); // {name: 'Albrey'}
var shannaObject = nameMaker('Shanna'); // {name: 'Shanna'}

// each time we invoke nameMaker, a new scope is created

passing variables into scopes

var nameMaker = function(name) {
    return {name: name};

};

var albreyObject = nameMaker('Albrey'); // {name: 'Albrey'}
var shannaObject = nameMaker('Shanna'); // {name: 'Shanna'}

// 'Albrey' and 'Shanna' become local variables to nameMaker 
// when passed into the function

returning variables from functions

var nameMaker = function(name) {
    var obj = {name: name};
};

var nameMaker2 = function(name) {
    var obj = {name: name};
    return obj;
};
var albreyObject = nameMaker('Albrey'); // undefined
// We can't access obj in nameMaker because we didn't return it

var shannaObject = nameMaker2('Shanna'); // {name: 'Shanna'}
// We can access obj in nameMaker2 because we returned it

how do we create scope review

• What is the only way of creating local scope in JavaScript? 
  • Using the var keyword within a function body.
• Nothing else creates local scope!

how do we create scope review

• For those of you coming from other languages, note that block scope does not exist in JS. 
• For those of you who only know JS- know that people coming from other languages will be slightly confused by not having block scope. 
• Don't worry about this; just keep doing what you already are. 

Key takeaways

• Scope determines variable accessibility
• "Execution scopes" are created every time you invoke a function

Key takeaways

Lexical Scoping, nested functions, and precedence

• In JS there is only function scope, no block scope
• Nested functions have access to variables declared in their outer scope
• Variable lookup starts in local scope then goes outward

Key takeaways

Local vs Global

• Local scope variables - declared within a function body and only accessible within that function
• Global scope variables - any that are not declared within a function body 
  • if you don't use the "var" keyword in a function, the variable gets put on the global scope

Questions

Exercise Time!

• Repo?
• TAs?
• Pairs?
• References?

https://github.com/telegraphPrep/week3

• Slides
• The Internet!
• Google
• StackOverflow

http://slides.com/telegraphprep/pair-programming#/

scopes, pt 2

Nested Inner Function

Let's walk through this code together as though we were the JS interpreter...

var firstAlert = function(){
  var x = 'Secret Message';
  
  var alerter = function(){
    alert(x);
  };
  
  setTimeout(alerter, 1000);
  console.log('will still run right after');
};

firstAlert();

Nested Inner Function

Let's pop this code into the console and see what happens...

Returned Inner Function

var firstAlert = function(){
  var x = 'Secret Message';
  
  var alerter = function(){
    alert(x);
  };
  
  return alerter;
};

var alert1 = firstAlert();

var add = function(num){
  var num1 = num;

  var addToNum1 = function(num2){
    return num1 + num2;
  };

  return addToNum1;
};

var alwaysAdd2 = add(2);

Returned Inner Function

questions?

Congratulations! You now know closures!

Why are closures important?

• access private variables (ex: module pattern)
• partial application of arguments (currying)*
• recursion involving memoization*

*advanced topics not covered in this class

Closure Definition

• closure function
• closure variable

Recipe: creation

RECIPE: Execution

function outerFunc() {
  var parentVar = "local to parent";
  function innerFunc() {
    return parentVar + ' but accessed by child!';
  };
  return innerFunc;
}

// STEP 1 - Invoke the parent function.
var example = outerFunc();
console.log(example);
// We see example now stores the child function.

// STEP 2 - Invoke the child function.
var result = example();
console.log(result);
// What's the end result?

Closure Definition,  revisited

Closure functions are declared inside outer functions (nested) and invoked in a context outside of the one they were created in.

Closure Definition,  revisited

Closure functions retain access to closure variables from the context the function was created in.

var firstAlert = function(){
  var x = 'Secret Message';
  var alerter = function(){
    alert(x);
  };
  return alerter;
};
var myAlert = firstAlert();
// myAlert still has access to x

Exercises

Gotcha!?

var sayAlice = function(){

  var makeLog = function() {
    console.log(alice);
  };

  var alice = 'Why hello there, Alice!';

  return makeLog;
};

var log = sayAlice();

log(); //??

What will we see in the console?

Scope is created at runtime

var makeStopwatch = function(){
  
  var elapsed = 0;
  var increase = function(){ elapsed++; };
  setInterval(increase, 1000);

  var stopwatch = {
    getTime: function() { return elapsed; }
  };

  return stopwatch;

};

var watch1 = makeStopwatch();
// wait 3 seconds...
var watch2 = makeStopwatch();
watch1.getTime() - watch2.getTime(); //??

Module Pattern - Boilerplate

var Module = function(){

  var privateProperty = 'I like big fonts,' +
    ' and I cannot lie';

  function privateMethod(params){
    // do something
  };

  return {
    publicProperty: 'JS rulez!!',
    publicMethod: function(params){
      // do something
    },
    privilegedMethod: function(params){ 
      var args = params;
      privateMethod(args); 
    }
  };
};

Module Pattern - Example

var makeNewCar = function(){  
  var brakeLightsOn = false, seatbeltLocked = false; // private properties

  function useABS(pressure) {  // private method
    // 1. Use Electronic Brakeforce Distribution.
    // 2. If necessary, activate Stability Control.
    // 3. Check if wheels are locking up.
    // 4. If necessary, release and re-apply EBD.
  }

  return {
    color: 'blue', // public property
    honkHorn: function() { // public method
      console.log('HONK!!!');
    },
    hitBrakes: function(pressure){ //privileged method
      brakeLightsOn = true; // private property
      seatbeltLocked = true; // private property
      useABS(pressure); // private method
    }
  };

};

key takeaways

Closures functions are nested inside outer functions and retain access to closure variables in the context the function was created in

function outerFunc() {
  var closureVar = "Only the closureFunc can access me!";
  function closureFunc() {
    console.log('closureVar says:', closureVar);
  }
  return closureFunc;
};

var innerFunc = outerFunc();
innerFunc(); // this is the closure function
// --> "closureVar says: Only the closureFunc can access me!" 

key takeaways

Each invocation of the outer function creates a NEW closure function and a corresponding NEW closure variable. 

function counter() {
  var n = 0;

  return {
    count: function() { n++; return n; },
    reset: function() { n = 0; }
  };
}

var counter1 = counter();
var counter2 = counter();
var counter3 = counter();

How many variables "n" are created?

key takeaways

The module pattern can be used to create a public interface for private variables and functions.

Questions

Exercise Time!

• Repo?
• TAs?
• Pairs?
• References?

https://github.com/telegraphPrep/week3

• Slides
• The Internet!
• Google
• StackOverflow

Higher-Order
Functions

and Callbacks

Context

Why do we care about higher order functions and callbacks?

So that we can write more declarative and expressive code

Functions Review

What is a function?

1. A block of code

2. We get to determine when this code is run (invoked)

3. Directions for doing something we have created but not executed yet (figuring out driving directions vs. actually driving there; writing down a recipe vs. actually cooking it).

Higher-Order Functions

Higher-Order Functions

Callbacks

// higher order function
var ifElse = function(condition, isTrue, isFalse){
  if(condition){
    // callback function
    isTrue();
  } else {
    // callback function
    isFalse();
  }
};
var logTrue = function(){ console.log(true); };
var logFalse = function(){ console.log(false); };

ifElse(true, logTrue, logFalse);

Callbacks are functions that you pass and invoke inside of higher order functions.

Callbacks: Anonymous functions

Remember from Week 1 that we had two main ways of creating a function? 

//Anonymous function saved into a variable
var nameCreator = function (firstName, lastName) {
  return firstName + ' ' + lastName
};

//named function
function nameImprover(firstName, lastName) {
  return firstName + ' ' + lastName
}

//both work!

Callbacks

What if we didn't store the anonymous function into a variable? What if we just left it as is, a set of instructions we've created but not executed yet?

//Anonymous function
function (firstName, lastName) {
  return firstName + ' ' + lastName
};

Callbacks

Let's refactor our code to just use anonymous functions, instead of declaring them in a separate part of our code and saving them into variables. 

Callbacks

var ifElse = function(condition, isTrue, isFalse){
  if(condition){
    isTrue();
  } else {
    isFalse();
  }
};

ifElse(true,
 function(){ console.log(true); },
 function(){ console.log(false); }
);

This is a super common pattern in functional programming: to declare anonymous functions in-line as arguments. 

Passing Arguments

Passing Arguments

Or, if our higher order function will be giving us the arguments, we can just include those as parameters for our anonymous functions. 

When would this happen? You can think of a higher-order function that might iterate through an array, and pass each item in the array to the callback function we pass in. In this case, we're not directly specifying the argument, we're letting the higher-order function give it to us each time. 

Passing Arguments

var increment = function(n){
  return n + 1;
};

var square = function(n){
  return n*n;
};

var doMath = function(n, func){
  return func(n);
};

doMath(5, square);

doMath(4, increment);

Where else are we going to use callbacks?

1. API requests (Get data from Yelp, and once you have that data some number of milliseconds later, invoke this function which is the code I've programmed to play with the Yelp data). 

2. Event handlers- Whenever a user clicks on this square, do these things.

3. Functional programming! Next week, I promise :)

Key takeaways

• A higher order function is a function that takes a function as input and/or returns a function as output

​

• "Callback" is a term used for any function that is passed as an argument to a function
  • they can be named or anonymous
  • arguments for callbacks can be passed as arguments to the higher order function

Questions

Exercises

github.com/telegraphPrep/week-3-introToHigherOrderFunctions

New partners!

(again)

Underscore.js

Context

What we'll do today...

underscore.js

Using the underscorejs library

What is this _ object that I'm invoking methods on?

_.each() usage

//_.each(list, iterator)

_.each() usage

• Iterates over a list of elements, giving them one at a time to an iterator function.
• Each invocation of iterator is called with three arguments: element, index, list. If list is an Object, iterator's arguments will be value, key, list.

We're going to write this out ourselves!

http://underscorejs.org/#each

• Iterates over a list of elements, giving them one at a time to an iterator function.
• Each invocation of iterator is called with three arguments: value, index, list. If list is a JavaScript object, iterator's arguments will be value, key, list.

//PSEUDOCODE!!
//declare a function that has two parameters
//determine if collection is an array or an object
//loop through the collection
//invoke the callback on each element in the collection

_.EACH() DEFINED

http://underscorejs.org/#each

• Iterates over a list of elements, giving them one at a time to an iterator function.

var _ = {}; 

//declare a function that has two parameters
_.each = function(list, callback) {
  //determine if collection is an array or an object
  //loop through the collection
  //invoke the callback on each element in the collection
};

_.EACH() DEFINED

http://underscorejs.org/#each

• Iterates over a list of elements, giving them one at a time to an iterator function.

var _ = {}; 

_.each = function(list, callback) {
  //determine if list is an array or an object
  if(Array.isArray(list)) {
    //use array for loop
      //invoke the callback on each element in the list
  } else {
    //use object for loop
      //invoke the callback on each element in the list
  }
};

_.EACH() DEFINED

http://underscorejs.org/#each

• Iterates over a list of elements, giving them one at a time to an iterator function.

var _ = {}; 

_.each = function(list, callback) {
  if(Array.isArray(list)) {
    for (var i = 0; i < list.length; i++) {
      //invoke the callback on each element in the list
    }
  } else {
    for (var key in list) {
      //invoke the callback on each element in the list
    }
  }
};

_.EACH() DEFINED

http://underscorejs.org/#each

• Iterates over a list of elements, giving them one at a time to an iterator function.

var _ = {}; 

_.each = function(list, callback) {
  if(Array.isArray(list)) {
    for (var i = 0; i < list.length; i++) {
      callback(list[i], i, list);
    }
  } else {
    for (var key in list) {
      callback(list[key], key, list);
    }
  }
};

_.EACH() DEFINED

Looping with _.each 

• Let's refactor from our for loop to use _.each instead!

Iterating over arrays:
Each vs For

Iterating over arrays:
Each vs For

For Loops

• Remember that typical for loops run the loop body once per element of the array.
• Every iteration gives the loop body a different number value of i

Each Loops

• The callback runs once per element of the array.
• Every iteration gives the callback a different element of the array.

_.EACH with Arrays:
Direct access to element

Iterating Over Objects:
Each vs For-In

For-In Loops

• Remember that typical for-in loops run the loop body once per property of the object.
• Every iteration gives the loop body a different string value of the key (aka property name).

Each Loops

• The callback runs once per property of the object.
• Every iteration gives the callback a different property value of the object.

_.EACH with Objects:
Direct access to Property value

Nested Looping with _.each()

Exercises

https://github.com/TelegraphPrep/week3

_.MAP() usage

//_.map(list, iterator)

_.map() defined

var _ = { each: function(/*...*/) { /*...*/ } };

_.map = function(list, iterator) {
  var result = []; // make a new array

  _.each(list, function(item, index, list) {
    result.push(iterator(item, index, list));
  });

  return result;
};

http://underscorejs.org/#map

• Produces a new array of values by mapping each value in list through a transformation function (iterator).
• Each invocation of iterator is called with three arguments: (element, index, list). If list is a JavaScript object, iterator's arguments will be (value, key, list).

Looping with _.map

_.map vs _.each 

Key takeaways

• Functional programming is more expressive and readable (think each and map vs using for loops)
• The iterator callback function gets called and passed element in the collection argument
• _.each basically does what a for loop does 
  • you can't return anything from its callback
• _.map produces a new array 
  • it's callback requires a return statement

Questions

Exercises

https://github.com/TelegraphPrep/week3