Loading

Callbacks & Closures

metasean

This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.

Callbacks and Closures

  1. Callbacks

  2. Closures

  3. Closure Challenges

Overview

Functions are objects.

Pass a function,

as a parameter,

into another function.

Callbacks

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

Callback Example

Closures can

return a function

from a function.

Closures

(sort of)

 

Return a function

from a function.

Closure Example

function greet(msg) {

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

  return closure;

}

Closure Example

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

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

Closure Example

"Welcome Marvin"
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

Alpha function,

creates Beta function,

such that Beta function

includes the Alpha function's lexical environment.

(example based definition)

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

Not exactly what we wanted!

}

Closures

arrayOfFunctions (aOF),

creates af,

such that af

includes aOF's lexical environment.

(example based definition)

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]();
// 0
// 1
// 2

What we actually wanted.  :-)

}

Closure Examples

Challenges

Resources

<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
Made with Slides.com