# Callbacks and Closures

1. Callbacks

2. Closures

3. Closure Challenges

# Overview

Functions are objects.

Pass a function,

as a parameter,

into another function.

# 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("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();
af();
af();``````

# 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();
af();
af();``````
``````// 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();
af();
af();``````
``````// 0
// 1
// 2
``````

What we actually wanted.  :-)

}

# <code utah>

2015 Competition

• "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

By metasean

# Callbacks & Closures

A Class & Code presentation on Callbacks and Closures for Code Utah 2015.

• 1,600