JavaScript Fundamentals:

Functional

Slides:
https://slides.com/hrjr/telegraphPrepWeek3

Classwork:
https://github.com/RebootJeff/jsFunctions

https://github.com/telegraphPrep/week3

Curriculum by:
Bianca Gandolfo, Jeff Lee, Preston Parry

Hoisting

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

Class Format

• Answer my questions

• Show thumbs

• Ask for help during exercises

Hello, world

• Name
• Something surprising that most people in this room wouldn't know about you
• How long you've been coding
• A dance move

Intro

• We're here to make you highly effective engineers, not to give you a comfortable experience
• A bumpy road  will get you there more quickly

Expectations

• Using Google and StackOverflow is a part of your job as an engineer. Get used to using these resources now.

Google/ StackOverflow

1. The number of times you logged something to the console and got a different result. 
2. Your ability to explain exactly what every single word and piece of punctuation is doing once you have the expected output. ​

Success Metrics

1. Experiment. Try new things like crazy. See what you get. 

2. Sit down and explain things super methodically once you have the right answer.

Success, Revisited

WE HOPE YOU CHOOSE TO JOIN US ON THIS JOURNEY!

Review:

Basics of Functions

and Hoisting

Function Anatomy

2 ways to make function vars

var spitASickRhyme = function() {
  console.log('I\'m in the pursuit of Princess Peach and I know');
  console.log('When I think I\'ve won, she\'s in another castle');
};

// function EXPRESSION <(•_•^) and (v•_•)> function DECLARATION

function spitASickRhyme() {
  console.log('I\'m in the pursuit of Princess Peach and I know');
  console.log('When I think I\'ve won, she\'s in another castle');
}

Hoisting- Your code and the computer

Hoisting

Key Takeaway:

Don't try to access a variable before you've assigned it!

Things don't exist in the way you expect them to before you've actually written out the code for them. 

Variables- values & references

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.

Scope

• Scope determines what variables are available for you to use at any given point in your program.
• Scope allows you to 'hide' variables in local scopes, or make them available to everyone in global scope. 

What is scope and why does it matter?

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;
};

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

• What does local scope mean? 
• It simply means that variables defined in here 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;
};
console.log(local);


console.log(global); //undefined

• A variable will be undefined if it exists 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. 

Global vs. Local 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.

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.

Global scope through window object

• window is nothing more than an object that sits in the global scope in all browsers. 
• Properties on objects have the same scoping as the objects themselves.

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. 

security clearance Example

Ingredient of the day example

creating scopes

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. 

Block Scope Doesn't Exist in JS

Questions

Exercise Time!

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

https://github.com/telegraphPrep/week3

• Slides
• The Internet!
• Google
• StackOverflow

CLOSURES

Closures

An ambassador (Jenny, from Kenya)

Closures

A function always maintains access to the execution scope it was born in

Lexical scoping

var closureAlert = function(){
  var x = 'Help! I\'m a variable '+
    'stuck in a closure!';
  
  var alerter = function(){
    alert(x);
  };
  
  alerter();
};
closureAlert();

Closure example #1

var closureAlert = function(){ 
  var x = 0; 
  var alerter = function(){ 
    x++;
    alert(x); 
  }; 
  return alerter; 
}; 

var alerter1 = closureAlert(); 
var alerter2 = closureAlert(); 
alerter1();
alerter2();

Closure Example #2

Closure Example: counter

Recipe: creation

RECIPE: Execution

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

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

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

Gotcha!?

var sayAlice = function(){

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

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

  return makeLog;
};

var log = sayAlice();

log();

Example #2,350,987

var makeStopwatch = function(){
  var elapsed = 0;

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

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

  return stopwatch;

};

var x = makeStopwatch();

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){ 
      privateMethod(args); 
    }
  };
};

Module Pattern - Example

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

  function useABS(pressure) {
    // 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',
    honkHorn: function() {
      console.log('HONK!!!');
    },
    hitBrakes: function(pressure){
      brakeLightsOn = true;
      seatbeltLocked = true;
      useABS(pressure);
    }
  };

};

Questions

Exercises

Higher-Order
Functions

and Callbacks

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

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

var logTrue = function(){ console.log(true); };
var logFalse = function(){ console.log(false); };

ifElse(true, logTrue, logFalse);

Callbacks

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

//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!

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 (name, adj) {
  return 'Col ' + name + ' Mc' + adj + ' pants';
};

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 doMathSoIDontHaveTo = function(n, func){
  return func(n);
};

doMathSoIDontHaveTo(5, square);

doMathSoIDontHaveTo(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! Tomorrow, I promise :)

Questions

Exercises

github.com/telegraphPrep/week3

New partners!

(again)

Underscore.js

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()

_.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 

Questions

Exercises

New partners!

(of course)

https://github.com/TelegraphPrep/week3

DEBRIEF

But wait! There's more!

• Underscore.js  vs  Lodash.js  vs  vanilla JS
• Go check out other Underscore methods/tools!
• Want to be a TA?
• Feedback:
  • Difficulty level? Topics?
  • Class format? Exercises?
• Organize some study groups amongst yourselves
• ...and don't forget THE MOST IMPORTANT THING!!!

If there is enough time

then we can discuss other topics such as...

• Other JavaScript topics
  • Mutability
  • Anonymous Functions vs Named Functions
• Other Software Engineering topics
  • Privacy and Interfaces
  • What does "API" really mean?
• Career stuff
  • Daily life of a software engineer
  • Roadmap / career path
  • Hack Reactor

BUT... there are no slides or prepared materials for these topics.

(Treat this like a Q&A session)