Callbacks functions and array methods can confuse some people when starting their journey as a developer. So let's reinforce our knowledge on Array methods and callbacks functions by breaking things down and going over some examples.
Callback functions
First, we'll go over callback functions. A callback function is a function
passed to another function as a parameter.
const add = (a,b) => {
return a + b
}
function multiply(a,b) {
return a*b
}
const solutionLogger = (a,b, callback) => {
const solution = callback(a, b)
console.log('the solution is ' + solution)
}
solutionLogger(2,4, add) //the solution is 6
solutionLogger(2,5, multiply) //the solution is 10
In the code above add()
and multiply()
would be our callback function. Both functions are provided to solutionLogger()
. solutionLogger()
then calls the callback function and logs out the solution.
Breaking down Array.map()
Suppose we had a list of numbers [1,2,3]
. And we want to add 2
to each number in our list. For now, let's create a function to solve our problem without using any array methods.
function addTwo(numberList) {
const newList = []
for(let i = 0; i < numberList.length; i++) {
const currentNumber = numberList[i]
const updatedNumber = currentNumber + 2
newList.push(updatedNumber)
}
return newList
}
addTwo([1,2,3]) // [3,4,5]
Our solution works great right now. But is there a way to make the solution more flexible? And instead of just limiting ourselves to running math operations on each number in the list, what if we could mutate each number in various other ways? Luckily we can... with callback functions!
const addCallback = (number) => number + 2;
const multiplyCallback = (number) => number * 3;
const indexAndNumber = (number, index) => `${number} + ${index} = ${number + index}`
function mutate(numberList, callback) {
const newList = []
for(let index = 0; index < numberList.length; index++) {
const currentNumber = numberList[index]
const updatedNumber = callback(currentNumber, index)
newList.push(updatedNumber)
}
return newList
}
const numberList = [1,2,3]
mutate(numberList, addCallback) // [ 3, 4, 5 ]
mutate(numberList, multiplyCallback) // [ 3, 6, 9 ]
mutate(numberList, indexAndNumber)
//[
// 'index is 0 & number is 1',
// 'index is 1 & number is 2',
// 'index is 2 & number is 3'
//]
To better describe what our updated function does. We need to rename the function from addTwo
to mutate
. The two other minor changes we made to our mutate
function were adding a callback
parameter and using the callback's returned value to mutate each item in an array. We also provide the item's value
and index
to our callback.
I have also created three separate callback functions to test out the mutate
function. addCallback
and multiplyCallback
are pretty straightforward; we run math operations on each item and return the new value. But what's more interesting is the indexAndNumber
function. Not only does indexAndNumber
uses the additional index
parameter. But the function also changes the data type for all of the items in our array. Instead of having an array
of numbers, we now have an array
of strings.
Anonymous callback functions
function mutate(numberList, callback) {
const newList = []
for(let index = 0; index < numberList.length; index++) {
const currentNumber = numberList[index]
const updatedNumber = callback(currentNumber, index)
newList.push(updatedNumber)
}
return newList
}
const numberList = [1,2,3]
mutate(numberList, (number, index) => {
return `index is ${index} & number is ${number}`
})
// [
// 'index is 0 & number is 1',
// 'index is 1 & number is 2',
// 'index is 2 & number is 3'
// ]
In our previous example, we've stored one of the callback functions in a variable called indexAndNumber
. But another way of obtaining the same results without declaring a new variable is by using an anonymous
function. In the example above, we provide an anonymous
function directly as a parameter to our mutate
function.
Putting everything together
function mutate(numberList, callback) {
const newList = []
for(let index = 0; index < numberList.length; index++) {
const currentNumber = numberList[index]
const updatedNumber = callback(currentNumber, index)
newList.push(updatedNumber)
}
return newList
}
const numberList = [1,2,3]
mutate(numberList, (number, index) => {
return `index is ${index} & number is ${number}`
})
// [
// 'index is 0 & number is 1',
// 'index is 1 & number is 2',
// 'index is 2 & number is 3'
// ]
numberList.map((number, index) => {
return `index is ${index} & number is ${number}`
})
// [
// 'index is 0 & number is 1',
// 'index is 1 & number is 2',
// 'index is 2 & number is 3'
// ]
Finally, let's compare our solution Array.map()
. We've created a function that mimics Array.map()
. Like many other helper methods available for different data types, like Arrays
or Objects
. Helper methods basically allow us to manipulate our data while writing less code.
Thanks for reading! And I hope this breakdown was helpful.
Top comments (0)