Callbacks and Closures

http://slides.com/metasean/cc2015-callbacks-and-closures/live#/

DevMountain / Coco@Controls

1. Callbacks

2. Closures

3. Closure Challenges

Overview

Pass a function,

as a parameter,

into another function.

Callbacks

http://jsbin.com

Callback Example

Callback Example

/***********************************************************
  FUNCTIONS TO CALLBACK 
***********************************************************/

function add(a, b) { return a + b; }

function subtract(a, b) { return a - b; }

function multiply(a, b) { return a * b; }

function divide(a, b) { return a/b; }

function modulus(a, b) { return a % b; }

Callback Example

/***********************************************************
  VARIABLE ASSIGNMENTS 
***********************************************************/

var x = parseInt(prompt("What is X?"));

var y = parseInt(prompt("What is y?"));

Callback Example

/***********************************************************
  OUR AWESOME CALLBACK FUNCTION 
***********************************************************/

function calculate(a, b, callback) {
  var result = callback(a, b);
  return result;
}

Callback Example

/***********************************************************
  OUR AWESOME CALLBACK FUNCTION 
***********************************************************/

function calculate(a, b, callback) {
  return callback(a, b);
}

/***********************************************************
  LOGGING OUR CALLBACK FUNCTION RESULTS
***********************************************************/

console.log("For an x of " + x + " and a y of " + y + ":");
console.log("add      = " + calculate(x, y, add));
console.log("subtract = " + calculate(x, y, subtract));
console.log("multiply = " + calculate(x, y, multiply));
console.log("divide   = " + calculate(x, y, divide));
console.log("modulus  = " + calculate(x, y, modulus));

http://jsbin.com/yohazo/edit?js,console

Callback Example

Closures

Return a function

from a function.

Closure Example

function greet(msg) {

  var closure =  function(name) {
    console.log(msg + " " + name);
  };

  return closure;

}

Closure Example

function greet(msg) {
  return function(name) {
    console.log(msg + " " + name);
  };
}

// Call the greet function, including the closure
greet("Hello")("World");

Closure Example

function greet(msg) {
  return function(name) {
    console.log(msg + " " + name);
  };
}

// Create a variable from the returned function
var greeting = greet("Welcome");

// Call the closure function
greeting("Marvin");

One function,

creates another function,

such that the created function

includes the creating function's lexical environment.

Closures

Closure Example

function arrayOfFunctions() {
  var arr = [];
  for (var i = 0; i < 3; i++ ) {
    arr.push(
      function() { console.log(i) }
    );
  }
  return arr;
}

var af = arrayOfFunctions();

af[0]();
af[1]();
af[2]();

Closure Example

function arrayOfFunctions() {
  var arr = [];
  for (var i = 0; i < 3; i++ ) {
    arr.push(
      function() { console.log(i) }
    );
  }
  return arr;
}

var af = arrayOfFunctions();

af[0]();
af[1]();
af[2]();

// 3
// 3
// 3

Closures

Closure Example

function arrayOfFunctions() {
  var arr = [];
  for (var i = 0; i < 3; i++ ) {
    let j = i;  
    arr.push(
      function() { console.log(j) }
    );
  }
  return arr;
}

var af = arrayOfFunctions();

af[0]();
af[1]();
af[2]();

http://jsbin.com/vinime/edit?js,console

Closure Examples

http://www.codewars.com/kata/search/javascript?q=
&tags=Closures
&beta=false
&order_by=rank_id+asc

Challenges

1. https://slides.com/metasean/cc2015-callbacks-and-closures

2. https://www.udemy.com/understand-javascript/#/ (check http://www.retailmenot.com/view/udemy.com for regular, massive discounts off the course list price)

3. http://javascriptissexy.com/understand-javascript-closures-with-ease/

4. http://www.sitepoint.com/google-closure-how-not-to-write-javascript/

Resources

• http://opensaltlake.org

  • Open Salt Lake presents a community driven data competition

  • Join our OpenSaltLake Slack Channel 

  • Code Utah Competition Categories

• Use open data sets

  • http://www.utah.gov/data/

• Use an existing idea or come up with one of your own

  • http://opensaltlake.uservoice.com/forums/205305-opensl 

<code utah>

2015 Competition

Attributions

• "1865 Two Cent Obverse" by Brandon Grossardt for the photograph; James Longacre for the coin design. - Actual coin.. Licensed under Public Domain via Wikimedia Commons - https://commons.wikimedia.org/wiki/File:1865_Two_Cent_Obverse.png#/media/File:1865_Two_Cent_Obverse.png
• "1865 Two Cent Reverse" by Brandon Grossardt for the photograph; James Longacre for the coin design. - Actual coin.. Licensed under Public Domain via Wikimedia Commons - https://commons.wikimedia.org/wiki/File:1865_Two_Cent_Reverse.png#/media/File:1865_Two_Cent_Reverse.png