Announcements
JS Cont: Callback Functions and Arrays
Abby Chou
{ const tempFahrenheit = tempCelsius * 9/5 + 32;
return tempFahrenheit; };
(tempCelsius)
=>
{ const tempFahrenheit = tempCelsius * 9/5 + 32;
return tempFahrenheit; };
(tempCelsius)
=>
celsiusToFahrenheit
{ const tempFahrenheit = tempCelsius * 9/5 + 32;
return tempFahrenheit; };
(tempCelsius)
=>
celsiusToFahrenheit
{ const tempFahrenheit = tempCelsius * 9/5 + 32;
return tempFahrenheit; };
(tempCelsius)
=>
celsiusToFahrenheit
Review: Push and Pop
Review: Looping Through an Array
Practice!
Write a function that takes in an array of temperatures (in Celsius) and outputs an array with all the temperatures converted to Fahrenheit.
DO NOT mutate (change) the input array!
Paste your code into the browser console (or write it directly there) to test.
tempF = tempC * 9/5 + 32
Adding more…
Let’s say we now want three functions:
Adding more…
Let’s say we now want three functions:
We want to reuse all this code *except* the the part highlighted in orange.
Callback functions to the rescue!
Callback functions
Using Callbacks
Step 1: Write a general modifyArray function that takes in 2 inputs: an array and a callback function, and returns a new array, the result of applying the callback function to each element of the original.
const modifyArray = (arr, transformFunc) => {
// apply transformFunc to all elements of arr, return
// the result
};
const modifyArray = (arr, transformFunc) => {
// apply transformFunc to all elements of arr, return
// the result
};
modifyArray( , );
,
[
]
,
,
hattify
cat
cat with hat
const modifyArray = (arr, transformFunc) => {
// apply transformFunc to all elements of arr, return
// the result
};
modifyArray( , );
,
[
]
,
,
hattify
cat
cat with hat
hattify
[
]
const modifyArray = (arr, transformFunc) => {
// apply transformFunc to all elements of arr, return
// the result
};
modifyArray( , );
,
[
]
,
,
hattify
cat
cat with hat
hattify
,
[
]
const modifyArray = (arr, transformFunc) => {
// apply transformFunc to all elements of arr, return
// the result
};
modifyArray( , );
,
[
]
,
,
hattify
cat
cat with hat
hattify
,
[
]
,
const modifyArray = (arr, transformFunc) => {
// apply transformFunc to all elements of arr, return
// the result
};
modifyArray( , );
,
[
]
,
,
hattify
cat
cat with hat
hattify
,
[
]
,
,
const modifyArray = (arr, transformFunc) => {
// apply transformFunc to all elements of arr, return
// the result
};
modifyArray( , );
,
[
]
,
,
hattify
cat
cat with hat
,
[
]
,
,
Let’s generalize :D
Step 1: Write a general modifyArray function that takes in 2 inputs: an array and a callback function, and returns a new array, the result of applying the callback function to each element of the original.
Step 2: Use your modifyArray function to do the following:
Solution
Solution
Side Note: Shortened Function Notation
2 ways of writing functions:
(inputs) => { do stuff (and optionally return an output) }
(inputs) => (output)
This is just a shortened way of writing this!
map(...)
Creates a new array by applying the callback function to every element of the starting array.
Map Practice
This is an array of JavaScript objects!
Copy this array into your JS file, then use map to create an array of the areas of the rectangles.
Map example:
Objects example:
Solution
filter(...)
Creates a new array by selecting the elements in the starting array which pass the given “test” (i.e. filtering out the “bad” elements and keeping the “good” ones).
Filter Practice
Using the rectangles array from earlier, use filter to create an array that only contains rectangles with perimeter > 10.
Example:
Solution
Why do we use callback functions?
We can write the code for this…
And let other smart ppl (the writers of JavaScript libraries) write the code for this!
Callback Functions in Web Dev
Let’s say we wrote a function, updateAnimation(), that we want to call every 10 milliseconds.
Writing code to manage timers is annoying, so the JavaScript authors did it for us!
“When the timer goes off, call updateAnimation”
Callback Functions in Web Dev
Snake Workshop: Responding to keyboard inputs!
Callback Functions in Web Dev
Snake Workshop: Responding to keyboard inputs!
“When you get a keypress, do this with it”
Callback Functions in Web Dev
Later: Database query returns a promise, and we want to do something when that promise resolves (i.e. when the database gives us the info we need)
Callback Functions in Web Dev
Later: Database query returns a promise, and we want to do something when that promise resolves (i.e. when the database gives us the info we need)
Callback Functions in Web Dev
When we receive an http GET request to the /comment endpoint, we want to send a response with the comments we got from the database.
Callback Functions in Web Dev
When we receive an http GET request to the /comment endpoint, we want to send a response with the comments we got from the database.
Feedback Time!
weblab.is/feedback