Callbacks and Closures
http://slides.com/metasean/cc2015-callbacks-and-closures/live#/
DevMountain / Coco@Controls
-
Callbacks
-
Closures
-
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
-
https://www.udemy.com/understand-javascript/#/ (check http://www.retailmenot.com/view/udemy.com for regular, massive discounts off the course list price)
-
http://javascriptissexy.com/understand-javascript-closures-with-ease/
-
http://www.sitepoint.com/google-closure-how-not-to-write-javascript/
Resources
-
Use open data sets
-
Use an existing idea or come up with one of your own
<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
Callbacks & Closures
By metasean
Callbacks & Closures
A Class & Code presentation on Callbacks and Closures for Code Utah 2015.
- 3,784