JavaScript Callbacks

Jisoo Yoon

jyoon006@gmail.com

JavaScript Callbacks

JavaScript functions are first-class objects meaning functions are type of an object and they can be used similar as other data types string,array, number, etc. Because JavaScript functions are object, they can be stored in variables, passed as arguments into functions, created within functions, and returned from functions.

Callback is a function that is passed as an argument to another function. Callback is called inside of the function to which it is passed. Callback functions can be anonymous or named when constructed in argument.

Above example shows a function that is passed in as an argument to another function. The function that is passed in as argument is the callback function.

Think of callback function as your meal ticket/receipt when you order something from fast food restaurant. Once you order something, they give you a receipt so that you can pick up your order when it's ready. Callbacks has same analogy. Callback functions are holder to take place in your function some later time when you want to invoke it.

setTimeout() && setInterval()

You may have already seen these JavaScript methods and have used it. Both of these methods take in callback function.

callback function

callback function

Below setInterval() will console log seconds everytime callback function is ran. It's simply telling run displayTime function after every 1000 ms.

You can either have callback function already constructed to pass in as argument or you can construct a callback function as argument as you're invoking it

constructed callback function passed in as argument

callback function created and passed as argument when invoking doSomeCB function

Callbacks are just regular JavaScript functions so you can pass arguments and have parameters within callback functions

callback parameter

callback argument

Native JavaScript Methods with Callbacks

• Array.prototype.forEach()
• Array.prototype.map()
• Array.prototype.filter()
• Array.prototype.reduce()

JavaScript has built in Array methods which takes in callback as an argument

Array.prototype.forEach()

forEach() is method for Arrays that iterates through the list and "do something" with it. forEach does not return any values and only used to iterate and run callback on iterated values

Above example takes in a callback to print the values in array

callback function

Lets look at what's really happening in forEach() function

Function each represents what forEach function is doing. It takes in a collection, which is an array, and for each of values in array, it calls a callback function to the value. forEach() takes in three parameters. First parameter is the values in array, second parameter is the index of the value, and third parameter is the array itself. This is same for map, filter, and reduce functions

callback function

Array.prototype.map()

Map function is very similar to forEach() except it returns a new array with values executed from callback function. You must return something using map()

Above example uses callback function to multiply values in array by two and return a new array of values. This means that original array inputted is not mutated. Filter and reduce functions also does not mutate original input collection

Lets look at what map() function is doing

callback functions

Map function will take in two parameters, which are collection of array and iterator. Iterator is a callback function to "do something" to each value in collection and returns new array with set of new values. In above example, multiplyByTwo is our iterator callback function which simply multiplies every value by two in the collection of array

Array.prototype.filter()

Filter function uses collection of array and takes a callback- a predicate function as second argument. The callback function is used to filter out any values that does not meet the condition and returns new array of values that meet the predicate function condition

What Filter Function is Doing

Takes in collection of array, which iterates through each value and checks to see if predicate callback function returns true for the value and returns new array of conditionally met values

callback function

Array.prototype.reduce

Reduce function uses collection of array, iterator callback function as first argument and accumulator as second argument. Accumulator argument isn't always needed

iterator callback function

accumulator

If accumulator is not passed in as argument, it will use first index value of array as accumulator and start iterator callback with second index value

What's really happening in reduce function

iterator callback function

In above example, accumulator was not passed in as argument so it will use the first index value in collection as starting point. It will then iterate through each value (after first index in this case) in array and replace new result running iterator callback function. At the end of iteration, it will return the final result value

Quiz

1. What is the output of console logs below? Please show in order.

Extra Credit: If the callback function had setTimeout(), what would be the output of the console logs? Why?

2. What is the output of below function?

3. Use forEach() to print (console log) every value multiply by two in array [1,2,3,4,5]

4. Use map() to return every value subtracted by 1 in array [5,4,3,2,1]

5. Use filter() to return values in which their index is not divisible by 2 in array [1,2,3,4,5]

6. Use reduce() to return result of multiplication in array [1,-1,-2,4]

Questions

jyoon006@gmail.com